À vos grilles !

Une mise en page qui s'appuie sur une grille se distingue et apporte structure, équilibre et harmonie. En effet, le contenu de la page est organisé et hiérarchisé : un confort de lecture est ainsi installé pour l'utilisateur.

Seulement, à la différence de l'impression, le web n'a pas de hauteur ou de largeur prédéfinies et donc ne présente pas les mêmes contraintes et caractéristiques.

 

Pourquoi utiliser une grille ?

En organisant les blocs de texte, les images et autres éléments sur une grille, l'attention de l'utilisateur sera captivée par le contenu avec fluidité et les blancs créés seront gérés comme des espaces de respiration et non plus comme du vide.

Le contenu va s'enchaîner efficacement tout au long de la page en prenant en compte la proportion des différents éléments, ce qui va créer du rythme. Un rythme qui va guider l'utilisateur tout au long de son expérience.

En plus d'apporter des repères de lecture à l'utilisateur final, la grille aide les designers qui verront plus clair lors de la conception de la maquette mais aussi les intégrateurs qui vont gagner en rapidité.

Autre point positif, la grille utilisée va être utile lorsque l'on va adapter le site sur différents supports (desktop, tablette ou smartphone) car elle va permettre d'anticiper l'organisation des blocs grâce aux différents paliers que vont créer les points de rupture.

 

La composition d'une grille

schéma grille

On place nos éléments sur la grille en étalant notre conteneur sur la largeur d'une ou plusieurs colonnes. Chaque colonne est séparée par une gouttière.

Les marges latérales permettent d'aérer le texte et de faire en sorte que l'oeil ait un confort de lecture en ayant de l'espace car le contenu ne sera pas collé au bord de l'écran.

La ligne de base permet de gérer les espaces et l'alignement entre les blocs de texte et l'interlignage des textes. Google a une ligne de base de 8px mais la bonne pratique à retenir serait de 12px.

 

Quelle grille choisir ?

Il n'y a pas de règle à suivre, cela dépend du projet et du contenu.

On peut penser que, plus le contenu est dense, plus notre grille doit compter de colonnes pour multiplier les possibilités de placement. Une grille de douze colonnes est le plus souvent utilisée étant facilement divisible par 2,3,4 et 6.

Cependant ce choix est complètement libre, il existe les standards de 12, 16 ou 24 colonnes mais certains projets vont en nécessiter plus de 24. Et leur largeur sont personnalisables tout comme la largeur des gouttières et des marges.

 

Grilles fluides

Aujourd'hui, lorsque l'on parle de web on voit une multitude de supports et donc de résolutions. Il est donc évident qu'on ne peut plus penser grilles fixes. Ici, on aborde le thème du Responsive Webdesign où un site va s'adapter à n'importe quel type d'appareil, et ce, automatiquement et sans être visible par l'utilisateur. Et c'est la notion de point de rupture qui joue un rôle important et qui donne du sens à l'utilisation des grilles fluides pour les sites responsive.

Qu'est ce qu'un point de rupture ? Ce sont des paliers où l'affichage du site change en fonction de la largeur et de la hauteur de la fenêtre du navigateur.

Un site basé sur une grille va donc être facilement manageable et plus facilement développé selon les différents supports.

 

La grille, l'ennemi de la créativité ?

Il ne faut pas oublier que la grille est un des outils qui sert de cadre et de base pour nous guider dans la démarche graphique d'un projet. Mais ne doit en aucun cas être un frein à la créativité !

Quelque soit le type de projet (avec beaucoup de contenu ou non), l'idéal est de se baser sur une grille pour prendre un bon départ puis prendre ensuite certaines libertés pour donner libre cours à votre imagination.

 

Où trouver des grilles ?

  • 960.gs : des gabarits pour de nombreux logiciels tels que Balsamiq, Photoshop, Illustrator et bien d'autres à télécharger.

960.gs

  • http://gridulator.com : il suffit de renseigner la largeur du conteneur et le nombre de colonnes que l'on souhaite pour qu'il nous conseille des combinaisons possibles, jouant sur les largeurs de colonnes et de gouttières.

gridulator

  • On peut aussi créer sa propre grille via les logiciels de création, comme Photoshop ou Sketch.

Conclusion

Au delà du fait que la grille aide le designer et le développeur à travailler plus rapidement et qu'elle permet de poser des repères dans l'élaboration d'un site, la grille donne un aspect plus professionnel à une page. Elle permet d'analyser l'espace, de le contrôler et de le structurer.

L'idéal serait de prendre en main ce système de grille et d'ensuite en utiliser de moins rigides pour avoir un fini plus élégant qui ne laisse pas entrevoir la méthode et l'architecture qui ont été utilisées pour sa conception.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.