Comment créer son site web, les étapes à suivre pour un projet digital réussi.
Malheureusement, tout ce flot d’information t’a un peu perdu et tu ne sais pas par quoi commencer.
Chez Eid Lab nous te donnons les informations nécessaires à l’élaboration d’un site web étape par étape, et dans l’ordre !
Commençons par le béaba d’un projet réussi : l’organisation !
Planifier et organiser son projet web.
Pour concrétiser ton projet, il te faut le planifier. Cela te permettra de gagner du temps lors de la réalisation de ce dernier.
Commence par analyser ta situation, par exemple :
Je viens de lancer mon entreprise ou mon activité freelance et je pars de zéro.
J’ai déjà une activité et j’aimerais passer à l’étape suivante en créant mon site.
J’ai déjà un site web, mais il ne correspond plus à mes valeurs et/ou mes besoins.
En fonction des étapes que tu as franchies, tes besoins peuvent varier.
Dans un premier temps, tu dois impérativement établir un cahier des charges dont les points principaux sont :
Vision
Objectifs
Valeurs
Cible
Cela représente la stratégie à l’origine de la conception de ton site internet, quels sont tes objectifs et à quoi est-il censé servir, que va-t-il apporter à ton audience ?
Si tu pars de zéro, commençons par l’essentiel : Ta charte graphique, qui sera le symbole de ton identité de marque.
Pour ceux qui possèdent déjà une charte graphique, on se retrouve plus bas pour le deuxième point « Maquettes, design et contenu ».
Définir sa charte graphique
Première étape, pour créer son site web, il est important de commencer par l’élaboration de sa charte graphique.
💡
Charte graphique : Ensemble des éléments qui définissent l’identité visuelle d’une marque ou d’une organisation. Cela comprend notamment un nuancier (définition des couleurs) et le logo.
Si tu n’as pas ces éléments, tu dois les créer ! Soit par toi-même, soit avec l’aide de professionnels.
Ne te décourage pas, c’est la partie la plus fun de ton projet ! Allez, pour t’aider, voici les différentes options pour créer ton identité visuelle :
Tout existe sur internet ! Plusieurs sites web peuvent t’aider à créer ta propre charte graphique comme youlovewords qui propose des modèles prédéfinis. Laisse parler ta créativité et explore les différents thèmes pour les façonner selon tes goûts et tes besoins.
Par toi-même ! Si tu as une appétence pour le dessin, il est possible de créer tout cela, maison. Avec un peu d’huile de coude et des logiciels tels que Canva ou Adobe Illustrator. Veille à créer une palette de couleur cohérente et variée. Aide-toi des outils comme coolors et paletton pour créer ton nuancier.
Dernière option, tu peux faire appel à un graphiste ou à un designer web. Il te sera très utile d’être accompagné dans cette étape. Des règles de couleurs et de contrastes sont à respecter pour une meilleure accessibilité. Ton référencement n’en sera que meilleur et ton site ouvert a tous.
C’est fait ? Ton identité visuelle est prête ? Passons à la suite.
Maquettes, design et contenu
Pour construire un site web, les développeurs ont besoin de maquettes ! Sans ça… ils sont perdus.
Blague à part, les maquettes permettent de définir ce qui va composer ton site, ainsi que la place de chaque élément.
Design et maquettes
Cette étape est super importante, car une maquette mal conçue ou qui ne répond pas à tes besoins pourrait engendrer quelques soucis lors de la conception de ton site.
Comme de nombreux aller-retour entre l’équipe de développement et le/la maquettiste. Bien évidemment, des modifications peuvent être apportées au cours de la confection de ce dernier, mais un projet bien préparé est un projet bien rodé.
Les solutions gratuites et accessibles sont nombreuses sur le net, car l’état d’esprit de nombreux designers et de beaucoup de développeurs est de laisser en libre accès leur création, on appelle ça de l’open source !
Voici quelques outils disponibles sur le web pour concevoir tes propres maquettes à partir de templates.
Le site nicepage propose plus de 10 000 maquettes de sites web, gratuites. Tu peux également t’inspirer des modèles disponibles sur Pinterest ou freepik.
Véritable mines d’informations, ces sites peuvent t’être d’une grande utilité.
Là, tu te dis que c’est bien gentil d’avoir des modèles de maquettes, mais comment fait-on pour construire son propre visuel !?
Eh bien, j’ai l’outil idéal pour que tu puisses concevoir toi-même la maquette de tes rêves.
Figma ! Outil largement utilisé dans le monde du web par les designers et développeurs. Ce site web te propose un large choix de templates (gratuits et payants) en plus de te donner la possibilité de composer tes maquettes.
Sur Figma, une grande page blanche s’ouvre devant toi — pour de vrai.
Pour les plus créatifs, c’est une aubaine ! Imaginer, concevoir, modifier, selon ses goûts et ses envies, sa propre partition.
Pour les moins aguerris, pas de soucis. Il faut intégrer un modèle préconçu à cette page blanche et il ne reste plus qu’à t’amuser à le modifier ou carrément le déconstruire !
Petit conseil pour une meilleure accessibilité de ton site web. Veille à garder ton texte lisible. Pour cela, les contrastes entre ta couleur de fond et celle de ton texte doivent être équilibrés — voici l’outil qui va te permettre de ne pas faire la faute : contrast checker !
La disposition de tes éléments joue également un rôle dans la compréhension de ton activité.
Afin d’amener ton client à prendre contact avec toi ou commander ton produit, il te faut respecter la technique dite « de l’entonnoir » afin de mettre le bon message au bon endroit, et placer ton « call to action » au bon moment. Ho ! Tu as une touche !
Encore une fois, tu as la possibilité de franchir cette étape en étant accompagné. Designers et professionnels de l’UX/UI peuvent concevoir des maquettes adaptées à tes besoins et en respectant ta charte graphique !
Cette option te permet de te concentrer sur l’aspect visuel de ton site et tes besoins. Laisse le designer te proposer les solutions les plus adaptées pour attirer l’œil de tes clients.
Le contenu
Le contenu de ton site varie en fonction de ton produit ou de ton service.
En effet, tu ne proposeras pas le même contenu à ton audience en fonction du domaine d’activité de ton business.
Les photos et vidéos peuvent servir à exprimer ce qui ne peut être dit ! Comme transmettre des émotions, montrer tes talents de dessinateur, de photographe ou d’architecte. Il ne faut également pas négliger le visuel de ton site lorsque celui-ci est destiné à vendre des produits.
Je ne t’apprends rien, lorsque l’on voit une belle image cela attire notre œil et notre attention.
Mais un bon contenu ne se résume pas non plus à de belles photos.
La rédaction est d’une importance capitale, car elle permet aux lecteurs de s’identifier et est amenée à appuyer ton expertise. Les mots sont puissants, utilise-les.
Dans ces deux cas, il est possible de créer ce contenu toi-même si tu as des connaissances dans le domaine de la photo, de la vidéo ou du montage.
Tu peux également faire appel à un ami amateur ou passionné en échange d’une sortie en terrasse ou d’un service par exemple !
Pour la rédaction de contenus, soit vigilant aux mots que tu emploies, ils ont bien souvent un impact fort. La langue française regorge de vocabulaire, car nous aimons préciser à quel point la nature est belle, florissante et sauvage — vous avez compris l’idée. Si tu bloques sur la rédaction, aide-toi des intentions de recherches des internautes sur les moteurs de recherche en utilisant ubersuggest ou encore Keyword Surfer.
Mieux encore, tu peux faire appel à un copywriter. Cette personne étudie de près la langue française et les sciences cognitives. Ce qui peut être très utile lorsque tu veux amener tes clients à passer une commande ou prendre un rendez-vous.
Le développement de ton site web
Maintenant que tu as toutes les cartes en main pour concevoir ton propre site web il te faut les mettre en application !
Une fois que tu as défini la charte graphique de ton image de marque, tu vas pouvoir l’appliquer de partout !
Pour la réalisation de ton projet digital, tu as accès à différents outils.
Si tu souhaites créer ton site web gratuitement — ou presque, car il faut tout de même payer l’hébergement de celui-ci — des plateformes en ligne peuvent te venir en aide (Wix, Webflow, WordPress, etc.). Si tu ne connais pas la différence entre tous ces CMS et outils « pur no code » tu peux aller voir notre article sur le sujet, juste ici :
Choisis le bon type de site web pour ton projet !
Un site vitrine, un site e-commerce, un marketplace ou une application sur-mesure ? Découvre tous les types de site web pour concrétiser ton projet digital.
Ces outils te permettront de choisir des templates adaptés à tes besoins, tu pourras alors les personnaliser selon ta charte graphique (couleurs, formes, etc.).
En revanche, pour un site sur mesure qui répondra parfaitement à tes besoins et tes envies nous te conseillons de te tourner vers un développeur freelance expérimenté — pour éviter les surprises —, un studio de développement ou une agence web.
Quelle différence ?
Contrairement à un outil préconçu, les freelances et studios de développement pourront t’accompagner dans TOUTES les étapes de ton projet digital.
Cela comprend les étapes que nous avons citées en amont et plus encore :
Le conseil et l’expertise : Tu souhaites créer un site web ou une application, car tu as les connaissances et l’expertise nécessaires pour répondre aux demandes de tes clients ? Pour le développement web, c’est la même chose. Le monde du digital n’a pas de secret pour nous et les règles à respecter sont nombreuses.
Le petit bonus avec une équipe à tes côtés c’est que tu n’es pas seul•e face à la prise de décision. Tu débordes d’idées, tu penses à des évolutions qui raviront toutes les personnes qui te suivent, mais… comment les mettre en application sur ton site web ? C’est là que le freelance ou l’agence web intervient. Les meilleures solutions, pour répondre à ton besoin, te seront proposées. Tu n’auras plus qu’à choisir celle qui convient le mieux à tes envies et ton besoin d’évolution.
La rapidité et la réactivité : Le temps c’est de l’argent, si tu passes du temps à concevoir ton site web alors que ce n'est pas ton point fort — ça arrive, et ce n’est pas grave — une agence peut te faire gagner ce temps. Nous sommes bien d’accords, faire appel a des professionnels à un coût. Cela ne t’empêche pas de démarrer ton activité avec un site préfabriqué pour ensuite demander un coup de pouce à une personne expérimentée — attention de bien utiliser des outils CMS si tu prévois de faire rapidement évoluer ton site web.
Le SAV : Comme dans tout échange commercial, nous tenons tous fortement au service après-vente ou à la fameuse garantie ! Si ton site rencontre des difficultés lors de la mise en ligne ou des pertes de performances, c’est toujours agréable qu’une personne soit mandatée pour arranger tout ça. Il peut arriver que ton site soit « down » avec affiché en gros « ERROR 404 », ce n’est pas bon signe… Si les moyens te manquent, pas de panique. Fais appel à ton entourage ou demande à un freelance quelques heures de son temps pour t’aiguiller ! Car, à cœur vaillant, rien n’est impossible !
Revenons à nos moutons et poursuivons sur les étapes de conception de ton site !
Test, optimisation et validation
On pourrait se dire que tester son application à la fin est le meilleur moyen de régler tous les problèmes d’un coup…
Méfiance, il vaut mieux tester tes fonctionnalités tout au long de la création de ton site internet. Cela évite les surprises !
Les tests et la validation
Dans beaucoup d’agences web, des tests sont effectués régulièrement, cela permet de tester les fonctionnalités et supprimer les bugs.
Ces tests peuvent être automatisés, ils assureront le bon fonctionnement des évolutions apportées à ton application web et éviteront la régression de ton site dans la durée.
Une fois que toutes ces batteries de tests sont finalisées, ton site est alors validé.
Attention ! Ne pas oublier qu’un site web n’est pas à l’abri d’un bug.
Car, il n’y a pas de bugs tant qu’on ne les a pas trouvés ! Tout ne s’anticipe pas, des retours réguliers sur l’utilisation sont nécessaires pour un site web optimal.
L’optimisation
Une fois que ton site est bien ficelé et exempt de bugs visibles, il est primordial de l’optimiser à son maximum !
Comment fait-on ça ?
Tout d’abord, il faut penser à améliorer le référencement naturel de ton site web. Cela comprend l’utilisation de bons tags — mots descriptifs utilisés pour optimiser le référencement naturel de ton contenu : photo, vidéo, texte.
L’optimisation passe également par l’emploi de mots-clés pertinents et bien placés. Par exemple, dans le titre principal, dans un titre secondaire et environ tous les cent mots.
Le référencement naturel est seulement l’un des piliers de l’optimisation. Car un site web se doit également d’être performant.
Quésaco ?
Toi aussi tu utilises le web pour faire des recherches ou des démarches… quand le site web sur lequel tu te trouves ne fonctionne pas bien, qu’il est lent ou que les éléments se décalent. On est d’accord, ce n’est pas très agréable et tu as envie de te sauver en courant — sauf sur les sites administratifs ou tu n'as pas le choix.
Eh bien là, c’est pareil. Mets-toi dans la peau de tes lecteurs ou de ton client. Si les performances de ton site sont mauvaises, les utilisateurs risquent de fuir - churn en langage marketing - et c’est un gros manque à gagner pour ton business !
Plus ton site sera optimisé au niveau du temps de chargement et du délai d’interactivité, plus l’expérience utilisateur (UX) sera agréable !
Dernier point, mais pas des moindres, l’accessibilité.
Sur internet comme dans la vie de tous les jours, nous négligeons bien trop souvent l’accessibilité des services aux personnes atteintes de handicap — personnes malentendantes ou malvoyantes, etc.).
Des règles sont à respecter — notamment sur les contrastes de couleur — pour une utilisation facilitée.
Veille également à implanter des éléments natifs — de base — et des tags pertinents pour permettre aux lecteurs automatiques de bien cerné les intentions de ton site web et ainsi faciliter l’accessibilité de ce dernier.
Hébergement et mise en ligne
Nous abordons l’avant-dernière étape de la création d’un site web. Tu y es presque, bientôt ce site sera en production !
L’hébergement et la mise en ligne sont des sujets peu évoqués lorsque l’on ne fait pas partie du milieu digital.
C’est pourquoi je t’invite à lire attentivement ce passage, car il te permettra de comprendre comment fonctionnent les coulisses des agences de développement.
L’hébergement
Pour les outils « no code » et CMS présents sur le web, la fonctionnalité concernant l’hébergement est proposée, moyennant bien évidemment un coût supplémentaire. Cette fonction est payante, elle est bien souvent suggérée via un système d’abonnement.
Lorsque vous passez par un développeur freelance ou une agence web deux options sont possibles, en fonction des services proposés :
La première option est la même que pour les CMS, vous devez payer l’hébergement vous-même. Ce coût peut être mensualisé ou annualisé.
Les agences utilisent des hébergeurs correspondant à leurs besoins selon plusieurs critères et différents tarifs. Ces derniers peuvent aller de moins de deux euros par mois jusqu’à, environ, douze euros par mois.
La deuxième option est de laisser l’agence gérer l’hébergement — sous certaines conditions l’hébergement peut être gratuit pour les professionnels.
Mise en garde : si tu ne payes pas l’hébergement, cela signifie que tu ne possède pas forcément le droit légal de modifier ton site web. Les droits seront attribués à l’agence qui assure l’hébergement. Si tu souhaites faire des modifications ou si tu demandes à un ami — une autre agence — d’intervenir sur ton site, cela ne sera possible que si l’agence qui a créé l’outil donne son accord.
Nous te conseillons donc d’assurer l’hébergement par tes propres moyens pour quelques euros par mois, car tu auras plus d’autonomie et de liberté !
La mise en ligne
Tout est prêt ! Ton site est à ça -- d’être ouvert au public !!
Quelle excitation de pouvoir avoir tous ces retours et un site web rien qu’à toi pour parler de ton business.
Le but de la mise en ligne, ou le déploiement dans le jargon de la tech, c’est de transformer le code de base en code lisible par la solution d’hébergement choisie.
Chaque hébergeur possède son système de déploiement, pouvant aller du simple bouton cliquable à une manipulation plus technique en lançant le terminal de ton ordinateur et programmer le déploiement toi-même.
Information : Pour les personnes les plus expérimentées, bien souvent le déploiement via ton ordinateur est bien documenté et guidé. N’hésite donc pas à te référer à des tutos et autres guides d’informations.
Nous voilà au pied de la dernière étape de la création d’un site web.
Ne lâche rien, nous sommes au bout du parcours !
Veille et maintenance
Pour un site web en bonne santé et qui dure dans le temps, il faut veiller à une bonne maintenance.
Pour qu’un site internet ne soit pas inutilisable ou obsolète, il faut le maintenir à jour régulièrement.
Que cela concerne son contenu ou ses performances.
Comme nous l’avons évoqué plus haut, plusieurs petits grains de sable peuvent nuire au bon fonctionnement de ton site. Des bugs peuvent ressurgir d’outre-tombe et ralentir la qualité d’exécution de ton application.
Sans même parler de dysfonctionnement, des mises à jour doivent être réalisées pour une optimisation totale de l’outil. Tu peux également avoir recours à des évolutions pour répondre aux besoins de tes utilisateurs ou veiller au bon déroulement de ton business plan.
Si tu as créé ton site seul•e la maintenance et la veille feront partie de tes nouvelles missions. Interroge tes proches et tes utilisateurs pour savoir comment ils perçoivent ton site et ce qui pourrait être amélioré.
Si tu as eu recours à une agence web, elle te proposera de réaliser la maintenance suivant tes besoins et les besoins du site internet.
N’hésite surtout pas à naviguer toi-même sur ton site pour relever les éléments à améliorer. Le monde du digital évolue rapidement, tous les retours te seront nécessaires, car il ne faut surtout pas négliger l’expérience utilisateur !
Voilà, nous avons fini de dérouler étape par étape la création d’un site web, que dis-je, de ton site web !
Si tu veux aller plus loin, tu peux consulter notre livre blanc : Création d'un site web professionnel : étapes clés et bonnes pratiques
