Le processus de conception web, étape par étape
La conception web, ce n'est pas le moment où quelqu'un choisit des couleurs. C'est une suite de décisions qui se resserre depuis « à quoi sert ce site » jusqu'à « ce bouton, cette taille, ce libellé », et chaque étape est moins chère à changer que la suivante.
Ce guide couvre les phases dans l'ordre, ce que chacune produit, et les deux points où les projets de design s'enlisent de façon récurrente.
Cadrage : ce que le design doit accomplir#
Avant tout élément visuel, la personne qui conçoit a besoin de la même chose que celle qui développe : l'objectif principal, le public, la structure des pages et les contraintes. Si elle démarre sans, vous obtenez un design qui fait bonne figure dans un portfolio et qui échoue à l'arrivée du vrai contenu.
Cette phase produit un accord, pas des livrables. Un résumé d'une page accepté par les deux parties suffit.
- L'action unique que le site doit provoquer, et comment elle sera mesurée.
- Deux ou trois groupes de visiteurs et la question avec laquelle chacun arrive.
- Les contraintes de marque qui existent vraiment : logo, couleurs, typographies, ton.
- Les contraintes techniques : le CMS, la plateforme, les appareils qui comptent réellement.
- Des exemples de sites que le client apprécie — et, plus utile, pourquoi.
Structure et wireframes#
Les wireframes règlent l'agencement et la hiérarchie sans la dispute sur la couleur. Ils répondent à ce qui figure sur chaque gabarit, dans quel ordre, et ce que le visiteur est censé faire — pendant que les changements coûtent encore des minutes.
Faites des wireframes des gabarits, pas de chaque page. La plupart des sites ont quatre à huit gabarits distincts et des dizaines de pages construites avec.
| Gabarit | Question à laquelle il répond | Action principale |
|---|---|---|
| Accueil | Qu'est-ce que c'est et est-ce pour moi ? | Aller dans la bonne section |
| Pivot de section | Qu'y a-t-il ici ? | Choisir un élément |
| Article ou fiche | La réponse elle-même | Lire, puis passer à l'étape suivante |
| Produit | Est-ce le bon et combien coûte-t-il ? | Ajouter au panier |
| Contact ou formulaire | Comment je commence ? | Envoyer |
| Résultats de recherche | Avez-vous trouvé ? | Ouvrir un résultat ou affiner |
Faites vos wireframes avec des longueurs de contenu réalistes. Une mise en page conçue autour d'un titre de six mots casse dès qu'un vrai titre en fait quatorze.
Design visuel et système de design#
Le design visuel applique la marque aux wireframes : échelle typographique, couleur, espacements, états et composants. Au-delà d'un simple site vitrine, il vaut la peine de produire un petit système — un ensemble de composants avec des états définis — plutôt qu'une collection d'images de pages sans lien.
La raison n'est pas l'ordre. C'est qu'un système dit à l'équipe de développement ce qui se passe dans les cas que les maquettes ne montrent pas, et ces cas représentent l'essentiel du site.
- Une échelle typographique et une échelle d'espacement, pour qu'aucun nombre ne soit un cas isolé.
- Des jetons de couleur dont le contraste est vérifié sur les fonds réels.
- Les états de composant : normal, survol, focus, actif, désactivé, chargement, erreur, vide.
- Le comportement adaptatif de chaque composant, pas seulement une version mobile de l'accueil.
- Ce qui se passe avec trop de contenu, et avec aucun.
Où les projets de design s'enlisent#
Deux échecs expliquent l'essentiel des retards, et tous deux relèvent du processus plutôt que du goût.
- Des retours sans responsable. Six personnes commentent, deux se contredisent, et la personne qui conçoit doit arbitrer. Nommez une personne qui consolide les retours et tranche.
- Du contenu qui n'existe pas. Les designs sont validés sur du texte de remplissage, puis le vrai texte arrive deux fois plus long et la mise en page est refaite. Concevez avec du contenu réel, même approximatif.
- Des tours de correction illimités. Convenez du nombre d'avance — deux ou trois en général — et du coût d'un tour supplémentaire. Sans limite, les projets dérivent au lieu de se terminer.
- Une validation qui n'en est pas une. « Ça a l'air bien » en réunion n'est pas une validation. Obtenez-la par écrit, par gabarit, avec une date.
La question la plus utile en revue n'est pas « est-ce que ça vous plaît » mais « est-ce que cela aide le visiteur à faire ce pour quoi nous avons convenu que le site existe ». Les débats de goût n'ont pas de fin ; les débats d'objectif si.
Questions fréquentes
Combien de tours de correction prévoir ?
Deux ou trois est la norme sur un projet à base de gabarits. Ce qui compte plus que le nombre, c'est que ce soit convenu par écrit avec le coût d'un tour supplémentaire. Les corrections illimitées paraissent généreuses et signifient en pratique que le projet n'atteint jamais de décision, faute de quoi que ce soit qui pousse à trancher.
Design et développement doivent-ils être la même personne ou équipe ?
Sur les petits projets, une personne qui fait les deux est efficace et évite une passation. Sur les grands ce sont réellement des compétences différentes et les séparer donne généralement un meilleur travail — à condition que le design livre un système avec états et règles adaptatives plutôt qu'un jeu d'images. Le risque est dans la passation, pas dans la séparation.
Ai-je besoin d'un design complet avant de démarrer le développement ?
Il vous faut les gabarits conçus, pas chaque page. Le développement peut démarrer dès que le système de design et les deux ou trois gabarits les plus complexes sont figés ; le reste peut se terminer pendant la réalisation. Démarrer sans rien de figé signifie du travail refait, et finir jusqu'à la dernière page avant d'écrire du code signifie payer du temps mort.
Quels livrables dois-je recevoir à la fin ?
Les fichiers sources modifiables de chaque gabarit et composant, une échelle typographique et chromatique documentée, les ressources exportées dans les formats dont la réalisation a besoin, et les règles adaptatives par écrit. Demandez avant de commencer si vous recevez les fichiers sources ou seulement des exports : la différence compte dès la première petite modification sans la personne qui a conçu.
processus conception webétapes design webwireframessystème de designmaquettes webworkflow design web
