Donner forme : maquettes et interfaces
Du croquis au wireframe
La conception d’une interface commence rarement par un écran fini. Elle part le plus souvent d’un croquis rapide, sur papier ou à l’écran, qui pose les grandes zones d’une page sans s’attarder sur les détails visuels. Cette première étape se formalise ensuite en wireframe, un schéma qui définit les zones et les composants que doit contenir une interface, sans habillage graphique. Le wireframe s’inscrit dans une recherche d’ergonomie avant tout : il sert à valider une structure, pas une esthétique. Plusieurs outils accompagnent cette étape, du plus schématique (Balsamiq, Wireframe.cc) au plus complet (Figma, Sketch, Adobe XD, Axure RP), chacun avec un niveau de détail et de collaboration différent.
Du wireframe au prototype
Une fois la structure validée, le wireframe peut évoluer vers un prototype : un modèle qui possède déjà tout ou partie des qualités techniques et des caractéristiques de fonctionnement du produit final. En UX, un prototype est concrètement un ensemble de maquettes interactives reliées entre elles par des liens, qui simule le comportement de la future interface. On distingue le prototype de basse fidélité, encore incomplet et sommaire, du prototype de haute fidélité, qui reproduit fidèlement l’interface définitive avec l’ensemble de ses fonctionnalités.
Tester un prototype plutôt qu’une interface déjà développée présente un avantage décisif : corriger une maquette coûte toujours moins cher, en temps comme en argent, que corriger du code déjà mis en production.
Quelle est la principale différence entre un wireframe et un prototype ?
Voir la réponse
Réponse : A. Le wireframe définit les zones et composants d’une interface sans habillage graphique, tandis que le prototype relie des maquettes entre elles pour simuler le comportement interactif du produit final, en basse ou en haute fidélité.
Source : Wireframe (design), Wikipédia, 2026.
Le nombre d’or, une proportion souvent invoquée
Certaines notions graphiques reviennent régulièrement dans la conception d’une interface : des fonds sobres, des couleurs contrastées en nombre limité, des espaces réguliers entre les blocs, une seule typographie principale. Le nombre d’or, cette proportion mathématique approximativement égale à 1,618, est souvent invoqué en design graphique pour composer des mises en page jugées harmonieuses. Il reste toutefois un repère parmi d’autres, à manier avec discernement plutôt qu’à appliquer comme une règle absolue.
Identité de marque et charte graphique
Concevoir une interface suppose de connaître au préalable l’identité de la marque qu’elle sert : son histoire, ses missions, sa vision, les cibles qu’elle vise, la personnalité qu’elle revendique et les valeurs qu’elle défend. Cette identité se traduit ensuite dans une charte graphique, un document qui rassemble les règles d’utilisation des éléments graphiques (logo, couleurs, polices, symboles) applicables à l’ensemble des supports de communication. Elle garantit l’homogénéité et la cohérence de la communication visuelle, en interne comme vers l’extérieur.
À quoi sert une charte graphique ?
Voir la réponse
Réponse : A. La charte graphique rassemble les règles d’utilisation des éléments graphiques (logo, couleurs, typographies, symboles) d’une marque, pour garantir l’homogénéité et la cohérence de sa communication visuelle sur tous les supports.
Source : Charte graphique, Wikipédia, 2026.
Typographie, couleurs et tonalité
La typographie retenue pour une interface se choisit parmi cinq grandes familles de polices de caractères : avec empattements (serif), sans empattements (sans-serif), cursive, fantaisie ou à chasse fixe (monospace). Au-delà du choix de la police elle-même, l’alignement, l’espacement et l’interlignage conditionnent tout autant la lisibilité d’un texte.
La palette de couleurs se définit à travers plusieurs systèmes de référence complémentaires (codes Pantone, CMJN pour l’impression, RVB et codes hexadécimaux pour les écrans), en gardant à l’esprit que des alternatives chromatiques plus économes en ressources existent et méritent d’être envisagées. Enfin, la tonalité, c’est-à-dire le choix des mots et du registre de langage employés, complète l’identité graphique en identifiant les pratiques à privilégier et celles à éviter pour rester fidèle à la personnalité de la marque.
Optimiser les images pour le web
Le choix du format d’image influence directement le poids d’une page et donc la vitesse à laquelle elle s’affiche. Le PNG offre une qualité sans perte mais des fichiers plus volumineux, le JPEG permet d’ajuster le niveau de compression pour équilibrer qualité et poids, le GIF reste réservé aux images animées avec une palette limitée à 256 couleurs, et le WebP, plus récent, propose des fichiers nettement plus légers que le JPEG ou le PNG à qualité comparable. Uniformiser les formats, les dimensions et les traitements appliqués à l’ensemble des images d’un projet, avant leur mise en ligne, fait partie intégrante du travail de conception d’une interface.
Pourquoi optimiser les images intégrées à une interface web ?
Voir la réponse
Réponse : A. Choisir un format d’image adapté (WebP, JPEG compressé) réduit le poids d’une page et accélère son affichage. Le temps de réponse perçu fait partie intégrante de l’expérience vécue par la personne qui utilise l’interface, au même titre que sa lisibilité.
Source : Expérience utilisateur, Wikipédia, 2026.
Une maquette qui pense l’accessibilité dès le départ
Une interface ne se pense pas accessible après coup : les contrastes de couleurs et la lisibilité des textes se décident dès la maquette, pas au moment de la mise en ligne. Nos exigences en la matière sont détaillées sur la page Accessibilité.