Conception d'un site web : les 7 étapes du processus de A à Z

Vous avez décidé de créer ou de refaire votre site web. Vous avez peut-être déjà rencontré une ou deux agences. Et vous réalisez qu’entre « nous allons faire votre site » et le moment où il est en ligne, il se passe beaucoup de choses — dont personne ne vous a vraiment expliqué le déroulement.

Cet article décrit les 7 étapes que suit tout projet web sérieux, du premier appel à la mise en ligne. Pas pour vous convaincre de travailler avec nous — mais pour que vous sachiez exactement dans quoi vous vous embarquez, ce qu’on attend de vous en tant que client, et pourquoi certaines étapes ne doivent jamais être sautées.

Rédigé par l’équipe de l’Agence Chocolat, agence web WordPress à Montréal depuis 2001. Plus de deux décennies de projets web nous ont appris une chose : les clients les mieux préparés obtiennent les meilleurs résultats.

Étapes 1 et 2 — Découverte et stratégie : avant de toucher au design

C’est la phase la plus sous-estimée — et la plus déterminante. Toutes les décisions prises ensuite en découlent.

Étape 1 — L’appel de découverte et le brief

La conception d’un site web commence par une conversation, pas par un devis. Un bon brief répond à ces questions :

• Qui sont vos clients idéaux ? Qu’est-ce qui les préoccupe ?
• Quels sont les objectifs mesurables du site (appels entrants, formulaires remplis, demandes de soumission) ?
• Quels sont vos concurrents directs et comment se positionnent-ils en ligne ?
• Avez-vous une identité visuelle existante (logo, charte graphique, palette de couleurs) ?
• Avez-vous un site actuel ? Qu’est-ce qui fonctionne, qu’est-ce qui ne fonctionne pas ?
• Quel est votre calendrier et votre budget ?

Ce sont ces réponses — pas vos préférences de couleurs — qui guident les décisions de design. Une agence qui vous envoie une soumission sans vous avoir posé ces questions travaille à l’aveugle.

Étape 2 — L’architecture de l’information et la structure du site

Avant de dessiner quoi que ce soit, on établit le plan du site : quelles pages existent, comment elles sont organisées, comment un visiteur navigue de l’une à l’autre. C’est ce qu’on appelle l’architecture de l’information.

Ce travail produit un **plan de site** (sitemap) : une liste hiérarchique de toutes les pages, avec leur rôle et leurs liens entre elles. Il détermine aussi la **stratégie de mots-clés** : quelle page cible quelle requête dans Google, pour éviter que deux pages ne se cannibalisent mutuellement.

Cette étape prend du temps. Les projets qui la sautent livrent souvent des sites dont la navigation est confuse et dont le SEO est incohérent dès le départ.

Étapes 3 et 4 — Design et validation : ce que vous verrez avant le développement

Aucune ligne de code n’est écrite avant que le design soit approuvé. C’est une règle non négociable dans tout projet web professionnel.

Étape 3 — Les maquettes (wireframes et design visuel)

Le processus de design se déroule en deux temps.

Les wireframes viennent en premier : des plans en niveaux de gris, sans couleurs ni images, qui montrent la structure de chaque page — où se trouve le menu, où va le titre, où apparaît le formulaire de contact. Ils permettent de valider l’organisation du contenu avant d’investir du temps dans le design visuel.

Les maquettes haute fidélité viennent ensuite : la version finale avec couleurs, typographies, images et textes réels (ou textes provisoires). Elles sont présentées page par page, d’abord en version mobile, puis en version bureau — parce que le mobile-first n’est pas qu’un principe, c’est la réalité du trafic web en 2026.

Ces maquettes sont produites dans un outil comme Figma. Vous les visualisez, vous faites vos commentaires, et les révisions sont intégrées avant le développement. C’est infiniment moins coûteux de changer un élément dans Figma qu’une fois le code écrit.

Étape 4 — La validation client

Vous avez un nombre défini de rondes de révisions selon votre contrat — généralement deux. Profitez-en pleinement. Vérifiez que :

• L’identité visuelle est respectée (couleurs, typographies, ton)
• Les appels à l’action sont clairs et placés aux bons endroits
• La navigation est intuitive pour quelqu’un qui ne connaît pas votre entreprise
• Le design fonctionne aussi bien sur mobile que sur écran d’ordinateur

Ce qui arrive quand cette étape est bâclée : le client demande des modifications majeures en cours de développement, le projet prend du retard, des coûts supplémentaires apparaissent. Prenez le temps de valider sérieusement les maquettes.

Étape 5 — Le développement WordPress : ce qui se passe sous le capot

Une fois les maquettes approuvées, le développement commence. Pour les non-initiés, voici ce que cette étape implique concrètement.

Le thème WordPress

Nous développons un thème WordPress sur mesure à partir des maquettes approuvées — pas un thème commercial acheté et modifié. La différence est fondamentale : un thème custom est léger (uniquement le code dont votre site a besoin), rapide (pas de scripts inutiles), et unique (votre design ne ressemble à aucun autre site). C’est l’une des raisons pour lesquelles nous n’utilisons pas Elementor ou Divi.

Les plugins et intégrations

WordPress fonctionne avec des plugins — des extensions qui ajoutent des fonctionnalités. Notre principe : aussi peu de plugins que possible, choisis pour leur qualité et leur longévité. Chaque plugin supplémentaire est une dépendance qui doit être maintenue.

Les plugins incontournables sur nos projets : Yoast SEO, un plugin de sécurité (Wordfence ou équivalent), un plugin de cache, et les plugins fonctionnels spécifiques à votre projet (WooCommerce si e-commerce, un système de formulaire, un plugin de réservation, etc.).

L’intégration du contenu

C’est à cette étape que vos textes et vos images sont intégrés dans le site. Si vous avez fourni des textes rédigés et des photos professionnelles, cette étape est rapide et fluide. Si vous arrivez à cette étape sans contenu prêt — c’est la cause numéro un de délais dans les projets web.

L’optimisation des performances dès le départ

Un site lent n’est pas un problème qu’on règle après la mise en ligne — c’est une erreur qu’on évite pendant le développement. Chaque image est compressée et convertie en WebP, les scripts sont minifiés, le cache est configuré, et les Core Web Vitals sont mesurés à chaque étape. Notre objectif : PageSpeed Insights au-dessus de 85/100 sur mobile avant même la mise en ligne.

Étapes 6 et 7 — Tests, formation et mise en ligne

Étape 6 — Les tests et la recette client

Avant de mettre le site en ligne, il passe par une phase de tests systématiques :

• Tests multi-navigateurs : Chrome, Firefox, Safari, Edge — le site s’affiche-t-il correctement partout ?
• Tests multi-appareils : mobile (iPhone, Android), tablette, ordinateur portable, grand écran
• Tests de formulaires : chaque formulaire est soumis et les notifications sont vérifiées
• Test de vitesse : PageSpeed Insights sur les pages principales
  Vérification SEO pre-launch** : balises title et meta sur toutes les pages, sitemap XML soumis à Google Search Console, redirections 301 en place si le site remplace un site existant, certificat SSL actif
• Recette client : vous naviguez sur la version de développement (site de test, non public) et signalez les derniers ajustements

Étape 7 — La formation et la mise en ligne

**La formation** a lieu avant la mise en ligne. Vous apprenez à :

• Ajouter et modifier des pages et des articles
• Mettre à jour votre portfolio ou vos réalisations
• Publier un article de blogue
• Gérer les formulaires et les demandes de contact

Cette formation est incluse dans nos projets parce qu’un client autonome est un client satisfait — et parce qu’un site dont le contenu n’est jamais mis à jour perd rapidement sa pertinence dans Google.

La mise en ligne est planifiée à un moment stratégique — idéalement en début de semaine, en dehors des heures de pointe, pour que vous puissiez suivre les premiers résultats et réagir rapidement si quelque chose ne fonctionne pas. Si votre ancien site est en ligne, la migration DNS est coordonnée pour minimiser le temps d’interruption.

Ce que vous devez préparer de votre côté — le rôle du client

Un projet web n’est pas une prestation à sens unique. Votre implication directe détermine la qualité du résultat et la durée du projet. Voici ce qu’on attend de vous.

Les textes

Idéalement rédigés avant le début du design — ou en parallèle. Les textes provisoires (faux textes) faussent les validations de design : un titre de 5 mots ne rend pas de la même façon qu’un titre de 15 mots. Si la rédaction n’est pas votre force, votre agence peut vous proposer ce service — ou vous recommander un rédacteur.

Les visuels

Photos professionnelles de votre équipe, de vos locaux, de vos réalisations. En 2026, les photos de stock génériques communiquent exactement le contraire de l’authenticité que Google et vos visiteurs valorisent. Un investissement en photographie professionnelle se remarque immédiatement dans le résultat final.

La charte graphique

Si vous avez un guide de marque (logo en formats vectoriels, palette de couleurs officielle, typographies), transmettez-le dès l’étape de découverte. Si vous n’en avez pas, c’est le bon moment pour en définir un.

Votre disponibilité

Les délais dans un projet web viennent rarement de l’agence. Ils viennent presque toujours du client : retard dans la transmission des textes, délai de validation des maquettes, changements de direction en cours de route. Prévoyez du temps dans votre agenda pour les rondes de validation — généralement deux à trois moments clés dans un projet standard.

La règle des deux semaines

Si votre agence vous envoie des maquettes à valider et que vous ne répondez pas pendant deux semaines, attendez-vous à ce que le projet soit décalé d’autant. Un projet web, c’est une collaboration — pas une commande qu’on passe et qu’on récupère à la livraison.

Questions fréquentes sur la conception d’un site web

Combien de temps prend la conception d’un site web ?

Pour un site vitrine WordPress standard (5 à 15 pages), le délai habituel est de 6 à 10 semaines à partir du brief approuvé. Ce délai inclut la stratégie, les maquettes, le développement, les tests et la formation. Les projets plus complexes (e-commerce, intégrations personnalisées, site multilingue) prennent généralement 3 à 5 mois. Le facteur qui allonge le plus les délais est la disponibilité du client pour les validations et la transmission du contenu.

Combien de révisions puis-je demander sur le design ?

La plupart des agences incluent deux rondes de révisions dans leur contrat de base. Au-delà, des modifications majeures peuvent générer des coûts supplémentaires. La clé est de préparer un feedback complet et structuré à chaque ronde plutôt que de transmettre des retours au compte-gouttes. Un feedback précis (« le bouton devrait être plus à droite ») vaut mieux qu’un feedback vague (« quelque chose ne va pas dans la mise en page »).

Dois-je fournir les textes de mon site moi-même ?

Vous avez le choix. Fournir vos propres textes est moins coûteux, mais exige du temps et une maîtrise de l’écriture pour le web (concis, orienté bénéfices, optimisé pour le SEO). Votre agence peut rédiger les textes pour vous — c’est un service distinct, généralement facturé en supplément. Dans tous les cas, les textes doivent être prêts avant l’étape d’intégration du contenu.

Que se passe-t-il si je ne suis pas satisfait du design proposé ?

Une bonne agence présente plusieurs directions créatives au premier tour, ou valide sa direction avec vous avant de produire les maquettes complètes. Si la direction ne vous convient pas, dites-le clairement dès la première ronde — c’est beaucoup plus facile à corriger à ce stade. Les désaccords de design qui s’expriment tardivement, en fin de projet, sont les plus coûteux à résoudre.

Pourrai-je modifier mon site moi-même après la livraison ?

Oui — c’est l’un des avantages fondamentaux de WordPress. Ajouter une page, publier un article de blogue, mettre à jour un texte ou changer une image ne nécessite aucune compétence technique. La formation que nous incluons dans chaque projet couvre exactement ces tâches. Pour les modifications plus importantes (restructuration de pages, nouvelles fonctionnalités), votre agence reste disponible.