Web design et expérience utilisateur.

Une maquette n’est pas une image jolie. C’est l’hypothèse de parcours que le site devra vérifier : où le visiteur arrive, ce qu’il comprend en trois secondes, ce qu’il cherche ensuite, et par où il repart avec une demande de devis.

L’arborescence avant la maquette

Avant le premier pixel vient l’arborescence : la liste des pages, leur hiérarchie, et le chemin qu’on attend de chaque type de visiteur. Un client qui vient chercher un tarif, un autre qui vérifie que vous êtes sérieux, un troisième qui cherche votre numéro — ce ne sont pas les mêmes trajets.

Ce document tient sur une page et se valide en une réunion. Corriger une arborescence coûte une heure ; corriger la même erreur une fois le site construit en coûte dix, parce qu’il faut alors déplacer des contenus, refaire des liens et redresser des adresses.

C’est aussi à ce moment que se décide ce que le site ne fera pas. Une fonction écartée en amont est une fonction qui ne coûte rien.

Rendu 3D sombre : arborescence de lignes dorées et de nœuds de verre se ramifiant de gauche à droite.

La maquette, pas le site

Vient ensuite la maquette des gabarits principaux : la page d’accueil, une page de contenu, et le modèle qui portera vos pages secondaires. Trois écrans suffisent à trancher l’essentiel — la place du logo, la densité du texte, le traitement des images, l’endroit où tombe le bouton.

La maquette est présentée sur une adresse privée que vous pouvez ouvrir autant de fois que vous voulez, montrer à un associé, laisser reposer deux jours. Les remarques se font par écrit, sur le document, et elles sont traitées avant que la moindre ligne de code ne soit écrite.

Déplacer un bloc sur une maquette prend cinq minutes. Le déplacer sur un site déjà intégré en prend beaucoup plus, et c’est exactement la dépense que cette étape supprime.

Ce que l’expérience utilisateur veut dire concrètement

L’expérience utilisateur se mesure à des choses très concrètes, rarement spectaculaires. Un bouton qui reste atteignable au pouce sur un téléphone tenu d’une main. Un formulaire qui dit ce qui ne va pas au lieu d’afficher « erreur ». Un menu qui tient sur un écran de six pouces sans que rien ne se chevauche.

Les zones cliquables font au moins 44 pixels de côté, parce qu’en dessous le doigt rate sa cible. Les contrastes sont vérifiés au rapport, pas à l’œil. Les libellés disent ce qui va se passer — « Demander un devis » plutôt que « Envoyer ».

Un site réussi ne se remarque pas : personne ne se dit qu’il est bien conçu, on se contente de trouver ce qu’on cherchait. C’est le seul critère qui compte.

Rendu 3D sombre : dalle de verre inclinée parcourue d’anneaux dorés concentriques partant d’un point précis.

Accessibilité et lisibilité

La lisibilité passe avant l’effet. Un corps de texte à seize pixels minimum, des lignes qui ne dépassent pas soixante-quinze caractères, un interligne qui laisse respirer. Ce sont des réglages invisibles qui décident si votre page est lue ou survolée.

L’accessibilité est intégrée dès la conception : hiérarchie de titres cohérente, navigation possible au clavier seul, indicateur de focus visible, images décrites pour ceux qui ne les voient pas, animations neutralisées pour qui a réglé son système en ce sens. Ce n’est pas un audit de conformité RGAA, qui relève d’un organisme tiers, mais c’est la base sans laquelle un tel audit échoue d’emblée.

Ces choix profitent à tout le monde. Un contraste correct sert autant à la personne malvoyante qu’à celle qui consulte son téléphone en plein soleil.

Questions fréquentes

Combien de maquettes vais-je voir avant de choisir ?

Une direction, travaillée jusqu’au bout, plutôt que trois esquisses entre lesquelles arbitrer au hasard. Cette direction sort du brief, pas d’une intuition : si elle ne va pas, on la corrige ensemble. Présenter trois propositions revient à en bâcler deux.

Puis-je demander des modifications sur la maquette ?

C’est le but de l’étape. Deux tours d’allers-retours sont prévus au devis et suffisent presque toujours. Au-delà, on regarde ensemble ce qui n’a pas été dit au brief — c’est en général là que se trouve la cause.

Travaillez-vous sur Figma ou directement dans WordPress ?

La maquette se fait dans l’outil de conception, l’intégration dans WordPress avec Divi 5. Vous n’avez rien à installer : la maquette s’ouvre dans votre navigateur, sur une adresse privée, et vos commentaires se déposent dessus.

Faut-il fournir les textes avant la maquette ?

Au moins leur volume approximatif. Une maquette dessinée sur du faux texte s’effondre le jour où arrive le vrai, toujours plus long. Si les contenus n’existent pas, je peux les prendre en charge — cela figure alors au devis comme une ligne à part.

Le design sera-t-il unique ou basé sur un thème acheté ?

Unique. Un thème du commerce impose sa structure à votre offre ; ici c’est l’inverse. Vous ne trouverez pas le même site chez un concurrent à trente kilomètres, ce qui arrive plus souvent qu’on ne le croit.

Le résultat se juge sur pièces : voir les réalisations, ou décrire votre projet — réponse sous 48 heures ouvrées.