Première maquette graphique web : comment faire ?

9 décembre 2008,
par Romy Têtue

Mots-clefs associés à cet article :

Maquettistes affirmés, mais débutants sur le Web, voici les repères élémentaires à connaître pour créer votre première maquette graphique pour le Web : résolution d’écran, pixels, couleurs hexadécimales, page web, scroll, découpe, tout ça. Pour partir sur de bonnes bases.

  1. Exprimez tout en pixel : l’unité de mesure, sur le Web, est le pixel, point élémentaire de l’écran, et non pas le pica, le point ou le centimètre pour lesquels il n’existe pas de conversion et qu’il faut donc oublier.
  2. Travaillez en bitmap à l’échelle 1:1. Jetez-moi les logiciels vectoriels (Flash, Illustrator) aux oubliettes ! Aucun outil n’est actuellement correctement adapté au graphisme web qu’il conviendrait donc de faire directement en langage CSS. À défaut, n’importe quel logiciel bitmap où travailler en pixel et couleurs web fera l’affaire. Beaucoup utilisent Photoshop, mais il existe d’autres logiciels, comme GIMP qui est libre et gratuit.
  3. Un écran d’ordinateur a une résolution d’affichage de 72 dpi environ. Il est donc parfaitement inutile de travailler dans une résolution supérieure. Cela ne s’affichera pas mieux !
  4. Choisissez vos couleurs, en RVB, dans la palette des 216 couleurs garanties pour le Web, exprimées en hexadécimal, sous la forme d’un nombre à 6 chiffres. Mais sachez qu’en réalité les écrans actuels savent afficher des millions de couleurs. Ne vous sentez pas limité et osez les aplats et fonds de couleur, tout en maintenant un contraste suffisant avec le texte pour préserver la lisibilité.
  5. Commencez par fixer la largeur de la page. On la détermine en fonction de la résolution d’écran majoritaire des internautes concernés par le projet, par exemple : 1024 x 768 pixels.
    La composition doit rentrer dans l’écran, en laissant la place à la barre de défilement latérale (d’épaisseur différente selon les navigateurs) et sans afficher de barre de défilement horizontale. Sa largeur doit donc être inférieure à celle de la résolution d’écran majoritaire. Dans notre exemple, vous choisirez donc de composer une largeur de 960 px ou moins.
    Centrez votre composition dans la fenêtre.
    Sachez qu’il est possible d’afficher en largeur fluide : c’est-à-dire que la largeur des blocs variera en fonction de largeur de la fenêtre. Mais pour simplifier, composez en largeur fixe, constante, exprimée en pixels.
  6. Composez dans un format portrait (vertical) car une page web peut être de (très) grande hauteur. Ne confondez pas page et écran : ce qui s’affiche dans la fenêtre rectangulaire horizontale de l’écran n’est qu’un fragment de page web. Pour vous repérer sur votre maquette, signalez la hauteur de l’écran par une ligne de flottaison ou des hirondelles.
    Les éléments essentiels doivent être visibles sans scroller, c’est-à-dire qu’ils doivent être situés au-dessus de la ligne de flottaison.
  7. Pour les textes, qui constituent le contenu le plus important d’une page web, choisissez une famille de polices de caractères (« font stack ») et non pas UNE police, car c’est l’internaute qui fournira la police au moment de l’affichage de la page. Indiquez donc s’il lui faudra la choisir parmi les polices à empattement ou sans empattement (plus précisément : parmi serif, sans-serif, monospace, cursive ou fantasy). Si vous préconisez une police particulière, indiquez des polices de remplacement approchantes, dans la même famille. Ne vous laissez pas séduire par le rendu des polices dans votre logiciel graphique car elles n’auront pas le même aspect parfait dans les navigateurs web.
  8. La taille du texte est variable. La hauteur des blocs aussi. Concevez donc la maquette de façon à ce qu’elle supporte l’agrandissement, possiblement conséquent, des textes : en évitant les colonnes à hauteur fixe ou trop étroites en largeur. Les textes doivent pouvoir s’écouler dans les blocs, lesquels seront étirables en hauteur. Faites des essais d’agrandissement-rétrécissement des textes... Je vous disais plus haut que les logiciels graphiques actuels ne sont pas adaptés à ce genre de manipulation !
    Attachez-vous aux proportions, mais pas à un rendu figé et maîtrisé. Cependant, pour donner un ordre de grandeur, retenez que 10 px est un corps de texte minimal en dessous duquel il ne faut pas descendre pour préserver la bonne lisibilité. Adoptez 13 px pour le texte de labeur. Osez 16 px. En fait, plus c’est gros, mieux c’est.
  9. Pensez fragmenté, en bloc : tout doit être facilement découpable en rectangles. Calez-vous sur des lignes de guidage horizontales et verticales. Ne débordez pas. Ne tolérez aucun flou, aucune approximation : un filet fait 1 px d’épaisseur, pas « à peu prés ». Ayez toujours à l’esprit que vos éléments graphiques seront prélevés en pièces détachées, découpés au pixel prés, pour être ensuite ré-assemblés à l’écran.
  10. Pour finir, n’oubliez pas les différents états d’interaction. La fenêtre du navigateur web est le lieu d’une interaction avec l’internaute : un lien change d’apparence au survol, un formulaire répond par un message d’erreur, etc. Présentez ces variations sur des calques séparés.
    On ne peut pas « cliquer » sur une maquette graphique. Pour compenser, mettez-vous le plus souvent possible en situation de navigation active : surfez et observez !

Vous pouvez maintenant commencer à composer votre première maquette web, en partant du bon pied, sur des bases correctes : pixel, bitmap, RVB, 72 dpi, etc.

Un conseil : faites moultes captures d’écrans des sites qui vous inspirent et découpez-les dans un logiciel graphique. Débitez-les en morceaux ré-exploitables. C’est un excellent exercice pour vous mettre les proportions, les résolutions et les formats dans l’œil. Mais n’allez jamais chercher vos modèles dans les annuaires de « beaux » sites réalisés en Flash !
Second conseil : apprenez bientôt à composer une page web en HTML et CSS, via un éditeur WYSIWYG si le code vous effraie. Vous n’y couperez pas puisque c’est le B-A-ba du Web. Comprendre le Web ne fera qu’améliorer vos prochaines compositions.

Que livrer ? On attendra certainement de vous un livrable sous forme de fichier(s) graphiques (PSD ou XCF) à l’échelle 1:1, contenant plusieurs calques distincts, avec indication annexe des familles de police choisies et palette de couleurs. Certains préfèrent s’épargner cette étape fastidieuse, en réalisant les maquettes graphiques directement en HTML/CSS.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 10 décembre 2008 à 11:57, par b_b En réponse à : Ma première maquette web : comment faire ?

    Salut Romy,

    Pour le point 2 et sans vouloir faire de pub je conseille grandement aux gens de jeter un oeil à Fireworks. Ce logiciel est vraiment adapté à la création de maquettes pour le web. En plus il gère les images bitmap et vectorielles.

    ++

  • Le 10 décembre 2008 à 12:47, par izo En réponse à : Ma première maquette web : comment faire ?

    Oué Fireworks est vraiment excellent et surtout Illustrator à un mode web depuis la version CS qui va bien... ;)

    Les 2 marchant de concert ...

    http://www.quicksnapper.com/izo/ima...

  • Le 10 décembre 2008 à 13:41, par Romy Têtue En réponse à : Ma première maquette web : comment faire ?

    Ahem ! Je pense qu’Illustrator est vraiment l’outil à ne pas recommander aux graphistes qui débutent sur le Web, si on ne veut pas se retrouver avec une maquette inexploitable de 5 000 pixels de large en 300 dpi (si si, j’vous jure), comme ça m’est encore arrivé avant-hier :-P

  • Le 10 décembre 2008 à 14:09, par izo En réponse à : Ma première maquette web : comment faire ?

    JE pense vraiment que c’est plus une histoire de competence que de logiciel. J’utilise pas photoshop... Inkscape ou Ai ;)

  • Le 10 décembre 2008 à 14:15, par Nicolas En réponse à : Ma première maquette web : comment faire ?

    Le gros défaut d’Illustrator pour le web n’est pas tant son problème de résolution que son approximation du pixel.
    En tant que logiciel vectoriel il peut travailler dans n’importe quel mesure (pixels, mm...) et en dehors de toute résolution : il n’est pas plus à 300 dpi qu’à 72 ou 2400 (ce sont les « effets de pixellation » qui ont une résolution et encore, en sortie uniquement).
    De ce point de vue un fichier Illustrator à 300 dpi n’existe pas et passer de 5000 pixels à 960 pourrait théoriquement être possible à partir du moment où l’on coche les bonnes cases ("Mise à l’échelle des contours et des effets" dans les préférences par exemple).
    Le problème d’Illustrator pour le web se situe plutôt dans ses approximations de rendus : 1 filet d’un pixel peut se retrouver avec une sorte d’"alisasing" désastreux.
    Fireworks est de ce point de vue « parfait » (pour peu que l’on sélectionne bien la ligne « nette »), à noter que la version CS4 propose les alignements automatiques (indispensable lorsque l’on a goûté à OmniGraffle), cela en fait une très bonne solution pour le vectoriel sur le web (malgré quelques tendances à planter et à détruire les fichiers sur Mac... Merci TimeMachine).
    Par contre izo je te trouve un peu optimiste sur la compatibilité entre les deux, il y a du mieux mais ce n’est pas vraiment encore parfaitement au point.

  • Le 10 décembre 2008 à 14:23, par Romy Têtue En réponse à : Ma première maquette web : comment faire ?

    C’est bien ce que je dis : qui débute n’est pas encore compétent ;-)
    Faisons donc des préconisations qui rendent la chose accessible tout en limitant les erreurs : Photoshop n’est certes pas terrible, mais plus immédiatement accessible (que les langages HTML/CSS) et nettement moins risqué (qu’Illustrator ou Flash). Cet article s’adresse à ceusses qui débutent !

  • Le 10 décembre 2008 à 14:29, par izo En réponse à : Ma première maquette web : comment faire ?

    oué je suis optimiste aujourd’hui ;)

  • Le 10 décembre 2008 à 15:26, par fredmac En réponse à : Ma première maquette web : comment faire ?

    Bonjour Romy,

    Je plussoi avec ce qui à été dis concernant illustrator ; c’est un logiciel complexe. La majeur partie des graphistes (et je n’ai pas dis webdesigner, encore que parfois) ne savent pas s’en servir pour le web, alors même qu’il s’agit de la finalité de leur création. Il y a toujours des modifications à faire.

    Les coordonnées et les tailles d’objet ne sont pas fait pour les chiens. Si vous avez des chiffres à virgules passez votre chemin, ou faite un effort.

    Les gens on du mal à comprendre que l’on travail au pixel près. Et on vient après vous prendre la têtes pour quelques différences de pixel par rapport à la création de référence.

    Par ailleurs, j’apprécie particulièrement, dans illustrator, de pouvoir directement convertir un objet en tranche. C’est un gain de temps considérable. Surtout lorsque cet objet contient des ombres portées et autres styles.

    Enfin, il me semble que partir sur du vectoriel rend les modifications (il y en a toujours) plus malléables. A moins que l’on utilise les outils vectoriel de photoshop ? auquel cas mieux vaut passer par l’originale.

    Mon conseil : restez ou passez sur illustrator et n’hésitez pas (ou plutôt astreignez-vous) à utiliser la grille et les repères commentés. C’est une bonne base.

    Après c’est sur qu’il y a des buses partout.

  • Le 10 décembre 2008 à 15:49, par Atchoum En réponse à : Ma première maquette web : comment faire ?

    Bravo romy, je vais enfin pouvoir débuter moi aussi : merci ;-)

    Y a qu’un truc qui me chagrine : « Centrez votre composition dans la largeur de la fenêtre. »
    Souvent c’est mieux, mais ça ne me semble pas un impératif si ?

  • Le 10 décembre 2008 à 21:03, par Frank Taillandier En réponse à : Ma première maquette web : comment faire ?

    Je comprends bien qu’il s’agit d’un article pour les débutants mais justement je pense que l’éducation ça se joue dès le début, il est difficile de perdre les mauvaises habitudes après.

    Déjà la résolution d’écran n’est pas forcément égale à la taille de la fenêtre sur un ordinateur de bureau. Designer pour le web ne veut pas dire forcément concevoir pour des écrans d’ordinateurs. Dominique du W3C mobile nous disait à Paris Web 2007 : Il y a plus de téléphones mobiles dans le monde que d’ordinateurs. L’avenir du net passera donc forcément par le mobile.

    Là aussi le client est à éduquer et je déplore qu’aujourd’hui ce soient des maquettes photoshop de 1024px qui soient la plupart du temps validées pour des projets web.

    L’approche PAO de concevoir des maquettes pour des formats statiques ne durera pas éternellement vu la multiplication des supports et des formats (écrans, télés, netbooks, mobiles, reader, etc.)

    Pourquoi ne pas se mettre dès le début à travailler avec des grilles élastiques pour avoir des designs qui s’adaptent plus facilement à plus de situations ?

    A propos des unités, si on prend l’exemple du design de ce site, pourquoi fixer la largeur du design en pixels et pas en ems ? (Parce que c’est plus dur ?)

    Sinon ça existe les webdesigners qui livrent des maquettes en XHTML/CSS sans passer par des outils destinés à la PAO à la base ?

    Force est quand même de reconnaître que tous tes conseils sont en rapport direct avec ton expérience professionnelle et donc empreints de pragmatisme que je ne mettrais pas en doute.

  • Le 10 décembre 2008 à 21:56, par Romy Têtue En réponse à : Ma première maquette web : comment faire ?

    Frank : le mieux est l’ennemi du bien.

  • Le 11 décembre 2008 à 07:22, par Valéry En réponse à : Ma première maquette web : comment faire ?

    « Sinon ça existe les webdesigners qui livrent des maquettes en XHTML/CSS sans passer par des outils destinés à la PAO à la base ? »

    Pour le design de sites dont la vocation est la communication d’une image de marque, sans doute pas, car il y a un travail significatif à faire sur les photos, les textures, dégradés, etc.

    Toutefois lorsqu’il s’agit d’un site de type « application web », cela se pratique en effet : Why we skip Photoshop et celà reste un travail de webdesign.

    Le problème du webdesign pour les graphistes de formation print vient comme le souligne Romy de leur méconnaissance des techniques.

    En print c’est la même chose : si on ne sait pas ce que c’est qu’un pantone, une forme de découpe, un vernis sélectif, un gauffrage, on est limité dans ses créations même si on maitrise parfaitement les effets photoshop.

    Connaitre les méthodes de mise en forme CSS, les spécificités de l’ergonomie web, les contraintes d’accessibilité, les interactions complexes qu’autorise ajax, le design sera soit inadapté soit bridé.

    Le superbe livre d’Andy Clarke « Transcender CSS » montre la plus value qu’une connaissance des techniques apporte potentiellement à un webdesigner (à ne pas forcément mettre entre les mains d’un débutant il est vrai).

    C’est ainsi que j’entend par « webdesigner » d’ailleurs ; quelqu’un qui maitrise à la fois le design, et donc le graphisme et l’aspect technique. Là où on a souvent un directeur artistique qui n’a jamais écrit une ligne de css et un intégrateur expert en W3C mais qui n’est pas forcément à l’aise pour choisir une couleur.

  • Le 11 décembre 2008 à 11:34, par STPo En réponse à : Ma première maquette web : comment faire ?

    Concernant la « ligne de flottaison », il faudrait répéter et surligner en gras à l’intention des graphistes débutants qu’il s’agit d’une valeur toute relative (puisque dépendante des barres d’outils et autres du navigateur) et certainement pas gravée dans le marbre en fonction de la résolution d’écran. Croyez-moi, c’est une information qui a du mal à rentrer, même chez des DA chevronnés !

    Concernant le design fluide VS design fixe et tout ce qui se rapporte aux supports mobiles, j’émets quelques réserves, peut-être à tort.

    Le design fluide OK ça s’adapte à toutes les résolutions, mais ça peut aussi rendre un contenu illisible (ou du moins difficile à lire) : si on tient compte du fait que l’oeil humain lit avec un confort maximum un texte en colonnes de 66 caractères, sur un écran démesuré la colonne de contenu peut se transformer rapidement en terrain de foot avec des colonnes de centaines de caractères... à mon avis une très mauvaise idée.

    Pour ce qui est des supports mobiles, les CSS handhelds existent, autant s’en servir et laisser le screen comme il est pour les écrans de bureau. Non ?
    Après, cela demandera aux graphistes de prévoir 2 créas différentes, adaptées à chacun des medias. Mais idéalement, le graphiste ne devrait-il pas prévoir également l’apparence de la feuille de style de print ? De la feuille de style « zoomed » pour l’accessibilité ? Et d’autres encore ?

  • Le 11 décembre 2008 à 11:41, par Romy Têtue En réponse à : Ma première maquette web : comment faire ?

    Ah, très bonne remarque : ça me fait toujours halluciner qu’une maquette soit réalisée pour l’écran, mais pas pour l’impression. Mais il faut quand même que ce soit beau, hein et l’intégrateur doit sortir la feuille de style d’impression de son chapeau !

  • Le 15 décembre 2008 à 16:10, par Jean-Pierre En réponse à : Ma première maquette web : comment faire ?

    Justement, je viens du print et je dois dire que le design « fluide » me questionne plus qu’il ne me rassure... Voir une mise en page se déformer jusqu’à l’illisibilité me gène beaucoup. Alors si ça vous dit de pondre un petit billet sur les avantages du « fluide », je prends... :-) Les inconvénients, je les constate lors des visites de certains sites...

  • Le 15 décembre 2008 à 16:22, par Romy Têtue En réponse à : Ma première maquette web : comment faire ?

    Ne pas oublier qu’un site se consulte sur plusieurs types d’écran (TV, ordi, téléphone), sans parler des différents navigateurs, OS, etc. tandis qu’à l’opposé une créa print est destinée à un support imposé, précis et totalement contrôlé.

    • Produire un site en largeur fluide, cela doit se faire avec précision et maîtrise, et seulement si c’est pertinent pour le projet.
    • Par contre, qu’un site se déforme en hauteur, que les textes et leur blocs s’allongent, c’est inévitable. Il faut donc le prévoir, tout simplement.
  • Le 16 décembre 2008 à 23:30, par jean-baptiste En réponse à : Ma première maquette web : comment faire ?

    Bonjour,
    Je me permettrai juste de rapprocher votre conseil d’utiliser un écran à une résolution de 72 dpi avec cet article qui m’a permis de mieux comprendre ce qu’était ces fameux dpi et à ne plus les prendre en compte pour l’écran ;-)

  • Le 5 février 2009 à 11:46, par JLuc En réponse à : Première maquette web : comment faire ?

    C’est amusant ce que tu écris : « hexadécimal (nombre à 6 chiffres) »... on dirait que c’est ta définition ? Mais ce n’est pas du tout ça !

    De même qu’il il a le systéme décimal (base 10, écrit avec les chiffres de 0 à 9) ou le système binaire ( base 2, écrit avec les chiffres de 0 à 1) il y a l’hexadécimal : Hexadéci c’est pour 16.... c’est l’écriture en base 16, avec chiffres de 0 à 9 + lettres de A à F.

    En général, pour les couleurs du web, il y en a 6, effectivement, avec un dièse devant : #1AE253 c’est surement ce que tu as voulu dire ... mais il peut y en avoir 3 seulement en version simplifiée : #1A6 ...

  • Le 5 février 2009 à 15:23, par Romy Têtue En réponse à : Première maquette web : comment faire ?

    C’est marrant la manie que vous avez tous ici à compliquer la vie des débutants avec des explications hyper chiadées ! T’as raison mais c’est pas malin de causer en base 16 à ceusses qui essayent seulement de faire leur première maquette web... Sérieusement, qui sait compter en base 16 ici ? Et à quoi ça nous avancerait ???

  • Le 10 juin 2009 à 23:45, par Analas En réponse à : Première maquette web : comment faire ?

    Merci pour cet article de bon conseil pour un débutant comme moi. Je vais essayer de mettre cela en pratique. C’est pas encore gagné.

  • Le 1er novembre 2013 à 14:18, par pimientoRojo En réponse à : Première maquette graphique web : comment faire ?

    @ Romy Têtue :
    C’est marrant cette manie que tu as ici à donner des définitions plutôt approximatives, tu ne penses pas au contraire de ta volonté, embrouiller les débutants avec ça ?
    Bien sur que je sais compter en héxadécimal, et il vaut mieux pour avoir une idée de la couleur que tu veux coder (les deux premiers chiffres pour le rouge, 00 pas de rouge et ff rouge à fond ; puis vert, puis bleu).
    Pour ce qui est des design fluide n’oubliez pas qu’on peut définir une dimension maximum (donc pas de crainte d’avoir un terrain de foot)

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom