Utilité des grilles de mise en page

Utilité des grilles de mise en pageRencontres Interactives #6

Stéphanie Mahelin - Graphiste indépendante 27-09-2013

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - [email protected] - Siret : 75356054900010

Définition

Structure ou combinaison de lignes servant à faciliter le positionnement des éléments d’une création.

www.stephaniemahelin.com

mailto:contact%40stephaniemahelin.com?subject=


Source : http://www.alsacreations.com/
























D’où viennent les grilles ?

La mise en page « papier »




Anatomie de la grille

les marges

marges





colonne gouttièremarges





guide horizontaux

module




Et en vrai ça sert à quoi une grille ?À faciliter la vie du graphiste et favoriser l’intégration CSS,

mais pas seulement…

> Créer une cohérence, une harmonie entre toutes les pages.

> Améliorer le confort de lecture en hiérarchisant les éléments.

> Il s’agit de maitriser l’équilibre des pages. Si l’on maitrise cet équilibre, on maitrise également les zones où l’on va briser l’équilibre et attirer l’attention : on oriente le regard.




Penser la grille

« La grille est l’élèment le plus mal compris et le moins bien utilisé d’une mise en page. Elle ne sert réellement que si elle

découle du contenu qu’elle est destinée à héberger. »Derek Birdsall

Notes on Book Design

Il n’y a pas de modèles de grille idéale, il n’y a que des grilles bien pensées pour le contenu et le design

que l’on souhaite mettre en place.




Concevoir sa grille

http://978.gs magasin Pinkett www.blueprintcss.org

www.1140px.com/http://getbootstrap.com




Uniquement pour les sites à largeur fixe ?

Des grilles s’adaptent également aux sites responsives. On parlera alors de pourcentage plutôt que de dimensions.

L’important étant les proportions entre les différents éléments, plus que leurs dimensions.




Les proportions

Exemple : le nombre d’or

1.61803398875« La proportion divine »




Source : http://www.culture-speecom.com/ - http://fabrice.cattaini.free.fr/




Sortir de la grille

Une grille n’est parfaitement réussie que si, une fois tous les problèmes de texte résolus, le graphiste se démarque

de l’uniformité qu’implique la structure d’une grille et utilise celle-ci pour créer une narration visuelle dynamique,

à même de maintenir l’intérêt page après page.

Timothy SamaraMaking and Breaking the Grid




La grille comme une ville…

Source : http://alistapart.com/article/outsidethegrid




La grille comme une ville…

Source : http://alistapart.com/article/outsidethegrid




Quelques livres…

> Anne-sophie Fradier

Atelier Perrousseaux - 2012




Quelques livres…

> Beth Tondreau

Dunod




Quelques livres…

> Ambrose - Harris

Pyramyd




Quelques livres…

> Timothy Samara

Rockport




> Les grilles sont des outils et non des contraintes.

> Les grilles doivent être conçues ou choisies.

> Comme toute notion importante du design, il faut d’abord comprendre, assimiler, maîtriser pour ensuite aller au-delà.

Suivre la grille ou la briser ?Un juste milieu à trouver !

Conclusion




Merci !

[email protected]

@smahelin

