Les 8 commandements d'un processus de conception Web (pour les débutants et sans code)
Publié: 2021-11-01
Découvrez comment vous pouvez créer un site Web réussi en suivant un processus de conception de site Web structuré.
Notre hypothèse est que vous avez déjà trouvé un nom de domaine et un hébergeur.
Si vous n'avez pas encore choisi votre hébergeur, nous vous recommandons vivement notre partenaire Cloudways .
Dans l'exemple ci-dessous, les étapes sont présentées pour le cas où vous créez un site Web pour vous-même. Si le site Web est destiné à un client, de nouvelles étapes peuvent survenir en termes de planification de projet, de configuration des délais, de contrat, etc. Mais à la base, vous devrez toujours vous en tenir aux étapes présentées ci-dessous.
Maintenant, voici les étapes :
- Identification du périmètre : à quels besoins le site web doit-il répondre ? À qui le site Web parle-t-il? Quels sont ses objectifs et ses motivations ? Quelles entreprises ont la même portée et le même public cible que vous ?
- Définir le sitemap du site Web : quelles sont les pages Web et les fonctionnalités qui aident l'entreprise et l'audience à atteindre leurs objectifs ?
- Création de contenu : préparation de la copie des pages du site Internet ;
- Création de la marque visuelle : préparation de la palette de couleurs, des polices et des graphiques à utiliser dans la conception de votre site Web, qui finiront par façonner votre identité visuelle ;
- Wireframing : esquisse de la mise en page de vos pages Web ;
- Conception du site Web : créer le site Web proprement dit, être conscient des limites des outils que vous utilisez ;
- Tests : s'assurer que tout fonctionne, des liens aux formulaires et aux boutons. Testez le site Web sur différents navigateurs et appareils pour vous assurer qu'il fonctionne correctement ;
- Lancement : faites du bruit avant la mise en ligne avec une stratégie de communication soigneusement planifiée.
Prenons-les un par un.
Les étapes d'un processus de conception de site Web
1. Identification de la portée
À ce stade, vous et votre équipe devrez trouver les réponses à certaines des questions ci-dessous :
- A qui s'adresse le site ?
Un site Web accrocheur peut avoir ses avantages, mais si vous voulez que les visiteurs de votre site Web engagent leur argent ou leur temps, cela signifie que vous devez creuser davantage, afin de les convaincre que l'engagement en vaut la peine. Pour être convaincant, vous devrez comprendre votre public cible, comprendre ses besoins, ses motivations internes et externes.
Ce creusement signifie également que vous devez créer un produit qui est utile et résout le besoin de quelqu'un.
Par exemple, disons que j'ai un passe-temps de faire des compositions florales en papier et que je veux aller plus loin et le transformer en une entreprise. Est-ce que quelqu'un fait des fleurs en papier ? Où puis-je trouver ces personnes ?
Eh bien, je pourrais penser que les planificateurs de mariage et les futures mariées pourraient vouloir une telle option.
Mais je dois aller encore plus loin. Est-ce que toutes les mariées voudraient mes fleurs en papier ou juste un type de mariée ?
Cela signifie que vous devrez effectuer des recherches et vérifier vos concurrents. Existe-t-il d'autres marchands de fleurs en papier ? Vous rivalisez aussi avec les bons vieux fleuristes. Quelle serait alors votre valeur ajoutée, ou votre proposition de valeur unique ?
- Qu'est-ce que les visiteurs de votre site Web s'attendraient à trouver sur votre site ?
Pour en revenir à notre exemple, vos visiteurs voudront probablement voir une variété de produits, de couleurs, des informations sur l'expédition (ils pourraient avoir besoin d'un peu plus de soin car les fleurs en papier sont fragiles), etc. Qu'en est-il de certaines mentions que le papier est recyclé ? Peut-être que vos clients sont très conscients de leur impact sur l'environnement et qu'ils se soucient de ces détails
Quelqu'un peut-il aussi louer les fleurs ?
Et si vous incluiez des témoignages ? Peut-être avez-vous conçu des compositions florales en papier pour les mariages de vos amis.
Vous voyez où je veux en venir ? Vous devez faire vos recherches avant de vous lancer dans la conception du site Web.
- À quoi ressemblent les conversions ?
Parlons-nous d'une inscription à un cours, de l'achat d'un produit, d'un abonnement à une newsletter ?
Dans le cas du lundi, vous pouvez facilement comprendre leurs conversions à partir de la page d'accueil. 
La conversion principale est évidente à partir de l'appel à l'action "Commencez", qui est positionné juste au-dessus du pli, au centre.
Une autre micro-conversion est une inscription à une conférence, que vous pouvez remarquer à partir du message dans le coin supérieur gauche.
Une autre micro-conversion est celle du « Contact commercial ».
Qu'en est-il de votre site Web, y a-t-il une conversion principale ? Y en a-t-il des secondaires ?
- À quoi ressemble le parcours client ?
Une carte de parcours client est une représentation visuelle du chemin parcouru par un visiteur sur votre site Web depuis son entrée, jusqu'à ce qu'il atteigne l'objectif souhaité et parte.
Une carte du parcours client doit inclure des informations telles que les pages visitées et dans quel ordre, les étapes nécessaires pour qu'un visiteur du site Web atteigne ses objectifs, les points d'interaction entre votre entreprise et les visiteurs du site Web (formulaires, chat, etc.), points de friction potentiels.
Un parcours client n'est pas figé. Vous commencez par une hypothèse, puis vous ajustez en cours de route. Vous pouvez utiliser des outils tels que Google Analytics pour analyser le comportement du site Web et effectuer des optimisations basées sur des informations réelles.
2. Définir le sitemap du site 
La source
Maintenant que le parcours client est clair, il est temps de créer le plan du site. Le plan du site d'un site Web est utilisé pour établir l'architecture de l'information du site Web et explique les relations entre les différentes pages.
Vous pouvez créer des plans de site dans des outils allant d'Excel à Figma.
3. Création de contenu 
Maintenant que la structure du site Web est établie, il est temps de créer du contenu pour les pages individuelles.
Voici quelques bonnes pratiques en matière de rédaction :
- Utilisez des mots et des concepts familiers à vos utilisateurs idéaux ;
- N'allez pas avec des peluches et du jargon;
- Essayez de communiquer comme vous le feriez lors d'un face-à-face normal. De cette façon, vous induisez un sentiment de familiarité ;
- Écrivez au présent et évitez la voix passive;
- Vérifiez toujours votre lisibilité. Pour cela, vous pouvez utiliser des outils tels que Readable .
- Testez vos titres avec des amis, des inconnus, des collègues. Comme le dit David Ogilvy :
"En moyenne, 5 fois plus de personnes lisent le titre que le corps du texte. Lorsque vous avez écrit votre titre, vous avez dépensé quatre-vingts cents sur votre dollar. »
Cela signifie que les titres sont essentiels sur un site Web.
Essayez d'optimiser votre contenu autour de certains mots clés pertinents pour votre audience (SEO). Vous pouvez utiliser des outils tels que Google Trends (gratuit ), Ubersuggest (gratuit) ou Ahrefs (payant).
- Utilisez le cadre de rédaction AIDA.
A – Attention : créez un contenu qui attire l'attention, qui incite à la curiosité, et qui convainc votre public qu'il a besoin d'en savoir plus sur votre marque.
I – Intérêt : donnez à vos visiteurs une raison de rester engagé. La clé ici est de rendre le problème personnel afin que vous ne parliez qu'au prospect et à personne d'autre.
D – Désir : c'est ici que vous montrez aux visiteurs de votre page d'accueil comment vos offres apportent une solution à leur problème/douleur. Ici, vous pouvez commencer à expliquer les fonctionnalités de votre produit, en mettant l'accent sur la façon dont ces fonctionnalités peuvent améliorer leur vie.
A – Action : il est maintenant temps de persuader les prospects d'agir : acheter, s'abonner, télécharger un freebie, démarrer un essai, etc.
4. Création de la marque visuelle
Cette étape ne doit pas toujours être votre 4e étape. Vous pouvez commencer encore plus tôt dans le processus avec ceci.
L'identité visuelle fait référence à la façon dont vous façonnez la perception autour de votre marque.
C'est tout un processus en soi.
Ici, vous devrez :
- Définissez à quoi vos graphiques doivent ressembler. Utiliserez-vous des formes, des graphiques 3D, des illustrations ?
La source
- Définir la typographie de votre site Internet ;
La source
- Choisissez une palette de couleurs . À partir de la palette de couleurs, vous pouvez évoluer vers un guide de style, où vous pouvez établir les couleurs des liens, des titres, des boutons, des arrière-plans, etc. pour cela, vous pouvez utiliser des outils tels que la roue chromatique d'Adobe .
La source
- Organisez des images qui racontent l'histoire de votre marque ;
Source : https://convertsquad.com/blog/
- Concevez votre logo
La source
- Préparer les actifs physiques (emballage des produits, etc.).
La source
La plupart des éléments ci-dessus peuvent être utilisés pour créer un moodboard. Lorsque vous rassemblez vos polices, vos graphiques et vos couleurs dans un tableau d'humeur, vous serez en mesure de mieux comprendre la vision globale de l'humeur du site Web. Quel sera votre ton général et votre voix : clair ou sombre ? Formel ou ludique ? 
La source
5. Maillage filaire 
La source
Les wireframes sont des esquisses d'une page Web ou d'une application. Vous pouvez les dessiner à la main, les créer dans Google Docs, Sketch ou Figma , selon la complexité de votre site Web. Une structure filaire est utilisée pour mettre en page le contenu et les fonctionnalités d'une page. Il devrait indiquer à un concepteur où il doit placer une vidéo, des images, des titres, des blocs de contenu, des boutons, etc. Il est bon d'utiliser des wireframes avant de se lancer dans la conception car ils vous permettent d'être plus flexible. Il est plus facile de modifier la structure d'un wireframe que celle d'un site web tout prêt.
6. Conception du site Web 
La source
Maintenant on parle affaires !
Nous avons notre contenu, nos wireframes, nos éléments visuels, il est maintenant temps de se mettre au travail.
Comme mentionné dans le titre, vous n'avez pas besoin d'être un concepteur Web ou un geek du code pour créer un site Web. Il existe de nombreux outils pour vous aider à concevoir un site Web sans code. Ils sont appelés constructeurs de pages.
La plupart d'entre eux vous permettent de personnaliser chaque centimètre de votre conception et de la rendre réactive.
Dans WordPress, vous pouvez utiliser notre propre constructeur Colibri, ou Elementor, par exemple. En dehors de WordPress, Wix et Squarespace sont très populaires. Ces outils peuvent vous fournir des modèles, que vous pouvez enrichir en ajoutant vos propres sections, visuels et contenus.
Maintenant, si votre conception nécessite certaines animations, certains effets, vous devrez peut-être ajouter du code.
7. Tests
Ok, disons que votre contenu et vos visuels sont en place. Votre travail n'est pas encore prêt. Il est temps de s'assurer que tout fonctionne : vous n'avez aucun lien qui ne mène nulle part (c'est-à-dire des liens brisés ou 404), que tous vos boutons et formulaires fonctionnent, que le site Web s'affiche bien sur la plupart des navigateurs et appareils.
Maintenant, avant le lancement, vous pouvez tester un peu la façon dont votre site Web est perçu par des personnes externes. De cette façon, vous pouvez éviter d'être pris dans vos propres préjugés. Pour cela, vous pourriez faire une recherche utilisateur simple : le test des 5 secondes . Il s'agit d'une méthode qui vous aide à mesurer quelle est la première impression que les utilisateurs obtiennent dans les cinq premières secondes suivant l'affichage d'une page d'accueil, par exemple
8. Lancement
Maintenant, lorsque vous lancez, il vous suffit de cliquer sur publier et vous avez terminé. Non, vous devez créer du buzz, lancer des campagnes de relations publiques, faire un cri sur les réseaux sociaux pour faire savoir aux gens que vous êtes absent !
Et c'est un enveloppement les amis. Vous avez maintenant les bonnes étapes pour un processus de conception Web.
Bonne création de site Web !
Si vous avez aimé cet article et que vous souhaitez en savoir plus sur la conception d'un site Web WordPress , assurez-vous de vous abonner à la chaîne Youtube de Colibri et suivez-nous sur Twitter et Facebook !