01 — INTRODUCTION
Votre site web est votre meilleur commercial
Imaginez un commercial qui travaille 24h/24, 7j/7, sans jamais prendre de congés, sans jamais se montrer de mauvaise humeur. Un commercial capable de parler à des milliers de personnes simultanément, de répondre à leurs questions, de rassurer leurs doutes, et de les convaincre d’agir. Ce commercial, c’est votre site web.
Pourtant, la grande majorité des sites d’entreprises françaises ne remplissent pas ce rôle. Ils existent, certes — mais ils n’engagent pas, ne convertissent pas, ne mémorisent pas. Ils sont là par obligation plus que par stratégie.
Ce guide vous donne les outils pour changer ça. Que vous soyez en train de créer votre premier site ou de refondre un existant, vous trouverez ici à la fois les concepts fondamentaux et les méthodes concrètes que nous appliquons quotidiennement.
0.05s
pour former une première impression visuelle
88%
des visiteurs ne reviennent pas après une mauvaise expérience
3s
délai maximum avant qu’un utilisateur abandonne le chargement
« Les gens jugent un livre à sa couverture. Avec un site web, ils décident en moins d’une seconde s’ils restent ou s’en vont. »
Nielsen Norman Group, études UX
02 — ARCHITECTURE
Les fondations : ce qu’on ne voit pas mais qui fait tout
Avant même d’ouvrir Figma ou VS Code, un bon site se construit sur des bases solides que l’utilisateur final ne verra jamais directement — mais qu’il ressentira à chaque instant.
L’architecture de l’information
L’architecture de l’information (AI) répond à une question simple : comment organiser le contenu pour que l’utilisateur trouve ce qu’il cherche en un minimum d’efforts ? C’est l’une des disciplines les plus sous-estimées du web design.
Un bon exercice consiste à faire du card sorting : listez tous vos contenus, demandez à cinq personnes de votre cible de les regrouper comme elles le feraient naturellement. Le résultat est souvent surprenant — et très révélateur des écarts entre logique métier et logique utilisateur.
Le sitemap : votre plan d’architecte
Un sitemap n’est pas qu’un document technique pour les moteurs de recherche. C’est la carte mentale de votre site — la première chose qu’un bon designer crée avant de dessiner quoi que ce soit. Il recense toutes les pages, leurs relations hiérarchiques, et les chemins de navigation possibles.
Conseil pratique : limitez votre navigation principale à 5-6 items maximum. Au-delà, l’utilisateur se perd. Si votre contenu est plus riche, travaillez sur des méga-menus contextuels ou des footers structurés.
Le contenu d’abord (Content-First)
L’une des erreurs les plus répandues est de concevoir le design d’abord, puis d’y « insérer » le contenu. Cette approche aboutit presque toujours à des textes mal ajustés, trop courts ou trop longs, qui cassent la mise en page.
Commencez par rédiger vos contenus principaux — ou au moins des textes de travail réalistes — avant de concevoir. Votre design n’en sera que plus solide.
03 — DESIGN UI
Design UI : la discipline de l’attention
L’interface utilisateur (UI) est ce que vos visiteurs voient et touchent. C’est la couche visible du design — mais attention, « beau » ne signifie pas « efficace ». Un bon design UI guide l’œil, réduit la charge cognitive, et sert les objectifs métier.
Hiérarchie visuelle
La taille, le contraste et l’espace blanc définissent l’ordre de lecture. Chaque page ne doit avoir qu’un seul élément dominant.
Typographie
80% d’un site web, c’est du texte. Le choix des fontes, des tailles et des interlignages conditionne tout le reste.
Couleur & contraste
Une palette de 2-3 couleurs bien choisies est bien plus puissante que 10 couleurs dispersées. Le contraste n’est pas optionnel.
Espace blanc
Le vide n’est pas du gâchis. L’espace blanc donne de la respiration, valorise le contenu et transmet du prestige.
Cohérence
Même style de boutons, mêmes espacements, même traitement des titres. Un design système évite les incohérences au fil du projet.
Responsive Design
63% du trafic web mondial vient du mobile. Concevoir pour le mobile en premier n’est plus un choix, c’est une obligation.
Les composants d’un design system
Pour tout site au-delà d’une simple landing page, construire un design system est un investissement qui se rentabilise très rapidement. Il s’agit d’une bibliothèque de composants réutilisables (boutons, formulaires, cartes, navigations…) et de règles définissant comment les utiliser.
Figma est aujourd’hui l’outil de référence pour créer et maintenir un design system. Sa fonctionnalité « Variables » permet de gérer les tokens de design (couleurs, tailles, espaces) de façon systématique, et de basculer entre thèmes clair et sombre en quelques clics.
« Un bon design system, c’est de la liberté encadrée. Il libère les équipes des décisions répétitives pour qu’elles se concentrent sur les vrais problèmes. »
04 — UX DESIGN
UX : concevoir pour des humains, pas pour des écrans
L’expérience utilisateur (UX) désigne tout ce que ressent une personne en interagissant avec votre site. Contrairement à l’UI qui est visuelle, l’UX est émotionnelle et fonctionnelle. Un site peut être magnifique et pourtant offrir une UX terrible.
Les personas : connaître vraiment ses utilisateurs
Avant de concevoir quoi que ce soit, posez-vous cette question : pour qui est-ce que je crée ce site ? Un persona est un portrait fictif mais réaliste d’un utilisateur type. Il inclut des données démographiques, des objectifs, des frustrations, et des comportements.
Ce n’est pas un exercice théorique. Les équipes qui travaillent avec des personas prennent de meilleures décisions de design — parce qu’elles ont une référence concrète plutôt que de concevoir pour « tout le monde » (ce qui revient à concevoir pour personne).
Les parcours utilisateurs
Un user journey cartographie toutes les étapes qu’un utilisateur traverse depuis sa première prise de conscience jusqu’à l’action souhaitée. Ce travail révèle souvent des frictions invisibles : une étape de trop dans un formulaire, une information manquante au bon endroit, un CTA mal positionné.
Test des 5 secondes : montrez votre homepage à quelqu’un pendant 5 secondes, puis demandez-lui ce qu’il retient. Si la personne ne peut pas vous dire qui vous êtes et ce que vous proposez, votre message n’est pas assez clair.
Friction et fluidité
En UX, la « friction » désigne tout ce qui ralentit ou complique la progression de l’utilisateur. Un formulaire en 12 étapes quand 3 suffisent, une navigation à 4 niveaux, une page qui charge en 6 secondes — autant de frictions qui font fuir.
Le travail du designer UX est de supprimer toute friction inutile, et parfois d’en ajouter délibérément — pour des actions critiques (comme une suppression de compte) où on veut justement ralentir l’utilisateur.
05 — PROCESSUS
Le processus complet de A à Z
Voici la méthode que nous appliquons pour chaque projet de site web, qu’il s’agisse d’une landing page simple ou d’un portail e-commerce complexe.
06 — PERFORMANCE & SEO
Performance, SEO & accessibilité
Ces trois dimensions sont souvent traitées comme des afterthoughts — des cases à cocher après le design et le développement. C’est une erreur coûteuse. Elles doivent être intégrées dès le début du projet.
Les Core Web Vitals — les métriques qui comptent
Google mesure la qualité d’expérience d’un site à travers trois indicateurs clés, les Core Web Vitals, qui influencent directement votre classement dans les résultats de recherche.
LCP — Largest Contentful Paint
Temps de chargement du plus grand élément visible. Cible : moins de 2,5 secondes.
INP — Interaction to Next Paint
Réactivité aux interactions utilisateur. Cible : moins de 200ms.
CLS — Cumulative Layout Shift
Stabilité visuelle pendant le chargement. Cible : score inférieur à 0,1.
Accessibilité : concevoir pour tous
En France, la loi impose l’accessibilité numérique aux organismes publics (RGAA) et encourage fortement les entreprises privées à l’adopter. Au-delà de l’obligation légale, c’est une question d’éthique — et de bon sens commercial : 15% de la population mondiale vit avec un handicap.
Les principes WCAG 2.1 niveau AA sont devenus le standard minimal acceptable. Ils couvrent la perceptibilité (contraste suffisant, alternatives textuelles), l’opérabilité (navigation au clavier, zones de clic suffisamment grandes), la compréhensibilité et la robustesse.
« Lancer un site, c’est facile. Lancer le bon site, celui qui travaille pour vous jour et nuit — ça, c’est du travail. Et c’est exactement ce que ce guide vous aide à faire. »
Prêt à créer quelque chose d’exceptionnel ?
Que vous partiez de zéro ou que vous souhaitiez refondre un site existant, nous construisons ensemble des expériences web qui convertissent, qui durent, et qui vous ressemblent.