Skip to main content

Designing With Grid-Based Approach | Smashing Magazine

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Groups (1)

  • sqli-agency

    SQLI Agency

    23 members,276 bookmarks

    Afin de centraliser et partager plus efficacement tous les bookmarks que l'on peut s'envoyer les uns et les autres au sein de l'agency que ce soit de la veille techno, ergo, webmarketing ou graphique.

Bookmark History

Saved by 48 people (15 private), first by anonymouse user on 2007-04-14


Public Comment

on 2007-04-17 by rdatta

Awesome selection of design guidelines and tips

Public Sticky notes

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.

And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. 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. Besides, we’ve listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about.

Highlighted by missiontobe

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

CSS, Design, Development, Grid, Showcase, Techniques

Highlighted by designer