Designing With Grid-Based Approach | How-To | Smashing Magazine
Popularity Report
 |
|||
|
|||
|
|||
|
|||
|
|||
|
Rank
URL Tag Cloud
Bookmark History
Saved by 78 people (-23 private), first by anonymouse user on 2007-04-14
- Monkeymynd on 2009-11-04 - Tags design , grid , webdesign , css , layout
- Haikona on 2009-10-02 - Tags design , web design
- Danobrienmuzyka on 2009-09-25 - Tags webdesign , css , layout , grids , tutorials
- Jjakks on 2009-09-04 - Tags tutorial , grids , web , layout , css , webdesign , design , grid
- Ced2000 on 2009-08-27 - Tags no_tag
Public Sticky notes
Designing With Grid-Based Approach
Highlighted by kkpaliwal
Highlighted by myerman
(e.g. 20×20 pixels) and at
Highlighted by myerman
“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 pag
Highlighted by myerman
we must use ems for all our vertical measurements,
Highlighted by desirea
One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid ru
Highlighted by desirea
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.”
Highlighted by desirea
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 margins and in some cases running heads and page footers, numbers, marginalia, etc.”
Highlighted by desirea
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”.
Highlighted by desirea
“The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
Highlighted by desirea
“The grid is the mannequin and the comp is the pattern.
Highlighted by desirea
Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet.
Highlighted by desirea
use the grid like a wireframe
Highlighted by desirea
Public Comment
on 2007-04-17 by rdatta