Création de maquette UI/UX

La maquette UX pose la logique : parcours, ordre des informations, contenu de chaque écran. Elle commence souvent par un schéma sans style, le wireframe. La maquette UI habille ensuite cette structure, avec les couleurs, les typographies, les boutons et les images.

Une simple page d’accueil peut se contenter de l’UI si le parcours est évident. Une application, un espace client ou un tunnel d’achat ont besoin des deux, car l’erreur coûte plus cher une fois le développement lancé. Beaucoup d’offres réunissent UI et UX : vérifiez que l’étape de structure est bien comprise.

Un budget courant se situe entre 200 et 2 000 €, pour 1 à 3 semaines de travail. Une page unique coûte bien moins qu’un site complet ou qu’une application avec plusieurs parcours.

Le prix suit le nombre d’écrans distincts, la présence d’une recherche UX, les versions mobile et ordinateur, et le nombre de retours prévus. Faites écrire ces éléments avant de comparer deux offres.

Comptez les modèles, pas les pages. Un site de 50 articles peut n’avoir besoin que de quelques gabarits : accueil, liste, article, contact. À l’inverse, une application peut réclamer des dizaines d’écrans pour un seul parcours.

Pensez aussi aux écrans qu’on oublie : inscription, mot de passe perdu, liste vide, message d’erreur, confirmation. S’ils manquent, le développeur devra les inventer. Pour limiter le budget, faites dessiner d’abord le parcours principal, puis les variantes.

Le plus utile n’est pas le logiciel le plus réputé, mais celui que votre équipe saura ouvrir. Figma est très répandu : le fichier se consulte en ligne et se commente à plusieurs. Si votre développeur ou votre agence travaille déjà avec un autre outil, dites-le avant de commander.

Demandez à recevoir le fichier de travail, et pas seulement des images. Sans lui, la moindre retouche dépendra de la personne qui l’a créé.

• Maquette : montre chaque écran, sans fonctionner.
• Prototype : un prototype de site web relie les écrans pour essayer le parcours en cliquant. Utile avant un gros développement, ou pour convaincre un associé.
• Intégration : l’intégration de maquette transforme le design en vraies pages, en code ou dans un CMS.

Le design et l’intégration sont souvent deux commandes distinctes. Si vous visez WordPress, Shopify ou un autre CMS, indiquez-le dès le départ : la maquette doit tenir compte de ce que votre thème permet.

Oui, c’est même le cas le plus courant. Le travail se fait sur un fichier partagé, et les retours passent par des commentaires ou des appels. Choisissez plutôt un designer qui a déjà conçu des écrans pour votre type de produit.

Une rencontre aide surtout pour un atelier avec vos équipes, ou pour observer de vrais utilisateurs sur leur lieu de travail.

• La version mobile de chaque écran important, si elle était prévue.
• La cohérence : mêmes boutons, mêmes marges et mêmes styles de texte d’un écran à l’autre.
• Les vrais contenus : un titre long ou un prix élevé tient-il toujours dans l’espace prévu ?
• La lisibilité : contraste, taille des textes, boutons faciles à toucher.