Fantassin

École BellecourAnnée 2013/2014 : Digital

Grilles et mise en pagesur les supports digitaux

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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

Grilles : définition et principes fondamentaux

1/3

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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éfinitionetprincipesfondamentaux

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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éfinitionetprincipesfondamentaux

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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éfinitionetprincipesfondamentaux

Supports et unités2/3

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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çonde 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. Supportsetunités

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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 enen 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âceau nombre d’or.

2. Supportsetunités

Grilles et responsive design3/3

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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 concevoirune grille variable, en fonction de x.

3. Grillesetresponsivedesign

Plus d’exemples sur http://mediaqueri.es/

Fan

tass

inG

rille

s et

mis

e en

pag

e su

r le

s su

ppor

ts d

igita

uxÉ

cole

Bel

leco

urA

nnée

201

3/20

14 :

Dig

ital

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. Grillesetresponsivedesign

Fin de document

Fantassinwww.fantassin.fr

etudiant@fantassin.fr