#WDFR — Imprimez votre grille pour dessiner vos croquis

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté.

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que `1,5` est le nombre d’Or typographique, j’ai gardé le ratio `1,6` car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !