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.
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.
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 !
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.
Et bien, je n’avais jamais pensé à cette utilisation de indesign.
Moi qui commence juste de m’y mettre pour de la mise en page de document, je vais pousser de ce côté la =)
Indesign pourrait être un précieux outil de webdesign, c’est ce dont je parlais en intro de mon atelier paris web. Hélas il manque trop de chose pour que ce soit complet pour du web, et c’est bien dommage car ce serait un très bon outil. Je rève d’un indesign web 🙂
(quand on y pense : gabarits, feuilles de style, grille : tout ça est bien plus adapté que photoshop !!)
Ha oui, d’autant plus qu’on peut alors adopter une démarche assez juste sans aucune connaissance en intégration, puisqu’elle à l’origine fondée sur un système de cadres.
Souplesse et fiabilité dans une chaîne de production… C’est presque une bonne pratique de design web ? A faire circuler !
Ce serait vraiment cool un petit plugin à InDesign qui permette de générer une grille automatiquement, et avec des tracés réutilisables (et pas forcément des repères de pages), une sorte de mode « web »… J’en rêve déjà !
Julien, je plussoie ! Une version Web serait fantastique pour les raisons que tu cites. Le côté pratique avec InDesign, c’est de pouvoir gérer des gabarits, avec la possibilité de faire cohabiter plusieurs maquettes dans un même document.
Ça me paraît idéal quand il faut présenter une série de wireframes, ce qui devient vite l’enfer avec PS ou AI (enregistrer sous, gna gna gna…). Du coup, hop un beau PDF bien présenté et le client est ravi !
Merci en tout cas pour m’avoir donné l’envie de changer d’avis sur ID 😀
Je ne vais pas répéter ce qui a déjà été dit, je tiens juste à manifester que je bats des mains en criant oui oui devant mon ordi présentement.
L’idéal serait d’avoir un script capable de convertir ce qu’on a donner comme attributs dans une feuille de style CSS.
InDesign est trop parfait pour un prototype et pas assez bitmap à mon goût 🙂
Etant exclusivement un printeux, je ne peut que plussoyer le fait que mes amis webeux puissent utilisé Indesign !
Je pense qu’avec les différents exports proposés par Indesign (XML, XFL pour Flash, SWF, HTML + CSS externe, PDF) vous puissiez arriver à faire quelque chose de vraiment bien.
Papa sentu — Et je n’ai fait qu’effleurer le sujet. Je pense qu’il y a encore beaucoup à découvrir en utilisant InDesesign dans une optique Webdesign.
Julien — Un InDesign Web serait peut-être utile. En tout cas, perso, je n’utilise que très très rarement Photoshop pour faire des maquettes. Je préfère travailler dans Illustrator que je trouve bien plus souple, même si je galère un peu dans Photoshop ensuite parce que l’export .psd ne conserve pas toujours les calques comme je le voudrais (ou alors, je dois faire des manipulations douteuses).
briegel — Je crois que ça existe déjà dans InDesign, avec les grilles et les repères de grilles. Mais en tout état de cause, on peut toujours important une grille .png en arrière-plan.
Marie — N’hésite pas à partager tes retours d’expérience sur InDesign 😉
Mitternacht — Merci beaucoup 😉
Jean-Michel — Je suis plutôt partisan du travail artisanal niveau intégration. A la limite je vois bien le travail d’intégration graphique dans InDesign qui rassemblerait le logo fait sous Illustrator, le background réalisé avec Photoshop, etc. histoire de faire une maquette hors HTML si on n’est pas totalement à l’aise avec l’intégration directe des éléments dans le navigateur.
ben — J’ai la solution : tu exportes tes « wireframes » InDesign pour les ouvrir dans Photoshop et là tu leur applique une série de filtres pour les rendre un peu plus cradouille, ça peut être sympa ^__^
En fait il n’y a aucun outil complet destiné au design web ? Genre un truc qui comporterait un outil de gestion de nuances, un outil de dessin-modification des grilles dynamiques (avec des accrochages hiérarchisés pour les bords d’objets O_O), multi export et import, et même un export de reset CSS.
C’est une bonne idée d’utiliser InDesign pour ça.
Je le faisais généralement sur Illustrator moi
Merci pour le tuto!
Je me mets juste au InDesign…je fais mes premiers pas et je dois dire que ce blog est un souhait devenu réalité!!
ben oui, carrément…Photoshop est UNE MERDE pour faire de la maquette et surtout de la maquette internet….
il faudrait un soft dédié à cette tache qui combinerai du indesign, et du toshop…
On pourrait créer des bibliothèque d’objet, des styles , des gabarits, des test de over automatiques etc. il parait qu’une boite vanadienne est en train de mettre ce fameux soft au point. En tout cas adobe est loin derrière sur ce coup là.
en attendant il y’ a quelque temps que je monte mes gabarits et que je pousse mes maquettes avec indesign. Pour avoir le pixel il faut se calibrer en point. 1 point de largeur exporté égale 1 pixel. Et quand j’ai plein de pages type à monter sous photoshop pour du web j’enrage carrément, je cherche un moyen de les monter sous indesign. j’ai fait le test de l’export pdf puis pdf illustrator pui export illustrator en psd mais ça marche pas bien…
Attendons ce fameux soft qui nous sauvera tous
bye
Heu, comme Bink, pour le webdesign, c’est Illustrator qu’il faut utiliser. Indesign est trop contraignant avec ses grilles (Illustrator a également une grille très flexible si besoin, mais avec les guides ça doit suffire et avec CS5.5 un alignement pixel), on peut également bosser en aperçu pixel sous Illustrator. On peut créer différents plans de travail pour plusieurs pages donc, ou pour se créer un plan pour les exports d’éléments avec les tranches. C’est vrai qu’il n’y a pas de gestion de gabarits mais il y a les clips qui peuvent compenser.
Bref, Illustrator est THE tool pour le webdesign. Très franchement ceux qui bossent encore avec Photoshop (sauf pour créer des éléments avec de la photo évidemment) je sais pas comment ils font et le temps qu’ils doivent perdre… :/ D’ailleurs Adobe pousse de plus en plus Illustrator dans l’utilisation du webdesign. Au départ, les tranches Illustrator étaient un peu galère, mais maintenant ça roule tout seul.
Bon courage à tous.
Greg
Ça fait bien 8 ans que je mets en page mes sites dans inDesign, c’est vraiment le plus pratique.
Il suffit d’utiliser un gabarit « 960 grid » par exemple et ensuite le reste c’est de la mise en page classique.
L’avantage est que lorsqu’on réalise une plaquette pour un client, puis de la papeterie et enfin un site, tout faire sous le même logiciel est logique, de simples copier-coller, on arrange un peu et ça roule tout seul (je simplifie à l’extrême).
On peut facilement faire les modifs demandées puis export des pages et éléments en PDF et/ou jpeg pour le développeur.
Enfin, il ne faut pas oublier les utilisations véritables de chacun des logiciels de la suite Adobe : Photoshop pour la retouche et le montage photos, Illustrator pour le dessin vectoriel (logos, plans, illus) et inDesign pour mettre en page tout ça.