This link has been bookmarked by 516 people . It was first bookmarked on 14 Apr 2007, by Percept.
-
01 Jun 12
-
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them.
-
In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way.
-
However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
-
We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach.
-
Things You Probably Don’t Know About Grid-based Design
-
“A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns).”
-
“A balanced and consistently implemented design scheme will increase readers’ confidence in your site.
-
Your goal is to establish a consistent, logical screen layout, one that allows you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page.”
-
“One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. [...] So the focus is usually on the horizontal layout, which usually means columns.”
-
“On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height.”
-
“In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
-
“Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing”.
-
“Use the canonical grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. In this way, the grid is merely being used to help establish consistent alignment relationships. [...] For dynamic layouts, identifying the minimum size that can be accomodated by the layout is usually a better solution than trying to recompute the layout for arbitrarily small display sizes.”
-
“One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
-
the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.”
-
“The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.”
-
“Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by
-
“The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.”
-
“You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy”.
-
“Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design.”
-
“Ratios are at the core of any well designed grid system. [..] By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 – 6 that we begin by simply layering division upon division to slowly build up the grid.”
-
“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
-
“Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns.”
-
“The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
-
“One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea 16 of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
-
“In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid.”
-
“Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. ”
-
“1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles. [..] 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles. [..] Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.”
-
“A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.”
-
“To add flexibility you can break the grid down into 10 or 12 columns. Half-columns are a good place to anchor mug-shots, refers, and other info.”
-
“You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.”
-
Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer’s comp and record measurements for my style sheet.”
-
“You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.”
-
“Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
-
-
21 Apr 12
-
07 Apr 12
Helina ChinGrids are Good - although an listing made in 2007, it is a rather large listing from Smashing Magazine regarding Grid Based Designs. It covers everything from who to follow, how to do it and examples of working grid designs. There are also several quotes from designers who make interesting observations about the application of the grid. The first link is to the main site. The following 3 links are to interesting articles about grids found searching his page.
-
27 Feb 12
Colleen GianinoTutorials and instruction on using the grid when designing web pages.
-
24 Feb 12
-
09 Feb 12
-
01 Jan 12
-
22 Dec 11
-
13 Dec 11
-
02 Dec 11
-
29 Nov 11
-
05 Nov 11
-
- By Vitaly Friedman
- April 14th, 2007
- Grids, Mathematics
- 85 Comments
Smashing Magazine
<!-- <div id="leaderboardtarget"></div> -->
Designing With Grid-Based Approach
Advertisement
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
-
A balanced and consistently implemented design scheme will increase readers’ confidence in your site. [...] Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages. [..] To start, gather representative examples o
-
typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.
-
Rule of Thirds, also known as the golden grid rule
-
-
13 Oct 11
-
03 Oct 11
Bianca RawlingsChapter 5: A thorough analysis of grid-based design, with examples of websites, periodicals, and the like.
-
29 Sep 11
-
28 Sep 11
-
27 Sep 11
-
28 Aug 11
-
23 Aug 11
-
20 Aug 11
-
14 Jul 11
-
13 Jul 11
-
“In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
-
“One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
-
-
01 Jul 11
-
24 Jun 11
-
11 Jun 11
Kyle ReddingDesigning with Grid-Based Approach
-
10 Jun 11
-
20 May 11
-
16 May 11
-
05 May 11
-
19 Mar 11
-
22 Feb 11
-
“The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
-
“One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
-
-
21 Feb 11
-
08 Feb 11
-
25 Jan 11
-
13 Jan 11
-
10 Dec 10
-
01 Dec 10
-
29 Nov 10
-
15 Nov 10
-
02 Nov 10
-
31 Oct 10
-
27 Oct 10
-
13 Oct 10
FranK CiaDesigning With Grid-Based Approach
-
06 Oct 10
-
30 Sep 10
-
-
n the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height
-
-
27 Sep 10
-
20 Sep 10
-
16 Sep 10
-
13 Sep 10
-
14 Aug 10
-
12 Aug 10
-
22 Jul 10
-
19 Jul 10
-
18 Jul 10
-
13 Jul 10
-
05 Jul 10
-
22 Jun 10
-
13 Jun 10
-
02 Jun 10
missumamigroup all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice
-
06 May 10
-
29 Apr 10
-
22 Apr 10
-
11 Apr 10
-
02 Apr 10
-
13 Mar 10
-
12 Mar 10
-
02 Mar 10
-
25 Feb 10
-
23 Feb 10
-
04 Feb 10
-
29 Jan 10
-
24 Jan 10
-
22 Jan 10
-
19 Jan 10
-
28 Dec 09
-
04 Dec 09
-
02 Dec 09
-
30 Nov 09
Steven Wallerthe articles a little old, but still a great overview of how to use grids in web design
-
27 Nov 09
-
18 Nov 09
-
09 Nov 09
-
Christine SætreOne of the better smashing lists of resources and articles. Great for introducing people --- newcomers and sages --- to grid design.
-
08 Nov 09
-
04 Nov 09
-
30 Oct 09
-
23 Oct 09
-
02 Oct 09
-
27 Sep 09
-
25 Sep 09
-
21 Sep 09
-
18 Sep 09
-
15 Sep 09
-
09 Sep 09
Page Comments
this webdesign has style!
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.