Grille de mise en page, « zoning » et gabarit avec Adobe InDesign

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet.

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.
Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.
Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !
La fenêtre Pages d’InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires