Conception Web utiliser la grille
Infos pratiques : une sélection d'articles utiles
Créer des sites Web de structure homogène et cohérente : tel est l'objectif de la conception "en grille". Le concepteur décide plus facilement de l'emplacement d'un contenu, le visiteur trouve plus rapidement ce qu'il cherche.
Une grille est très prosaïquement une série de lignes horizontales et verticales, qui partage la page de manière symétrique ou harmonieuse. En basant sa conception Web sur l'idée de grille, on donne ainsi de l'importance à certaines zones (ligne, colonne ou jonction des deux), importance que l'utilisateur mémorise inconsciemment, et qu'il peut ainsi plaquer naturellement sur les autres pages du site.

La grille trace des lignes au travers de la page. Celles-ci peuvent être visibles, ou subtilement suivies en s'intégrant à des éléments de conception visibles. Le concepteur peut, grâce à ces lignes imaginaires, créer une idée de continuité visuelle entre deux éléments dissociés.

Qu'elle soit visible ou non, la grille décide de l'harmonie d'une page. L'objectif du concepteur doit donc être de partir d'une grille disposant d'un agencement harmonieux. Les éléments appliqués à une composition doivent l'être selon certaines idées d'équilibre, de rythme, de proportion, d'unité, d'alignement ou encore d'espace positif/négatif.

Cette communication visuelle de l'harmonie peut reposer sur les nombreuses théories élaborées au fil du temps. L'une des plus persévérantes est celle du Nombre d'Or. Les formes répondant au Nombre d'Or sont considérées comme esthétiques depuis les Égyptiens, dont les pyramides répondent à ce rapport de proportions. Il offrent encore aujourd'hui un équilibre naturel entre symétrie et asymétrie.
Conception Web : utiliser la grille

Le tout reste cependant de trouver le bon nombre de lignes séparatrices pour une page. Trop de lignes surchargent la page ; pas assez de lignes donnent trop de liberté au regard.

Les grilles sur le Web
Le concepteur peut difficilement prévoir l'étendue finale de son design (contenus dynamiques, contrainte des différentes tailles de police de chaque navigateur...) : le mieux qu'il puisse faire est de prévoir autant que possible la hauteur d'un élément, et se concentrer avant tout sur sa largeur.

C'est pourquoi la plupart des sites Web actuels reposent sur l'idée de colonnes de contenus : une, deux, trois voire quatre colonnes occupent la majeure partie du site, séparées en blocs de contenus indépendants.

S'ajoute à cela les contraintes du survol : les internautes ne lisent pas une page, mais la parcourent, le plus rapidement possible, à la recherche de l'information voulue. Les zones les plus parcourues sont aujourd'hui connues : le regard de l'internaute occidental zigzague de haut en bas et de gauche à droite, s'arrêtant sur le logo, les images et les textes en gras, pour ensuite survoler le texte. Ces différents éléments s'inscrivent dans une grille facilement exploitable.

Le but du concepteur est donc de combiner habilement utilisabilité et esthétisme. Nous savons déjà que le système de grille autorise l'élaboration d'un certain parcours de lecture. Si l'on s'efforce de construire cette grille, véritable squelette de la page, selon des principes esthétiques, tel que le nombre d'or, alors le concepteur est à même, dès le lancement de son projet, de poser les bases d'une réalisation répondant aux deux critères sus-cités.

Il est ainsi possible de régler les colonnes d'un site selon le nombre d'or. Celui-ci présente un ratio simplifiable en 1.618. L'idée consiste alors à appliquer à ces colonnes des proportions égales ou proches de ce nombre.

Le nombre d'or, appliqué à quatre colonnes

 

Pour un design à deux colonnes, on pourra se servir du Phiculator pour calculer rapidement la largeur de la plus grande colonne par rapport à celle, connue, de la plus petite. Par exemple, un colonne principale de 450 pixels aura idéalement une voisine approchant 280 pixels (278 si l'on respecte exactement la proportion). Un logiciel plus direct de création de grille selon les règles du nombre d'or est Golden Section.

 

Voir la source Voir la source