Utilité des grilles de mise en page

3 749 vues

Publié le

Support pour une intervention aux 6e Rencontres Interactives de Caen : d'où viennent les grilles ? qu'est-ce que les grilles ? comment les utiliser dans le webdesign ?

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 749
Sur SlideShare
0
Issues des intégrations
0
Intégrations
43
Actions
Partages
0
Téléchargements
74
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Utilité des grilles de mise en page

  1. 1. Utilité des grilles de mise en page Rencontres Interactives #6 Stéphanie Mahelin - Graphiste indépendante 27-09-2013
  2. 2. 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.
  3. 3. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  4. 4. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  5. 5. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  6. 6. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  7. 7. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  8. 8. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Source : http://www.alsacreations.com/
  9. 9. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 D’où viennent les grilles ? La mise en page « papier »
  10. 10. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Anatomie de la grille marges
  11. 11. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Anatomie de la grille colonne gouttièremarges
  12. 12. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Anatomie de la grille guide horizontaux module
  13. 13. 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.
  14. 14. 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.
  15. 15. 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
  16. 16. 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.
  17. 17. 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 »
  18. 18. 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/
  19. 19. 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 Samara Making and Breaking the Grid
  20. 20. 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
  21. 21. 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
  22. 22. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Quelques livres… > Anne-sophie Fradier Atelier Perrousseaux - 2012
  23. 23. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Quelques livres… > Beth Tondreau Dunod
  24. 24. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Quelques livres… > Ambrose - Harris Pyramyd
  25. 25. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Quelques livres… > Timothy Samara Rockport
  26. 26. 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
  27. 27. Stéphanie Mahelin - Graphiste indépendante - www.stephaniemahelin.com - contact@stephaniemahelin.com - Siret : 75356054900010 Merci ! www.stephaniemahelin.com contact@stephaniemahelin.com @smahelin

×