Fantassin Grilles de mise en page sur supports digitaux École Bellecour Année 2014/2015 : Digital 0.Ressources Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 Ouvrages 2 — 21 The Grid System : http://www.thegridsystem.org/ Création de grilles fixes : http://modulargrid.org/#app http://gridulator.com/ Nombre d’or : http://www.miniwebtool.com/golden-section-calculator/ 1/4 Grilles : principes fondamentaux Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 1. 5 — 21 Grilles : principes fondamentaux Pourquoi une grille ? — — — — — Structurer, hiérarchiser et organiser les informations Rendre le document cohérent et harmonieux Simplifier la composition Guider le regard Mettre en valeur 2/4 Supports et unités 2. Supports et unités Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 Qui dit grille dit support sur lequel se fixer 7 — 21 Hors, les supports imprimés et digitaux ont des caractéristiques différentes, qui nous demandent de nous adapter : 1.Le format du support : fixe en print / et variable en web (peut également être fixe dans certains cas, comme les applications) 2.L’orientation du support : fixe en print / et variable en web (orientation portrait/paysage sur tablette) 3.L’unité de travail : le point ou le mm en print / le pixel, le pourcent ou le em/rem en web 4.Le rendu : impression 300dpi en print / rendu variable en web (densité de pixels différente sur ordinateur, tablettes…) Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 2. 8 — 21 Supports et unités Composer du digital, c’est composer pour un support maléable Cette notion doit être présente avant même la phase de design. Designer un élément sans penser à son comportement est un non-sens. En ce sens, la grille a autant de valeur dans le web que dans le print. De plus, comme nous créons de «l’adaptable», il faut accepter d’être plus lâche avec certaines règles. 2. Supports et unités Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 Un tour du côté des unités 9 — 21 — Le pixel (px) : unité de base d’un écran — Le pourcent (%) : relatif à l’élément parent Cette unité est utilisée principalement pour gérer sa grille et la taille d’élements «blocs» du design — L’em ou le rem : relatif à la configuration du navigateur Ces unités servent principalement à gérer les tailles de texte (dans un souci d’accessibilité) 3/4 Exemples L’ancienne grille de Twitter, traitée avec le nombre d’or Un exemple de grille web «fixe» 4/4 Grilles et responsive design Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 4. 14 — 21 Grilles et responsive design Le responsive design (RWD) L’idée de responsive design est de proposer un design capable de s’adapter à tous les supports de navigation web : ordinateurs, tablettes, smartphones, tv… Deux approches : — Responsive degradation (desktop › mobile) — Mobile first (mobile › desktop) 4. Grilles et responsive design Fantassin Grilles de mise en page sur supports digitaux École Bellecour 2014/2015 Pour mettre en place une grille responsive, plusieurs options : 16 — 21 — — — La grille fixe La grille fluide La grille hybride, mêlant les deux Le tout est de trouver un système fonctionnel et adapté à sa façon de travailler. Chaque designer à sa méthodologie et ses outils. Cependant, il n’y a pas de secret : il faut tester, et re-tester afin de façonner ses outils Allez, c’est fun tout ça ! Exemples concrets : grilles fixes, fixes & responsive, fluides, fluides & responsive + Pratique : de la grille print à la grille web Version «Master 1» Version «Master 2» Fin de document [email protected] Fantassin www.fantassin.fr
© Copyright 2024 ExpyDoc
