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 - contact@stephaniemahelin.com - Siret : 75356054900010

Définition

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

D’où viennent les grilles ?

La mise en page « papier »

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Anatomie de la grille

les marges

marges

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Anatomie de la grille

colonne gouttièremarges

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Anatomie de la grille

guide horizontaux

module

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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.

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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.

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Concevoir sa grille

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

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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.

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Les proportions

Exemple : le nombre d’or

1.61803398875« La proportion divine »

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

La grille comme une ville…

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

La grille comme une ville…

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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Quelques livres…

> Anne-sophie Fradier

Atelier Perrousseaux - 2012

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Quelques livres…

> Beth Tondreau

Dunod

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Quelques livres…

> Ambrose - Harris

Pyramyd

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Quelques livres…

> Timothy Samara

Rockport

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

> 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

Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010

Merci !

www.stephaniemahelin.comcontact@stephaniemahelin.com

@smahelin