La grille graphique
La création d’une grille de page est une phase importante dans le processus de conception préliminaire, mais aussi la première partie de la définition de modèles utilisables. Une fois les décisions prises quant aux polices, aux colonnes, aux images, etc., les différents éléments peuvent être regroupés sous forme de grille. Les éléments de page peuvent tous être équilibrés les uns par rapport aux autres, et les détails affinés jusqu’à être parfaits. Sources : Guide pratique de création numérique, Jason simmons, Dunod, 2008
L’organisation en colonnes des pages web tire son origine de la nécessité d’une meilleure lisibilité. Se faisant les grilles en colonnes s’imposent d’elles-mêmes pour rendre la lecture plus confortable. Et introduisent du coup une morphologie de la mise en page proche de ce qu’on a connu en Print. On n’est pas en train de comparer du Old School vs WebDesign mais de constater que l’écran et le papier sont des espaces de lecture semblables même si les formats sont différents. Et que la typo reste l’art d’organiser la lecture avant tout. Caractère mobile vs caractère Ultra mobile, n’ont pas changé grand chose à l’affaire. Nos yeux perçoivent et ressentent les mêmes types de fatigue sur les deux médias. Peut-être même que sur les écrans nos yeux se fatiguent plus facilement… mais cela reste à prouver. Source :Design et typo le blog
Combien de colonnes?
Lorsque vous commencez un magazine, un bulletin d’information ou un site web, l’un des premiers problèmes auquels vous êtes confronté est le suivant : «Combien de colonnes de texte dois-je utiliser?» Il existe de nombreuses variables sans réponse simple, mais certaines instructions facilitent la prise de décision.
Limites physiques
Le premier facteur à prendre en compte est la zone de travail : le format de la page commande votre mise en page. Une page haute et étroite ne peut pas accueillir plus d’une colonne ou deux, tandis que les pages larges autorisent naturellement un plus grand nombre de colonnes. Il faut aussi considérer la somme et le type d’information à intégrer, ainsi que dans le cas d’une page web, les standards d’affichage du moment. Nous pouvons dire qu’aujourd’hui, le standard d’affichage est de 1024 px pour la lageur d’une page web. Pour votre information, il n’y a pas si longtemps le standard était de 800 px.
Des largeurs de colonnes différentes transmettent un sentiment distinct sur le texte, permettant au lecteur de progresser dans les colonnes à diverses vitesses. Les colonnes larges (entre 50 et 65 caractères par ligne) offrent un aspect semblable à celui d’un roman et suggèrent au lecteur de prendre son temps. Les colonnes de largeurs moyenne (45 caractères par ligne environ) conviennent aux articles vedette. Le texte est lu à un rythme raisonnable et la mise en page offre une certaine flexibilité, sans être sur-encombrée. Les colonnes plus étroites (25 caractères et moins par ligne) donnent une mise en page plus dense. Le lecteur parcourt le texte plus rapidement et il est aisé d’incorporer de brefs fragments d’information. Les listes, telles que celles des annonces classées où des listes de liens html.
Les marges (gouttières)
Lors du choix de la disposition des colonnes, ne négligez pas les marges. Les marges larges imposent plus le respect et l’autorité; les marges plus étroites suggèrent l’urgence et l’ajoutent une certaine disponibilité. Elles permettent de stopper l’oeil dans sa course horizontale. Si elles sont étroites il vaudra mieux tracer un filet vertical entre chaque colonne.
Les colonnes mixtes
Les colonnes mixtes désignent des colonnes différentes (plus étroites ou plus larges) de celles utilisées pour le corps de texte principal. Elles aident à rompre une mise en page répétitive. Utilisez ces colonnes pour des légendes ou pour une zone d’image, afin d’ajouter une impression d’espace et de mouvement à une conception monolithique (gros bloc).
Exemples de grille
Grilles 6-7-8
Grilles 9-10-12
Où trouver des grilles ?
De nombreux sites proposent de télécharger des modèles de grilles. Cependant, certains sites ne proposent que des Frameworks CSS qui ne sont pas toujours utilisables directement dans un logiciel de design.
« 960 gs » est très connu, en plus de proposer un framework CSS, il est possible de télécharger des templates pour nombres de logiciels (Photoshop, Fireworks, GIMP…). Le template se présente sous la forme d’un calque : il suffit de le placer en première position dans votre palette et le tour est joué. 960 gris system Source : Alsacreations.com
960 grid system
« Modular Grid Pattern », permet de créer à la volée une grille directement sur le site. Vous pourrez ensuite la télécharger sous forme de motif (.pat ou .png) pour l’intégrer dans votre composition. Modular Grid Pattern
Source : Alsacreations.com
Modular Grid Patter
Agencement des grilles (blocs)
Après avoir choisi sa grille, il faut maintenant la « remplir » en disposant les différents blocs qui vont accueillir le contenu (images, textes, vidéos, diaporama…).
Énormément de combinaisons existent, voici quelques unes « standards » :
Agencement en blocs
Par : Stan Deville/Designer Graphique