Grids in the webdesign

“There’s something different between this site and mine … It seems to be more pro and I do not know why!”

Have you ever had that kind of comment? Yet you have been using Photoshop (or similar programs) for some time, you know the typographic rules and those of the web, the color palette has been chosen carefully … In short, nothing does: your site seems destructured / désharmonisé.

Example of a grid

No worries, you probably did not use a grid in your design!

A grid, as in the film *?

Used in printing, it is quite possible to transpose the grid system into the web domain. But beware the web does not, and should not, necessarily have the same features and constraints as the paper support. To sum up: a web page does not have a predictable height or width, unlike printing.

* A very blue film with motorcycles, record fights and a certain Mr. Flynn. You found ?

Grids: the bases

There are many different grids with so many concrete cases of uses. We will only talk here about the “standard” grids dedicated to the web media. Of course, you can create your own grid: but it’s not as simple as it sounds – avoid reinventing the wheel.

The majority of the grids have side margins, so that the eye can enjoy reading comfort by not “tapping” against the edges of the browser window.

Anatomy of a grid

A grid is made up of vertical and / or horizontal marks (axes), separated by gutters for structuring the contents. Do not forget the external margins (for any edges of the window) and internal margins (of each axis).

It serves as a framework for organizing the page and its contents. It is an aid for both the designer and the visitor. This makes it possible to achieve a harmonious balance between the spacing and the organization of the different blocks.

A more readable and homogeneous page is obtained. Without a grid, a site with a lot of content may be less pleasant to visit.

Anatomy of a grid

It is easy to imagine the different possible variants of grids by playing on: the number of column, their width, the width of the gutters, the margins …

The vertical grids

You can choose the number of columns to be inserted in a fixed width. Consequently, the fewer the columns, the larger the widths.

Examples:

12 column grid

16 column grid

Grid with 24 columns

These columns allow to give a division rhythm in the horizontal direction (from left to right). Most of the time this is enough to create a design.

Vertical and horizontal grids

Adding horizontal divisions makes it possible to give marks in the vertical direction (from top to bottom).

Examples:

Horizontal and vertical grid

grid with squares

This is extremely convenient for aligning several blocks that are ribbed.

How to choose your grid?

There is no real rule: it depends on the project. It is therefore very important to prepare well for your project downstream to, among other things, thoroughly understand the contents of the site. In this regard, an article about Alsacréations may be of interest to you: Mockups & Rough: save time!

Your grid must therefore be compatible with the text lengths, the type of site (institutional, portfolio, blog / magazine …), etc. We can think that the more content, the more columns we need in the grid. But this is not an absolute rule, it is always a compromise between the amount of information presented on the screen and readability.

Where to find grids?

Many sites offer to download grid models. However, some sites only offer CSS Frameworks that are not always directly usable in design software.

960 grid system

960 grid system

“960 gs” is very well known, in addition to proposing a framework CSS, it is possible to download templates for numbers of software (Photoshop, Fireworks, GIMP …). The template is in the form of a layer: just place it in the first position in your palette and the trick is played.

Modular Grid Pattern

modular grid pattern

“Modular Grid Pattern”, allows to create on the fly a grid directly on the site. You can then download it as a pattern (.pat or .png) to integrate it into your composition.

GUIDEGUIDE

GUIDEGUIDE

“GuideGuide” is a Photoshop extension (from CS4) to generate markers symbolizing a grid. For information, it is still in beta.

Arrangement of grids (blocks)

After choosing its grid, it must now “fill” it by arranging the different blocks that will host the content (images, texts, videos, slideshow …).

Lots of combinations