--- title: "Agence UX/UI design et webdesign à Nantes" description: "Agence UX/UI à Nantes : recherche utilisateur, parcours, maquettes, prototype testé et design system, avec l’accessibilité intégrée. À partir de 2 900 € HT." canonical_url: "https://studiofogg.fr/services/webdesign-ux-ui-nantes" --- > Index of every page on this site: [llms.txt](https://studiofogg.fr/llms.txt) Le webdesign UX/UI, c’est la conception de votre site ou de votre application avant la première ligne de code : l’UX définit les parcours et l’organisation de l’information, l’UI leur donne une forme claire et fidèle à votre marque. Concrètement, notre agence UX/UI à Nantes mène une recherche utilisateur proportionnée à votre projet, construit l’arborescence, dessine wireframes et maquettes desktop et mobile, fait tester un prototype cliquable, puis documente un design system pour les développeurs. Le but : que vos visiteurs comprennent en quelques secondes ce que vous proposez et passent à l’action, sur tous les écrans. ## UX et UI : deux métiers, un seul objectif On confond souvent les deux. Ils répondent pourtant à des questions différentes :
Aspect UX design UI design
La question Que cherche la personne, et quel est le chemin le plus court ? Comment rendre ce chemin évident et agréable ?
Le travail Recherche, arborescence, parcours, wireframes, tests Typographie, couleurs, composants, états, iconographie
Le livrable Parcours et wireframes validés Maquettes, prototype et design system
Les deux se travaillent dans cet ordre : la structure d’abord, le visuel ensuite. Un beau site mal organisé fait fuir ; un site bien organisé mais sans caractère ne donne pas envie. Chez nous, la même équipe porte les deux, ce qui évite les allers-retours entre prestataires. ## Comprendre avant de dessiner Un projet de design commence par des questions, pas par des couleurs. Selon votre budget, la phase de recherche combine : - **un atelier de lancement** avec vous et les personnes en contact direct avec vos clients : accueil, commerciaux, support ; - **quelques entretiens avec des clients**, à notre studio de Nantes, chez vous ou en visio ; - **l’analyse de l’existant** : statistiques de visite, requêtes de la Search Console, questions reçues par e-mail ou au téléphone ; - **un regard sur vos concurrents**, pour repérer les conventions à respecter et les occasions de vous distinguer. Cette recherche reste proportionnée. Pour un site vitrine, quelques jours suffisent souvent ; pour une application métier, avec plusieurs profils d’utilisateurs, elle mérite davantage de temps. ## Parcours, arborescence et contenus Nous traduisons ensuite ces enseignements en arborescence et en parcours prioritaires : demander un devis, comparer deux offres, prendre rendez-vous, commander. Chaque page reçoit un rôle, une question principale à laquelle répondre et une action attendue. [Construire l’arborescence d’un site web](https://studiofogg.fr/journal/arborescence-site-web-methode-et-exemples), c’est partir des questions de vos clients et s’en tenir à trois niveaux au plus : notre guide détaille la méthode, avec trois exemples commentés. Les contenus arrivent à ce moment-là, pas après. Des maquettes dessinées avec du faux texte cachent des problèmes de longueur, de hiérarchie et de ton. Nous construisons le plan de contenus avec vous ; notre article sur [la rédaction des textes de son site internet](https://studiofogg.fr/journal/rediger-les-textes-de-son-site-internet) explique comment préparer cette étape sans y passer vos soirées. D’autres conseils sont réunis dans [notre rubrique sur l’UX, les contenus et l’accessibilité](https://studiofogg.fr/journal/rubrique/ux-contenus-accessibilite). ## Des wireframes aux maquettes Les wireframes, ou zonings, posent la structure de chaque gabarit en noir et blanc : ordre des blocs, poids des messages, place des appels à l’action. Ils se valident vite et se corrigent sans regret, parce qu’aucun détail graphique ne détourne l’attention de l’essentiel. Viennent ensuite les maquettes UI, conçues dans Figma pour le mobile comme pour le desktop. Nous dessinons les gabarits clés avec vos vrais contenus, puis les états qui font la différence à l’usage : survol, focus clavier, chargement, erreur, résultat vide. Les animations se limitent à celles qui aident à comprendre, comme la confirmation d’un envoi ou l’ouverture d’un menu, selon [notre grille pour distinguer une animation utile d’une animation nuisible](https://studiofogg.fr/journal/animations-site-web-utiles-ou-nuisibles). Pour voir comment s’enchaînent ces livrables, lisez notre article sur [ce que l’on valide à chaque étape du webdesign](https://studiofogg.fr/journal/maquette-prototype-design-system-etapes-du-webdesign). ## Prototype cliquable et tests utilisateurs Avant de développer, nous assemblons les maquettes en prototype cliquable. Vous parcourez votre futur site comme s’il existait déjà, et nous le faisons tester par quelques personnes représentatives de vos clients, avec des tâches concrètes : trouver un tarif, prendre rendez-vous, envoyer une demande. Les blocages observés sont corrigés à ce stade, quand ils coûtent quelques heures de design plutôt que plusieurs jours de développement. Les tests ne remplacent pas votre regard : ils l’éclairent avec des faits plutôt qu’avec des préférences. ## Un design system pour durer Le design system rassemble les fondations de votre interface — couleurs, typographies, espacements, grille — et ses composants : boutons, champs de formulaire, cartes, navigation, messages. Chaque composant est documenté avec ses variantes, ses états et ses règles d’usage. Il sert trois objectifs : garder un site cohérent quand il grandit, accélérer la création de nouvelles pages et faciliter le travail des personnes qui prendront le relais. Pour une application, il devient la référence commune entre design et code. ## L’accessibilité dès la maquette Corriger l’accessibilité après le développement coûte cher ; la prévoir dans la maquette ne coûte presque rien. Nous vérifions dès Figma : - **les contrastes** : au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes, comme le demandent [les règles internationales WCAG sur le contraste](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) ; - **la taille des zones cliquables**, avec [un minimum de 24 × 24 pixels CSS, sauf exceptions](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html), un critère des WCAG 2.2, version que le futur RGAA 5 doit intégrer ; - **la visibilité du focus clavier**, l’ordre de lecture et la hiérarchie des titres ; - **une information jamais portée par la couleur seule**, et des messages d’erreur explicites dans les formulaires. Pour un audit complet de l’existant ou une mise en conformité, notre [service d’accessibilité numérique et d’audit RGAA](https://studiofogg.fr/services/accessibilite-numerique-nantes) prend le relais. La sobriété se joue au même moment : nombre de polices, poids des visuels, vidéo qui démarre seule ou image fixe. Si vous visez un site plus léger, [notre démarche d’éco-conception web](https://studiofogg.fr/services/eco-conception-web-nantes) attribue dès le cadrage un budget de poids et de requêtes à chaque gabarit. ## Une passation sans perte vers le développement Chez FOGG, les personnes qui dessinent et celles qui développent travaillent dans le même studio. Les maquettes sont annotées (comportements responsive, animations utiles, règles de contenu), les composants portent les mêmes noms que dans le code et les éléments graphiques sont exportés aux bons formats. Pendant le développement, le designer reste disponible pour trancher les cas imprévus. Si votre projet est une application métier, un extranet ou un portail client, la conception se prolonge naturellement avec [nos développeurs d’applications sur mesure](https://studiofogg.fr/services/developpement-web-sur-mesure-nantes). Et si une autre équipe développe, nous lui remettons des fichiers lisibles et documentés. ## Webdesigner indépendant ou studio : que choisir ? À Nantes, vous trouverez d’excellents webdesigners indépendants comme des agences plus importantes. Le bon choix dépend moins du statut que de la nature de votre projet : - **un webdesigner indépendant** convient bien à une mission graphique délimitée — une identité à décliner, quelques pages à habiller — quand le développement est déjà pris en charge ailleurs ; - **un studio comme le nôtre** prend son sens quand le design doit s’articuler avec le développement, le référencement et l’accessibilité, avec un seul interlocuteur du premier atelier à la mise en ligne. Dans les deux cas, demandez à voir des parcours et des wireframes, pas seulement de belles maquettes : c’est là que se joue l’efficacité d’un site. Pour préparer vos rendez-vous, [notre grille de questions à poser à une agence web](https://studiofogg.fr/journal/choisir-son-agence-web-a-nantes) vous aidera à comparer. Et si vous avez besoin d’un site complet, la conception graphique fait partie de [chaque site vitrine que nous créons](https://studiofogg.fr/services/creation-site-vitrine-nantes). ## Ce que nous attendons de vous Un bon design se construit à deux. Pour avancer sereinement, nous vous demandons : - vos éléments de marque existants (logo, couleurs, typographies, photos), même imparfaits ; - les accès à vos statistiques et à la Search Console, si votre site existe déjà ; - une ou deux personnes disponibles pour valider chaque étape, dans des délais fixés ensemble ; - quelques contacts de clients prêts à donner une demi-heure pour un entretien ou un test. ## Délais et budget Une mission de webdesign UX/UI dure de 3 à 6 semaines : elle correspond aux escales « Contenus et parcours » et « Design » de [notre méthode de travail, du cadrage au suivi](https://studiofogg.fr/methode). Elle démarre à 2 900 € HT ; le prix dépend du nombre de gabarits, de la part de recherche et de tests, et de l’étendue du design system. Ce prix de départ et ce qui le fait varier sont présentés sur la [page de tarifs du webdesign UX/UI](https://studiofogg.fr/tarifs#webdesign-ux-ui-nantes). ## Sitemap See the full [sitemap](https://studiofogg.fr/sitemap.md) for all pages.