Création de site internet : Les Étapes de réalisation
Le cahier des charges de votre site internet est rédigé, vous avez peut-être même déjà choisi votre agence web ? Créer un site internet demande de la méthode. Qu’il s’agisse d’un projet de création de site internet ou de refonte, quelles sont donc les grandes étapes de réalisation d’un site web ?
Certaines étapes sont optionnelles bien que recommandées, comme l’audit sémantique par exemple.
D’autres non abordées dans cet article comme la phase de rédaction des spécifications techniques sont nécessaires par exemple dans le cadre de projets complexes faisant appel à des échanges de données via des services tiers au travers de webservices ou d’APIs mais inutile dans le cas d’un projet de site internet vitrine.
Tout est fonction de la nature de votre “projet web”, de vos objectifs et de votre budget. Bien entendu si vous réalisez votre site ou votre blog personnel, vous pourrez sans doute faire abstraction de certaines étapes.
Mais dans le cadre d’un projet professionnel de création d’un site d’entreprise (corporate ou “boutique” e-commerce), les expertises complémentaires d’une agence web ou d’une agence digitale sont plus que recommandées, même si le site est réalisé sur un socle CMS WordPress !
Cet article se veut pragmatique mais non exhaustif. Si le sujet vous intéresse, au delà de cet article, vous pouvez également télécharger ici notre guide “Réussir son projet web” ou nous contacter.
Notre agence est basée à Nantes mais nous intervenons aussi en Vendée, à Angers, en région parisienne ou en Bretagne. Nous pourrons prendre le temps de parler de votre projet autour d’un thé, d’un café court ou d’un café frappé cet été !
En attendant de faire connaissance, vous pouvez déjà découvrir quelques réalisations de notre agence basée à Nantes mais intervenant en Pays de la Loire, Bretagne et région parisienne. Cette liste est non exhaustive nous avons réalisé plus de 1000 sites web en plus de 28 ans.
Vous souhaitez réaliser un site Internet à Rennes, Nantes, Angers, Cholet ou La Roche sur Yon (Vendée) ? Ne cherchez plus !
Phase d’analyse de l’existant et de la concurrence
Vous avez peut-être déjà réalisé cette étape importante. Chaque projet est différent, mais de manière générale elle consiste à analyser dans un premier temps votre site internet, sous différents angles comme par exemples :
- Réaliser un audit technique : Ce point est particulièrement important dans le cadre d’un projet de refonte sur un socle technique identique. Il est important d’avoir une vision claire des dysfonctionnements, limites ou points d’optimisations. Nous l’évoquons dans différents articles de notre blog, la “qualité du socle technique” a un impact sur le référencement de votre site (SEO) comme par exemple des pages en erreur 404, un plan du site XML absent ou mal configuré, des images ou des “balises META” absentes ou non optimisées ;
- Réaliser un audit sémantique : Bien que faisant partie des étapes et prestations optionnelles dans le cadre d’un projet de création ou de refonte, l’audit sémantique que nous abordons dans cet autre article, permet d’identifier des opportunités de mots clés.
Réalisé en amont de la phase de conception, il permet d’optimiser l’arborescence de votre site internet et de définir un plan éditorial clair et efficace en terme de SEO. Cet audit sémantique permet par exemple d’identifier avant d’avoir réalisé votre nouveau site, sur quels mots clés sont présents ou mieux placés vos concurrents.
Cela vous intéresserai de le savoir ? Vous voulez être visible dans les moteurs de recherche et attirer de nouveaux clients ? Et bien l’audit sémantique le permet, contactez-nous !
- Analyse de vos “metrics actuelles” : l’analyse de vos statistiques Google Analytics et de votre Google Search Console (GSC) fournie en général de précieuses informations trop souvent sous-exploitées sur les pages performantes de votre site, celles qui le sont moins (ou jamais visitées, c’est courant !), sur les parcours utilisateurs, etc.
Phase de conception de votre site internet
L’objectif de la phase de conception est de définir l’organisation de votre site, les parcours utilisateurs et la composition des “gabarits” (ou modèles de pages) en amont de la phase de maquettage.
Première étape, inventorier, classer et hiérarchiser vos contenus et éventuelles fonctionnalités et les traduire dans ce que nous appelons dans le jargon du web une arborescence.
L’arborescence est une représentation du rubriquage de votre site, à la manière d’un organigramme.
L’arborescence ne traduit pas de manière exhaustive la navigation. L’arborescence permet de structurer le contenu de votre site web. Un conseil, gardez toujours en tête vos personas lors de cette phase. C’est pour eux que vous allez créer ou refaire votre site !
Pour faire une analogie avec la construction d’une maison, l’arborescence est le “plan de masse”. Pardon pour cette déformation professionnelle, notre agence intervient également dans le domaine de la modélisation 3D, principalement dans le domaines de l’immobilier et de l’industrie !
Votre arborescence vous a permis de définir les différents gabarits de votre site (aussi appelés “templates”), disons par exemples pour simplifier la page d’accueil, une page contact et une page service ? Il vous faut maintenant concevoir ces différentes pages.
Selon le niveau de maturité de votre projet, il sera possible de représenter ces pages dans un premier temps au travers de “zonings” ou directement de Wireframes.
Les wireframes sont une représentation très précise mais filaire (traduire sans couleur, sans les vrais textes, etc) de vos différents modèles de pages.
Ces Wireframes réalisés par votre agence vont servir de support d’échange tout au long la phase de conception. Vous souhaitez un site à la navigation intuitive, qui répond aux attentes de vos clients et prospects et qui respecte les usages du web (expérience utilisateur appelé UX et critères SEO de Google).
Les wireframes constituent une étape majeure. Ils vont permettre de se projeter sur les différents parcours utilisateurs et sur ce que sera votre site !
Certains de nos clients ou prospects parfois impatients veulent sauter cette étape et souhaitent réaliser immédiatement des maquettes, parfois même dès la phase de consultation.
Cela est par nature très prématuré en terme de méthodologie de conception. Un conseil, ne négligez pas l’importance des wireframes !
L’arborescence est validée ? Les wireframes de tous les modèles de pages aussi dans leurs versions “Desktop” et “Mobile” (traduire leurs versions pour ordinateurs, tablettes et smartphones) ? Nous vous sentions impatients, passons à la phase de design graphique !
Phase de design et de maquettage graphique et de Webdesign. Place à la créativité !
Vous avez exprimé dans votre cahier des charges ou dans votre expression de besoin vos attentes graphiques ?
Lors de la réunion de lancement, un brief graphique webdesigner ou au directeur artistique ou au (ou à la directrice artistique !) permettra de les affiner (ex. expressions des attentes, références à d’autres sites, commentaires de la charte graphique existante, etc.).
Selon votre projet, la réalisation d’un moodboard pourra permettre de traduire les intentions graphiques de notre directrice artistique (chez nous elle se prénomme Chloé).
Une fois la direction artistique validée il est temps de réaliser les maquettes de tous les gabarits de pages de votre site là encore dans leurs versions “ordinateur” et “mobile”.
Cette phase de design permettra également de définir les “micro-interactions” (ex. changement de couleur d’un bouton (ou call to action) et les animations (ex. Effet d’apparition et de parallaxe des éléments de la page, etc).
Le choix judicieux des visuels, l’intervention d’un photographe, la réalisation d’illustrations, de pictogrammes voire d’un “motion design”donneront le ton, personnalisera votre communication et humanisera votre site !
Au delà des phases classiques de graphisme, notre agence de communication digitale est en mesure si besoin de vous accompagner également dans les phases de création d’identité graphique et de réalisation de votre logo.
Vous savez, tous ces petits détails subtils qui font toute la différence entre une page et une navigation “plate et insipide” et un site qui se démarque et qui offre une expérience utilisateur agréable et riche !
Phase de développement et de réalisation de votre site web
Toutes les étapes précédentes ont été validées. Vous venez de livrer à votre agence les contenus correspondant à l’arborescence et à toutes les maquettes et wireframes. Bravo ! Le temps de réalisation de cette phase de production de contenu est très souvent sous estimé.
Notez que si votre budget vous le permet, nos rédacteurs web peuvent aussi vous accompagner si besoin ! Outre un gain de temps pour vous, nos rédacteurs sont rodés à l’écriture web et au SEO. C’est un plus pour votre visibilité !
C’est maintenant l’affaire des développeurs et intégrateurs web. Le développement d’un site demande de la rigueur et fait appel à de multiples expertises.
Les développeurs web auront donc la charge de réaliser votre site et d’intégrer l’ensemble des contenus des pages (textes, images, illustrations, vidéos, etc) dans le cadre du périmètre du livrable défini au lancement du projet et de développer les fonctionnalités attendues.
À l’issue de cette phase de développement, nous procédons à différents tests (conformité du livrable au périmètre défini, tests de qualité du code HTML, audit technique orienté SEO, tests de performance, etc.)
Phase de recette client et de mise en ligne
C’est à vous de jouer ! Nous venons de vous livrer votre site sur un environnement dit de “pré-production” (traduire le même que le futur site en ligne mais non accessible). Vous pouvez désormais passer en revue l’ensemble des pages du site et transmettre vos éventuels retours ou “micro calages”.
Nous allons pouvoir vous former à la gestion de contenu et à l’utilisation du “back-office” de votre CMS WordPress pardon mais WordPress est notre solution web CMS préférée !
Afin de vulgariser, un CMS pour Content Management Solution en anglais est un “logiciel de création web dont l’interface est accessible en ligne”. Il vous permet une fois le site en ligne de gérer avec une grande facilité les contenus et médias de votre site (images, textes, vidéos, etc). La solution WordPress est la solution la plus utilisée dansle monde, y compris par des grandes marques et des sites renommés.
Votre hébergeur et votre webmaster ont configuré les environnements d’hébergement, le plan de redirection est en place (nous sommes également hébergeur web depuis plus de 26 ans, cela simplifie votre projet et c’est un gage de fluidité et réactivité) ?
La redirection de vos noms de domaine est calée ? Google Analytics est configuré ?
Tout est OK ? Il est temps de mettre le site en ligne, en production donc dans le jargon informatique. Nous sommes tous très impatients et vous aussi ! Mais c’est ici que tout commence, nous vous apportons aussi notre expertise en matière d’acquisition de trafic via les leviers SEO et SEA.
Envie de vivre cette aventure avec nous ?