229
Étude de cas : Roma Italia
Figure 10.3
Chaque colonne fait
80 pixels de large
avec une gouttière de
10 pixels à droite.
Comme.vous.pouvez.le.voir,.la.grille.est.divisée.en.12 colonnes,.chacune.faisant.80 pixels.de.
large.avec.une.gouttière.de.10 pixels.à.sa.droite.(voir.Figure 10.3),.ce.qui.produit.une.mise.
en.page.de.1 080 pixels.de.large..Un.décalage.de.10 pixels.(une.gouttière.supplémentaire).
est.ajouté.à.la.marge.de.gauche.pour.équilibrer.la.grille..Ce.décalage.ainsi.que.la.gouttière.le.
long.de.la.dernière.colonne.sont.cependant.invisibles.pour.l’internaute..On.pourrait.avancer.
que.la.grille.fait.en.réalité.1 070 pixels.une.fois.ces.composants.invisibles.supprimés.ou,.
qu’à.l’inverse,.elle.fait.1 090 pixels.lorsqu’ils.sont.rendus.visibles..Quoi.qu’il.en.soit,.notre.
grille.s’articule.autour.d’une.mesure.globale.de.1 080 pixels..
Pour.l’essentiel,.le.texte.et.les.images.s’alignent.sur.les.colonnes.et.les.gouttières..C’est.évidemment.tout.l’intérêt.d’utiliser.une.grille..Vous.remarquerez.que.je.n’ai.pas.parfaitement.
aligné.tous.les.éléments..Il.est.important.de.noter.ici.qu’une.grille.ne.doit.pas.systématiquement.dicter.le.positionnement.exact.des.éléments..Elle.le.facilite,.mais.elle.doit.laisser.
au.concepteur.la.liberté.de.faire.les.meilleurs.choix..Dans.Making and Breaking the Grid.
(Rockport.Publishers,.2005),.Timothy.Samara.décrit.ce.principe.mieux.que.moi :
"Il. est. important. de. comprendre. que. la. grille,. bien. qu’elle. offre. un. guide. précis,. ne.
doit.jamais.subordonner.les.éléments.qu’elle.contient..Son.rôle.est.de.fournir.une.unité.
générale,. sans. inhiber. la. vitalité. de. la. composition.. Dans. la. plupart. des. cas,. la. variété.
de.solutions.de.mise.en.page.que.propose.la.grille.est.inépuisable,.mais.même.ainsi,.il.
est.judicieux.d’enfreindre.son.schématisme.à.l’occasion..Le.graphiste.ne.doit.pas.être.
contraint.par.sa.grille,.mais.s’appuyer.sur.elle.pour.en.tester.les.limites..Une.grille.bien.
établie.crée.d’infinies.possibilités.d’exploration."
Ce.n’est.pas.dans.une.page.unique.que.se.manifeste.le.mieux.l’intérêt.des.grilles,.mais.dans.
la.composition.d’ensemble..Dans.une.brochure.imprimée,.la.grille.sert.ainsi.à.unifier.l’emplacement.des.éléments.au.fil.des.pages..Si.Roma.Italia.était.un.vrai.site,.toutes.ses.pages.
(et.pas.seulement.les.deux.que.vous.voyez).s’appuieraient.sur.la.même.grille.afin.d’offrir.
une.continuité.visuelle.à.l’utilisateur.et.des.options.infinies.de.mise.en.page.au.concepteur.
Je. n’ai. ici. fait. qu’aborder. rapidement. le. sujet. des. grilles..Vous. trouverez. de. nombreuses.
ressources.sur.le.site.The.Grid.System.(http://www.thegridsystem.org/).et.dans.l’article.
"Designing.with.Grid-Based.Approach".(en.anglais).du.site.du.magazine.Smashing.(http://
www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/).
Étude de cas : Roma Italia
Figure 10.3
Chaque colonne fait
80 pixels de large
avec une gouttière de
10 pixels à droite.
Comme.vous.pouvez.le.voir,.la.grille.est.divisée.en.12 colonnes,.chacune.faisant.80 pixels.de.
large.avec.une.gouttière.de.10 pixels.à.sa.droite.(voir.Figure 10.3),.ce.qui.produit.une.mise.
en.page.de.1 080 pixels.de.large..Un.décalage.de.10 pixels.(une.gouttière.supplémentaire).
est.ajouté.à.la.marge.de.gauche.pour.équilibrer.la.grille..Ce.décalage.ainsi.que.la.gouttière.le.
long.de.la.dernière.colonne.sont.cependant.invisibles.pour.l’internaute..On.pourrait.avancer.
que.la.grille.fait.en.réalité.1 070 pixels.une.fois.ces.composants.invisibles.supprimés.ou,.
qu’à.l’inverse,.elle.fait.1 090 pixels.lorsqu’ils.sont.rendus.visibles..Quoi.qu’il.en.soit,.notre.
grille.s’articule.autour.d’une.mesure.globale.de.1 080 pixels..
Pour.l’essentiel,.le.texte.et.les.images.s’alignent.sur.les.colonnes.et.les.gouttières..C’est.évidemment.tout.l’intérêt.d’utiliser.une.grille..Vous.remarquerez.que.je.n’ai.pas.parfaitement.
aligné.tous.les.éléments..Il.est.important.de.noter.ici.qu’une.grille.ne.doit.pas.systématiquement.dicter.le.positionnement.exact.des.éléments..Elle.le.facilite,.mais.elle.doit.laisser.
au.concepteur.la.liberté.de.faire.les.meilleurs.choix..Dans.Making and Breaking the Grid.
(Rockport.Publishers,.2005),.Timothy.Samara.décrit.ce.principe.mieux.que.moi :
"Il. est. important. de. comprendre. que. la. grille,. bien. qu’elle. offre. un. guide. précis,. ne.
doit.jamais.subordonner.les.éléments.qu’elle.contient..Son.rôle.est.de.fournir.une.unité.
générale,. sans. inhiber. la. vitalité. de. la. composition.. Dans. la. plupart. des. cas,. la. variété.
de.solutions.de.mise.en.page.que.propose.la.grille.est.inépuisable,.mais.même.ainsi,.il.
est.judicieux.d’enfreindre.son.schématisme.à.l’occasion..Le.graphiste.ne.doit.pas.être.
contraint.par.sa.grille,.mais.s’appuyer.sur.elle.pour.en.tester.les.limites..Une.grille.bien.
établie.crée.d’infinies.possibilités.d’exploration."
Ce.n’est.pas.dans.une.page.unique.que.se.manifeste.le.mieux.l’intérêt.des.grilles,.mais.dans.
la.composition.d’ensemble..Dans.une.brochure.imprimée,.la.grille.sert.ainsi.à.unifier.l’emplacement.des.éléments.au.fil.des.pages..Si.Roma.Italia.était.un.vrai.site,.toutes.ses.pages.
(et.pas.seulement.les.deux.que.vous.voyez).s’appuieraient.sur.la.même.grille.afin.d’offrir.
une.continuité.visuelle.à.l’utilisateur.et.des.options.infinies.de.mise.en.page.au.concepteur.
Je. n’ai. ici. fait. qu’aborder. rapidement. le. sujet. des. grilles..Vous. trouverez. de. nombreuses.
ressources.sur.le.site.The.Grid.System.(http://www.thegridsystem.org/).et.dans.l’article.
"Designing.with.Grid-Based.Approach".(en.anglais).du.site.du.magazine.Smashing.(http://
www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/).