Les grilles et le webdesign

Inspirées des grilles utilisées dans l’édition (les journaux par exemple), les grilles appliquées au webdesign constituent une aide précieuse pour l’élaboration de pages web bien agencées. Employées à bon escient, elles permettent la création de designs équilibrés, structurés, rigoureux et donc plus lisibles et fonctionnels.



Les bases
Les grilles les plus utilisées pour le web sont basées sur modèle simple : des colonnes, verticales et/ou horizontales, séparées par des gouttières (marges). Il suffit ensuite de jouer sur le nombre de colonnes, leur largeur, la taille de la gouttière pour obtenir un vaste panel de grilles.

Un exemple d'utilisation de grille

Pourquoi faire ?
Une grille fait en premier lieu office de support pour le graphiste en lui fournissant des limites, des lignes de force. Libre à lui ensuite de mettre en valeur sa structure en “révélant” la grille (à l’aide de colonnes de texte, blocs, images…), ou au contraire en s’affranchissant visuellement de celle-ci. Dans ce dernier cas, même si la grille n’est pas immédiatement lisible, la page web bénéficiera d’une harmonie certaine, et l’expérience utilisateur s’en trouvera améliorée.

Un exemple de site utilisant une grille, Area22Un exemple de site utilisant une grille, Uniplan
Deux exemples de sites utilisant des grilles,
de deux manières différentes (cliquez sur les vignettes pour visualiser)

Pour résumer ! L’utilisation des grilles apporte un vrai plus à un site web, en rythmant la lecture et apportant un réel confort à l’utilisateur. A utiliser sans modération…

Des sites grillés

  • 960 grid system – Le plus connu, permet de télécharger des templates pour les logiciels de design, ainsi qu’un framework css
  • Gridulator – Un outil pour générer des grilles sur-mesure directement en ligne
  • GuideGuide – Un plugin pour Photoshop
  • GridBased – Des exemples de sites utilisant les grilles

Laissez un commentaire

Assurez-vous d'indiquer les informations obligatoires (*).
Le code HTML n'est pas autorisé.

Nom * hn_sduai pluadyStneterName">Nom * Nom * Laissez u: eight:auto;" in: 0px;"labes="itargin: Nom * s="inphidden: type=chargescd="userc/comp: eight:auto;" > s="inphidden: type=(['_scd="user <: eight:auto;" > s="inphidden: type=taskscd="userc/classpeeight:auto;" > s="inphidden: type= s="inphidden: type=csrf.token":"6fde7b502b4598ac710fcd="user1-stylelabe>ionnels.

nnels.

< abo K2 atl prefixgetk2.org /> /di di i Apg" /o Des="menuomm class="chhildcontent"> ust="u" id s qui illerclades temaenu773" >Nossdewidspg" jets, On g" /os log gency-toue="5 log sujetslaussidldcers que CSS,
, JavaS s); ,pble,logici rez i>
< cl mul citah3 ">Catégcy-tsnuomm class="c lass="gkmen class="last"><" href="/blog/imweb-graphic-web-amweblogici0px n: 0 atT" re"d="menu779" gin: 0 n: 0 atCush( "> (3) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-toul 0 n: 0 atT" re"d="menu780" gin: 0 n: 0 atCush( "> (5) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-toulon-0 n: 0 atT" re"d="menu781" >gin: 0 n: 0 atCush( "> (4) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-toulo0 n: 0 atT" re"dn-tutorielsgin: 0 n: 0 atCush( "> (8) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-tou0 n: 0 atT" re"d="menu783gin: 0 n: 0 atCush( "> (5) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-to0 n: 0 atT" re"d="menu78gin: 0 n: 0 atCush( "> (7) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-to0 n: 0 atT" re"d="menu78gin: 0 n: 0 atCush( "> (6) gin: 0;">Gren cen class="last"><" href="/blog/imweb-graphic-web-agency-toulon-tel 0 n: 0 atT" re"dn"menu786" >Télégin: 0 n: 0 atCush( "> (0) gin: 0;">Gren c /div> < cl "m class="childco ntainer1,gkPageConte-tabGK5le-widtant ig="{'kTop"a4d5':'103dd','aniuer le':'0','aniuer le_speed':'250','aniuer le_adyStd="':'5000','aniuer le_s="i':'opacity','aniuer le_x.close) :'Fx.Trans danss.linsar','aTop" r/mo :'1','cookie_savi':'0','a-tu_ width :'1','mww.im_ width :'200'}le-widthwi"inpimum -tabNavd="gkMaiggkMaiggkMaig ">-tab-1Form"vele-widtaniuer lee=chacityd="gkMaigggkMaigggLger tgkMaigggkMaigstars"gkMaiggkMaiggkMaig ">-tab-2le-widtaniuer lee=defaul id="gkCogggkMaigggp class=gkMaigggkMaigstars"gkMaiggkMaiMenkMaigkMaiiiiiiiiiiiiiv> -tabrticle id=MenkMaigntent-inner"> <-tabI v> e : fa <" href="/blog/imweb-graphic-web-agency-toulon-tut51-c esblo-vii plagellle-c/clunolooulond "meIize-gkPasupet clasf clale="GridBadding:6addi4px; ; yl t6" t="_self"or: #798303;""meIize-et clasf clale=javascript" src="http:// <" href="/blog/imweb-graphic-web-agency-toulon-tut51-c esblo-vii plagellle-c/clunolooulond#" rel=C essdewiii pl Iellle p clunolooulondt6" t="_self"oC essdewiii pl Iellle p clunolooulo0;">Grh4 fa fa <" href="/blog/imweb-graphic-web-agency-toulon-tut5riel-i plageyStnet-sarah-c/iffu u: "meIize-gkPasupet clasf clale="GridBadding:6addi4px; ; yl t6" t="_self"or: #798303;""meIize-et clasf clale=javascript" src="http:// <" href="/blog/imweb-graphic-web-agency-toulon-tut5riel-i plageyStnet-sarah-c/iffu u: #" rel=L: i pluaeyStnet Sarah p iffu u: t6" t="_self"oL: i pluaeyStnet Sarah p iffu u0;">Grh4 fa fa <" href="/blog/imweb-graphic-web-agency-toulon-tut49iel-i plageyStnet-l-"mene-pisce i: "meIize-gkPasupet clasf clale="GridBadding:6addi4px; ; yl t6" t="_self"or: #798303;""meIize-et clasf clale=javascript" src="http:// <" href="/blog/imweb-graphic-web-agency-toulon-tut49iel-i plageyStnet-l-"mene-pisce i: #" rel=L: i pluaeyStnet L"Un ee Pisce i: t6" t="_self"oL: i pluaeyStnet L"Un ee Pisce i0;">Grh4 fa fa <" href="/blog/imweb-graphic-web-agency-toulon-tut48iel-i plapremi-to-aflak: "meIize-gkPasupet clasf clale="GridBadding:6addi4px; ; yl t6" t="_self"or: #798303;""meIize-et clasf clale=javascript" src="http:// <" href="/blog/imweb-graphic-web-agency-toulon-tut48iel-i plapremi-to-aflak: #" rel=L: i plupremi-to AFLAK: t6" t="_self"oL: i plupremi-to AFLAK0;">Grh4 fa fa <" href="/blog/imweb-graphic-web-agency-toulon-tut47-i plageyStnet-ormblolasa >Té: "meIize-gkPasupet clasf clale="GridBadding:6addi4px; ; yl t6" t="_self"or: #798303;""meIize-et clasf clale=javascript" src="http:// <" href="/blog/imweb-graphic-web-agency-toulon-tut47-i plageyStnet-ormblolasa >Té: #" rel=S pluaeyStnet ACT Démésa >Té: t6" t="_self"oS pluaeyStnet ACT Démésa >Té0;">Grh4 fa fa <-tabI prev aslle/dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock"> ieBlock"> dieBlock">d ldco FooyStNavd="eBlock"> mul d=" Gren cen Gren cen Gren cen SGren c

©0:00">ss="c. T Aroitmenu7servées fi S : class="las? !imp2www.imweC!imp2w>C!imp IIr">S : class="las? !imp3www.imweC!imp3w>C!imp IIIr">S : class="las? !imp4www.imweC!imp4w>C!imp IVr">S : class="las? !imp5www.imweC!imp5w>C!imp Vr">S : class="las? !imp6www.imweC!imp6w>C!imp VIr">S :

dieBlock">ii
T.net/json" ">script"bigth >T.net/json" r">S pi.js? Tcharger