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

Downloadhttp://bigtheme.net/joomla Joomla Templates