Fantassin
École Bellecour
Année 2013/2014 : Digital
Grilles et mise en page
sur les supports digitaux
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
2
—
18
Ouvrages	 Thinking with T...
Grilles : définition
et principes fondamentaux
1/3
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
4
—
18
Quelques notions clés qui...
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
6
—
18
Les principes fondamentau...
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
7
—
18
Les principes fondamentau...
Supports et unités
2/3
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
9
—
18
Nous l’avons vu plus tôt,...
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
10
—
18
Les unités propres au mo...
Grilles et responsive design
3/3
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
14
—
18
Le principe du Responsiv...
Plus d’exemples sur http://mediaqueri.es/
Fantassin
Grillesetmiseenpagesurlessupportsdigitaux
ÉcoleBellecour
Année2013/2014:Digital
17
—
18
Plusieurs écoles pour le...
Fin de document
Fantassin
www.fantassin.fr
etudiant@fantassin.fr
Grilles et mise en page sur les supports digitaux
Grilles et mise en page sur les supports digitaux
Grilles et mise en page sur les supports digitaux
Grilles et mise en page sur les supports digitaux
Prochain SlideShare
Chargement dans…5
×

Grilles et mise en page sur les supports digitaux

1 111 vues

Publié le

Grilles et mise en page sur les supports digitaux

Publié dans : Formation
  • Soyez le premier à commenter

Grilles et mise en page sur les supports digitaux

  1. 1. Fantassin École Bellecour Année 2013/2014 : Digital Grilles et mise en page sur les supports digitaux
  2. 2. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 2 — 18 Ouvrages Thinking with Type (E. Lupton) Layout (Ambrose / Harris) Site web http://www.thegridsystem.org/ Application http://modulargrid.org/#app http://gridulator.com/ Nombre d’or http://www.miniwebtool.com/golden-section-calculator/ 0. Ressources
  3. 3. Grilles : définition et principes fondamentaux 1/3
  4. 4. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 4 — 18 Quelques notions clés qui définissent le terme de grille : — la grille a accompagné l’évolution du design graphique — la grille sert à structurer / organiser un contenu — la grille est une affaire d’harmonie et de proportions Autre chose ? Master 2 : Master 1 : — Hiérarchiser — Organiser — Harmoniser — Amener de la cohérence — Partitionner — Hiérarchiser — Mettre en valeur — Harmoniser — Repérer / aiguiller — Structurer — Economiser — Clarifier 1. Grilles : définition et principes fondamentaux
  5. 5. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 6 — 18 Les principes fondamentaux d’une grille (Master 2) : — Relation au format — Relation au contenu — Système de colonnes et de gouttières — Notion de proportion et d’équilibre — Compréhension — Adaptabilité — Système personnel 1. Grilles : définition et principes fondamentaux
  6. 6. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 7 — 18 Les principes fondamentaux d’une grille (Master 1) : — Modulable, flexible, «dépassable» — Adapté au contenu — Relation au format — Outil personnel — Compréhension — Composée de colonnes et de gouttières — Solide 1. Grilles : définition et principes fondamentaux
  7. 7. Supports et unités 2/3
  8. 8. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 9 — 18 Nous l’avons vu plus tôt, la grille a besoin d’un support pour vivre. Les supports imprimés et digitaux ont chacun leurs propriétés : — Une taille A4 ou autre Variable — Une orientation Port./pays. Variable — Une unité associée pt, cm px, em, % — Un rendu Impression Rendu De là, on se rend compte qu’il est nécessaire d’adapter sa façon de penser lorsqu’on aborde la réalisation d’un support digital. La notion de support est primordiale : il faut bien la définir avant de commencer la phase de design. 2. Supports et unités
  9. 9. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 10 — 18 Les unités propres au monde digital : — Le pixel (px) Unité de base d’un écran — Le pourcentage (%) Unité relative à un élément parent — L’em (em) Unité relative à la configuration du navigateur (hauteur de M) La composition d’une grille digitale se fait en pixel ou en en pourcentage (l’em étant utilisé pour gérer les tailles de caractère). On peut composer des grilles à colonnes identiques, ou des grilles à colonnes variables. Un exemple : le site de Twitter, composé grâce au nombre d’or. 2. Supports et unités
  10. 10. Grilles et responsive design 3/3
  11. 11. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 14 — 18 Le principe du Responsive Web Design (ou design responsable) est de mettre en place une mise en page adaptable à une large gamme d’appareils (ordinateurs, tablettes, smartphones, tv). Deux approches du RWD (Responsive Web Design) : — Responsive degradation Desktop > Mobile — Mobile first Mobile > Desktop Avec le RWD, la notion de support est l’inconnue x de l’équation. On design le produit à partir de référentiels fixes (320px, 480px, 768px, 1024px, 1280px…), mais il faut trouver le moyen de concevoir une grille variable, en fonction de x. 3. Grilles et responsive design
  12. 12. Plus d’exemples sur http://mediaqueri.es/
  13. 13. Fantassin Grillesetmiseenpagesurlessupportsdigitaux ÉcoleBellecour Année2013/2014:Digital 17 — 18 Plusieurs écoles pour les grilles : — Grilles fixes (« fixed grid») — Grilles fluides («fluid grid») — Grilles hybrides, combinant les deux grilles précédentes Prototypes disponibles dans le dossier «03_Grilles» Plusieurs solutions pour mettre en place une grille : — Utiliser un framework (Twitter Bootstrap par exemple) — Composer sa grille soit même Le tout est de trouver un système fonctionnel et adapté à sa façon de travailler. Chaque designer à sa méthodologie et ses outils. 3. Grilles et responsive design
  14. 14. Fin de document Fantassin www.fantassin.fr etudiant@fantassin.fr

×