La grille fractionne l’espace en unités régulières et permet d’établir un arrangement systématique du contenu dans l’espace de la page ou de l’écran. 
Elle a été imaginée pour répondre aux tensions entre contenu (texte, image, données) et le cadre dans lequel il prend place (page, écran). Elle est à l’arrière plan de toute production graphique car elle s’appuie sur ce qui était le module physique des caractères de plomb (lettres isolées dans un bloc de plomb) dans l’imprimerie.
L’utilisation de la grille est aussi ancienne que les 1ers imprimés, mais sa théorisation comme outil de conception date d’après la seconde guerre mondiale. La grille moderne est l’expression de l’héritage de différents mouvements d’avant-garde comme le Futurisme, le Constructivisme, le Bauhaus, le Modernisme et le Style International (architecture).

Des grilles pour le design d’interfaces

960 Grid System propose un ensemble de fichiers source de grilles de 960 px en résolution utile, avec un showcase permanent d’exemples pour l’inspiration. Les formats : Acorn Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp Design.

The Grid System recense tous les templates utiles notamment dans les format inDesign, Illustrator et Photoshop pour des grilles web mais aussi A3 et A4.

Une grille de 950 px à télécharger sur le site Konigi, au format photoshop, divisée en 24 colonnes, destinée à produire des maquettes CSS.

Une grille de 950 px à télécharger sur le site Konigi, au format illustrator, divisée en 24 colonnes, destinée à produire des maquettes CSS.

Grilles pour les outils de conception (Axure et Omnigraffle)

Un gabarit de grille de 960 px pour Omnigraffle

Des grilles pour Axure, 960 px, 12 et 16 colonnes

Outils pour générer une grille

Grid Designer permet de générer une grille en saisissant différents paramètres : résolution utile, nombre de colonnes souhaitées, etc.

Gridinator, lui, génère non seulement une grille destinée aux maquettes mais aussi les feuilles de style et le code HTML.

Grid buildrrr, utilise un paramétrage en 12 ou 16 colonnes, avec la possibilité d’intégrer des formats publicitaires.

Enfin, Gridmaker v3 propose de télécharger la grille au format PNG, ainsi qu’un plugin pour Photoshop CS4.

Une sélection d’articles

Ultimate Guide To Grid-Based Web Design: Techniques and Tools — Noupe Design blog

Grids Are Good – une présentation PDF sur les grilles appliquées au web

Why Use a Grid – Mark Boulton

5 Simple Steps to Designing Grid Systems: Preface – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 1 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 2 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 3 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 4 – Mark Boulton

5 Simple Steps to Designing Grid Systems: Part 5 – Mark Boulton

Feeling Your Way Around Grids – Mark Boulton

Oh Yeeaahh! – Subtraction

The Funniest Grid You Ever Saw – Subtraction

Grid Computing… And Design – Subtraction

Grid-Based Design: Six Creative Column Techniques – Smashing Magazine

Thinking Outside the Grid – A List Apart

Setting Type on the Web to a Baseline Grid – A List Apart

Gridding the 960 – Cameron Moll

Vertical Grids – Position is Everything