Call'ade Mobile, Design
Le design d'un site qui ressemble à sa boutique
Pourquoi la maquette part des photos du magasin, d'où viennent sa couleur et sa vague, et comment chaque écran sert un geste du client.
Point de départ
La boutique est déjà la marque
Je n'ai pas inventé d'identité. Elle existait rue de la Gare, sur les photos de la fiche Google : blanc, chêne clair, lettrage noir, et un mur d'étagères qui ondule.
La première chose que j'ai faite, avant la moindre maquette, a été de regarder les photos publiées sur la fiche Google du magasin. On y voit un lieu calme et lumineux : un sol de bois clair, des étagères de chêne, des coques rangées par couleur, un coin d'attente avec quatre tabourets, une table où les téléphones reconditionnés sont posés en rang.
Le site, lui, montrait tout autre chose. Trois familles de polices, deux oranges différents dont aucun n'était celui du logo, sept fonds pastel, des personnages en 3D tirés d'un outil de mise en page, une photo de banque d'images et des emojis en guise de titres. Le seul point commun entre la boutique et son site était le noir du logo.
Un client qui découvre le site puis pousse la porte ne reconnaît rien. L'inverse est vrai aussi. Pour un commerce de proximité, c'est une occasion perdue : la boutique soignée est un argument, et aucun des cinq concurrents relevés ne montre la sienne.
| Site actuel | Maquette | |
|---|---|---|
| Couleurs | Un orange qui n'est pas celui du logo, 7 pastels de cartes, gris de texte à 4,29:1 | Blanc, gris clair, noir du logo, un orange pour l'appel |
| Polices | Montserrat, Poppins et Roboto | Police du système (San Francisco sur Apple), Inter ailleurs |
| Images | Clipart 3D, photo de banque d'images, 38 images sur 78 sans texte alternatif | Photos de la vraie boutique, textes alternatifs descriptifs |
| Ton | 21 emojis en images, « expérience client UNIQUE ! » | Des faits : un prix, une adresse, un horaire |
| Premier écran mobile | Logo, bouton d'appel qui disparaît, carrousel de logos | Titre local, « Voir les prix », barre d'appel collante |
Après
AvantDirection
Sobre comme une page d'Apple, chaleureux comme la boutique
La boutique répare surtout des iPhone, et ses clients connaissent par cœur les pages d'Apple. J'ai pris leur sobriété comme référence, sans en copier une ligne.
Pourquoi cette référence
Une page produit d'Apple fait peu de choses, et très bien : un grand titre, une phrase courte, une photo en grand, beaucoup de blanc, une section gris clair pour changer de sujet. Le magasin vend la même promesse en vrai : un lieu net où l'on répare des objets qu'on aime. Reprendre cette grammaire rend le site familier dès le premier écran, pour un public qui a déjà ces codes en tête.
Rien n'est copié : ni logo, ni pictogramme, ni texte, ni code, ni la police SF Pro, dont la licence ne permet pas de la servir sur un site web.
La palette
Elle tient en six couleurs, toutes tirées du logo ou des murs. L'orange est celui du petit téléphone qui remplace l'apostrophe dans « CALL'ADE ». J'en ai fait une règle : il sert au bouton « Appeler », et à rien d'autre. Si un écran montre deux aplats orange, c'est un défaut. Le vert n'est pas une couleur de marque : il ne marque que l'état « ouvert », toujours accompagné du mot.
- Blanc
#FFFFFFFond de page, comme les murs de la boutique - Gris clair chaud
#F5F5F3Sections en alternance - Gris taupe
#5C564ETexte secondaire - Noir du logo
#1F1D1ATexte, bouton principal, lettrage - Orange du logo
#E83C00Le bouton « Appeler », rien d'autre - Vert
#2E6B3FL'état « ouvert », toujours avec le mot
Une première planche, puis une révision
La première planche partait d'une police, Archivo, et d'une palette chaude : crème, « lumière d'étagère », chêne. Belle sur une affiche, elle chargeait l'écran. En passant à la maquette, j'ai retiré le chêne de l'interface pour le laisser aux photos, qui le montrent mieux que n'importe quel aplat.
La typographie
Le texte utilise la police du système : San Francisco sur un iPhone ou un Mac, sans rien télécharger, et Inter, sous licence libre, ailleurs. Une police de repli aux métriques ajustées occupe exactement la même place pendant le chargement, pour que rien ne bouge quand Inter arrive. Les titres sont en graisse 650, serrés, à la manière des capitales noires de la façade.
La vague, seule signature
Le mur d'étagères de Villefranche ondule et s'éclaire par le bord. C'est le détail qu'on remarque en entrant, et le seul geste graphique de la maquette. La première planche le mettait partout : sous chaque titre, entre les sections. La version finale le garde à deux endroits. Le bord haut de la grande photo de l'accueil suit la vague, juste au-dessus du vrai mur. Et un filet gris à une seule ondulation ouvre le pied de page.
Deux emplois, pas plus. Répétée partout, la vague serait devenue un motif de papier peint.
Interface
Chaque écran sert un geste
Un client de réparateur veut savoir trois choses : combien, où, et si c'est ouvert. L'interface est construite autour de ces questions, pas autour d'un thème.
La barre d'action, à portée de pouce
Sur le site actuel, le numéro de téléphone disparaissait au premier défilement et le bouton d'appel flottant sortait de l'écran, parce que la page faisait 445 px de large sur un téléphone de 390. Sur la maquette, une barre reste collée en bas de chaque page mobile : « Appeler » en orange, « Itinéraire » et « Prix » au trait. Trois cibles de 48 px de haut, la taille d'un pouce.
La barre sait où vous êtes. Sur la page d'une boutique, elle appelle cette boutique. Ailleurs, elle reprend la dernière boutique consultée, ou propose de choisir parmi les trois. Elle laisse une marge sous le pied de page pour ne jamais le masquer et respecte la zone de l'encoche des iPhone. Sur ordinateur, elle disparaît : le numéro passe dans l'en-tête.
Le devis est une suite de pages
Le site actuel demandait huit champs obligatoires, dont l'e-mail, avant de promettre un rappel. Le mot « écran », la panne la plus fréquente, ne figurait même pas dans la liste.
Sur la maquette, on choisit une marque parmi des logos, puis un modèle, puis une panne. Chaque choix est un lien vers une vraie page, avec son prix. Rien à remplir, aucun bouton « Envoyer », et le bouton retour du navigateur fonctionne comme on l'attend. La page des tarifs regroupe les 18 marques de smartphones, les tablettes et les ordinateurs, avec un champ de recherche pour qui sait déjà son modèle.
Chaque prix porte l'étiquette « démo ». Tant que le gérant n'a pas donné sa grille, aucun chiffre ne doit pouvoir passer pour le sien.
Le bandeau de logos et la rangée d'avis
L'accueil actuel s'ouvrait sur un carrousel de logos de marques. L'idée est bonne : elle dit en une seconde « on répare votre téléphone, quel qu'il soit ». Je l'ai gardée, déplacée sous la photo et rendue utile : chaque logo mène à sa page de marque. Le bandeau défile en continu, s'arrête au survol et au clavier, et devient une grille fixe pour les personnes qui ont demandé à réduire les animations.
Les avis suivent la même logique. Le site affichait un widget figé à 616 avis. La maquette donne la vraie note de la fiche Google, 4,9 sur 5 pour 867 avis, avec la date du relevé et un lien vers Google, puis une rangée d'avis réels qui défile lentement. Un bouton visible la met en pause, comme l'exige le critère 2.2.2 des règles d'accessibilité WCAG pour tout ce qui bouge plus de cinq secondes.
Administration
Un back-office qu'on comprend sans formation
Le design ne s'arrête pas au site public. Le gérant passera plus de temps dans l'administration que n'importe quel visiteur sur une page.
L'administration tourne sur Payload, en français. Le tableau de bord range tout en quatre rubriques : les prix et réparations (marques, modèles, types de panne, réparations), les boutiques, le contenu du site, les réglages. Pas de vocabulaire de développeur, pas de menu d'extensions.
Une réparation se saisit comme on la dit au comptoir : un modèle, une panne, une qualité de pièce, un prix. Les horaires de chaque boutique se règlent jour par jour, avec la pause de midi et les fermetures exceptionnelles. Une case « prix de démonstration » accompagne chaque prix importé, et le site de production refuse de se construire tant qu'il en reste une cochée.
Accessibilité
Lisible par tout le monde, pas seulement par Lighthouse
La maquette obtient 100 sur 100 en accessibilité sur les quatre gabarits mesurés le 5 octobre 2026, contre 86 à 90 pour le site actuel. Le score ne fait pas tout : voici ce qu'il recouvre.
Du contenu qui ne dépend pas d'une animation
Sur le site actuel, plusieurs blocs de l'accueil restaient invisibles jusqu'à leur animation d'entrée. Sans JavaScript, ou sur un téléphone lent, on voyait de grandes bandes blanches. La maquette rend tout son contenu côté serveur, visible avant le moindre script.
Du contraste et des cibles assez grandes
Le texte courant du site actuel était en gris clair, à 4,29:1 de contraste, sous le seuil de 4,5:1 des règles WCAG. 26 liens sur 62 de l'accueil mobile faisaient moins de 44 px dans une dimension. La maquette écrit en noir et en gris taupe bien au-dessus du seuil, et ses cibles tactiles atteignent 44 px. Le blanc sur l'orange n'offre que 4,1:1 : le libellé « Appeler » est donc en 19 px gras, la taille où la règle des grands textes s'applique.
Le clavier, les lecteurs d'écran, le mouvement
Les bandeaux qui défilent ont un bouton de pause, leurs copies sont masquées aux lecteurs d'écran et sorties de l'ordre de tabulation. Toutes les animations s'arrêtent si le téléphone demande à réduire le mouvement. Chaque photo a un texte alternatif qui décrit ce qu'on voit, à la place des noms de fichiers que lisait le site actuel.
Aller plus loin
L'étude complète et les autres angles
Étude de casToute l'étude Call'ade MobileLe déroulé complet : point de départ, analyse, diagnostic, stratégie, maquette et mesures.Lire
CybersécuritéL'audit de sécurité en détailLa méthode passive, les preuves de l'antidatage, les en-têtes manquants et le plan de nettoyage pas à pas.Lire
SEOLe SEO local en détailLe sitemap, les titres, l'incohérence des coordonnées, la recherche de mots-clés et le plan de migration en 301 et 410.Lire
Le service
Développement web
Votre boutique est plus belle que votre site ? Je pars de ce que vos clients voient en entrant, pas d'un thème.