Conception d'un site Web pour les débutants

1. Définissez les objectifs et les priorités avant de vous lancer

Lorsque beaucoup pensent à la conception et au développement Web réussis, ils pensent aux noms de domaines, aux hébergeurs Web fiables, aux palettes de couleurs de sites Web et aux systèmes de gestion de contenu. Cependant, avoir des priorités claires est la clé d’une conception réussie pour un site Web. Démarrez votre projet de site Web en déterminant ce qui intéresse le plus votre entreprise afin de savoir ce que votre site Web doit inclure.

"Notez à quoi ressemble le succès et travaillez à partir de cela", dit Jonathan. "Ce processus vous aidera à décider ce qui constituera votre site."

Il peut être utile de regarder sur d’autres sites Web de votre secteur pour trouver de l’inspiration en matière de conception. Parcourez leurs pages et prenez note des informations qu’ils fournissent, de la façon dont ils présentent leurs marques et ce qu’ils offrent pour attirer et garder l’attention des visiteurs. Notez ce qui fonctionne bien selon vous et ce que vous voulez mieux faire avec votre propre conception.

Cette liste d’éléments importants de site Web vous aidera à créer un plan de site. Un plan de site, comme son nom l’indique, cartographie votre site Web en établissant vos pages et la façon dont elles se relieront les unes aux autres, et vous aidera à établir votre architecture d’informations plus tard.

Pensez à inclure ces types de pages Web de base sur votre site.

• Page d’accueil :
  

Il s’agit de la page principale de votre site Web, donc ce sera souvent la première page que les nouveaux visiteurs verront. Ils doivent voir les informations les plus importantes dont ils ont besoin en premier pour comprendre ce que vous proposez et facilement savoir que faire ensuite.

• À propos de nous :
  

Ici, les visiteurs peuvent découvrir les informations de base sur votre entreprise : comment vous avez commencé, l’endroit où vous êtes basé, votre mission et les profils des meilleurs membres de votre équipe. Vous pouvez également inclure des liens vers les horaires d’ouverture et les emplacements des boutiques (si vous les avez), vers des pages de réseaux sociaux et les coordonnées.

• Services :
  

Suivant ce que fait votre entreprise ou votre organisation, une page avec de brèves explications des services que vous proposez ou un contenu visuel de vos produits et des liens vers des pages détaillées pour en apprendre davantage sur ces services peut s’avérer très utile pour les nouveaux visiteurs.

• Carrières :
  

Si vous avez souvent besoin de nouveaux membres d’équipe, envisagez une page où vous pouvez mettre en avant les postes disponibles ou un formulaire avec lequel les intéressés peuvent se renseigner sur les postes vacants.

• Blog :
  

Si vous publiez régulièrement du contenu, une page de blog peut être un emplacement central pour les visiteurs. Il peut inclure des mises à jour de produits ou de services, des articles liés à ce que vous proposez, des profils de nouveaux projets et tout autre contenu qui aidera à informer les visiteurs du site Web concernant votre organisation.

2. Concevez une maquette fonctionnelle pour visualiser votre site Web

Une maquette fonctionnelle est une structure schématique pour votre site Web. Tout comme un plan pour une maison, elle vous donne un aperçu en deux dimensions de la mise en page, de la structure et du fonctionnement de votre site Web.

Les maquettes fonctionnelles peuvent être créées simplement avec un crayon et du papier, ou de façon numérique avec des outils de conception de site Web ou un créateur de site Web qui peuvent vous aider à communiquer de manière visuelle la structure de votre site. Il existe trois types de maquettes fonctionnelles et à mesure que vous développez votre site Web, vous pouvez passer d’une étape à l’autre afin d’obtenir plus de "fidélité" ou de détails, tout au long de votre parcours.

• Les maquettes fonctionnelles de faible fidélité : Ces croquis préliminaires, qui ont généralement des formes simples et un texte d’espace réservé, sont parfaits pour mapper le flux de navigation. "Lors de cette étape, concentrez-vous uniquement sur le contenu et la façon dont l’utilisateur interagit avec, plutôt que sur l’apparence réelle du site", dit Jonathan. "Il s’agit du niveau de planification donc tout ce dont vous devez vous soucier, c’est de fournir un croquis du site Web et réfléchir à la hiérarchie."

• Les maquettes fonctionnelles de moyenne fidélité : Lors de cette étape, vous n’avez pas encore d’images ou de texte en direct. Vous créez des rendus en noir et blanc qui montrent une représentation précise de la mise en page du site Web. Il existe des outils disponibles pour créer des rendus qui offrent des essais gratuits, comme Sketch ou Balsamiq. "Cette étape constitue le squelette de votre site Web", indique Jonathan. "Vous n’avez pas besoin de conception spécifique ; simplement de lignes épurées et d’un dimensionnement précis."

• Les maquettes fonctionnelles de haute fidélité : Lors de cette dernière phase de la conception, vous créez une maquette qui ressemble à votre site Web réel, avec des images, un jeu de couleurs et une vraie copie. Vous pouvez désormais concevoir des éléments comme vos menus et votre contenu interactif. "C’est là que vous ajoutez de la couleur et une copie, mais ne confondez pas cette maquette avec un prototype en état de fonctionner", dit Jonathan. "Ce n’est toujours qu’un exemple de la hiérarchie de votre site Web."

3. Réalisez la conception en gardant votre audience à l’esprit

À mesure que vous progressez dans les phases de la conception du site Web, concentrez-vous sur la création d’un atout pour servir votre audience. Après tout, c’est votre objectif. Assurez-vous que chaque phase du développement de votre site Web, de la configuration des priorités à la manière de déterminer la navigation, correspond aux besoins de votre audience cible.

"Aussi passionnant que cela puisse être de créer un site Web complètement unique et original, l’utilisateur final devra toujours être pris en compte en priorité", dit Jonathan.

Consultez cette liste de contrôle pour créer une expérience utilisateur (UX) positive.

• Donnez une hiérarchie visuelle :
  Une hiérarchie solide permet aux visiteurs de recueillir rapidement des informations et de savoir où aller sur votre site Web pour en apprendre davantage. La hiérarchie visuelle comprend l’espacement, les couleurs, l’espace blanc, la répétition et bien plus encore.
• Simplifiez :
  Tout au long de la conception, maintenez une expérience adaptée aux visiteurs en vous demandant si tous les éléments sont nécessaires aux utilisateurs. Il se peut que vous ayez ajouté des fonctionnalités qui rendent le site Web plus complexe et la navigation de l’audience plus difficile.
• Ayez un appel à l’action (CTA) clair :
  "Passer une commande", "Acheter maintenant", "S’inscrire", "Contactez-nous" et bien d’autres CTA doivent être faciles à trouver et intuitifs. Continuez à vous demander si la conception de votre site Web permet à votre audience de savoir où vous voulez qu’elle aille ensuite sur votre site.
• Simplifiez l’accès :
  Votre site Web doit être adaptatif et accessible depuis n’importe quel appareil. Vérifiez les différentes composantes de l’aspect visuel et des performances de votre site Web sur les PC, tablettes et téléphones mobiles. Assurez-vous que les utilisateurs peuvent voir le texte et les images correctement sur différents appareils, et que les boutons ainsi que les CTA sont facilement cliquables sur des écrans de taille différente.

4. Utilisez des photos pour raconter votre histoire

Un site Web est une expérience visuelle, donc concentrez-vous sur des images qui plairont à votre audience cible pour vous aider à communiquer ce que représente votre marque. Si vous n’avez pas déjà vos propres éléments photographiques pour illustrer vos produits ou services, il existe de nombreuses sources d’images de stock. Des sites Web comme Unsplash, Pexels et Pixabay proposent une large sélection d’images libres de droits pour vous aider à démarrer.

Jonathan suggère de trouver une série d’images de photothèque appartenant à la même série ou photographe fournis. "Cela vous permet de maintenir une cohérence stylistique sur votre site Web", d’après lui. "Cela rendra votre site Web plus professionnel et votre entreprise aura l’air plus fiable."

N’oubliez pas ces conseils lorsque vous choisirez des images.

• Assurez-vous que vos images racontent une histoire.
  Ne choisissez pas seulement une photo parce qu’elle est jolie. Pensez à déterminer si l’image fonctionne avec votre contenu pour donner vie à votre marque.
• Même si vous utilisez les images de stock, faites preuve d’originalité.
  Ne faites pas le choix le plus évident. Il est déconseillé de choisir un élément qui sera immédiatement identifié par un visiteur comme une image de stock qu’ils auront déjà vue sur une douzaine d’autres sites.
• Assurez-vous que les personnes présentes sur les photos ressemblent à votre audience cible :
  

Cela permet aux visiteurs de sentir qu’ils peuvent s’identifier à votre site Web (et à votre marque, produit ou service) et en avoir besoin.

• Soyez cohérent avec le style de l’image :
  Assurez-vous que les éléments visuels de votre site Web restent fidèles à votre marque. Choisissez des couleurs, des polices et des photos cohérentes pour le renforcement de l’image de votre marque.
• Recadrez des images de stock pour un meilleur impact :
  Si, par exemple, vous vendez des glaces artisanales et que vous trouvez une image qui contient un enfant adorable en train de manger un cône glacé en famille, recadrez la photo pour mettre l’enfant en évidence. Elle suscitera plus d’intérêt et aura un aspect unique par rapport à d’autres sites Web qui ont peut-être utilisé l’image sans recadrage.

5. Suivez vos performances et progressez au fil du temps

Un site Web évoluera en permanence à mesure que votre entreprise se développera. Suivez vos performances depuis le début à l’aide de vos rapports de site Web pour voir ce qui fonctionne et ce qui ne fonctionne pas. Ensuite, faites les ajustements nécessaires pour améliorer l’expérience utilisateur et vos résultats.

Intégrer Google Analytics à votre site Web peut vous aider à suivre l’activité et voir quelles pages reçoivent le plus de trafic et où les gens cliquent. Les tests A/B : comparer deux versions vous aidera à déterminer quels éléments de votre site fonctionnent le mieux et à vous assurer que votre CTA motive vos visiteurs. "Si vous voulez créer des CTA qui génèrent de la conversion et contribuent à une expérience Web mémorable, vous devez toujours tester ce qui fonctionne le mieux", dit Jonathan.

Pour voir comment les utilisateurs interagissent avec votre site Web, les outils de heat mapping, comme Hotjar, sont très pratiques, indique Jonathan. Le heat mapping fournit une représentation graphique avec un code couleur de l’endroit où les yeux des internautes sont naturellement attirés sur le site Web. Cela peut vous montrer les zones de votre site Web qui attirent le plus l’attention et qui peuvent vous aider à guider votre future amélioration de conception et vos itérations.

"Comme c’est le trafic en temps réel qui est suivi, il est parfaitement adapté aux nouveaux sites Web fonctionnant sur le long terme", remarque-t-il. "Et le meilleur dans tout ça, c’est que la présentation des heat maps est claire et simple à comprendre."

Soyez minutieux

Tout au long de la conception de votre site Web, rappelez-vous qu’il s’agit de la plate-forme pour votre activité marketing. Comme votre site peut être la première impression que quelqu’un a de votre entreprise, mieux vaut qu’elle soit la meilleure possible, alors ne ménagez pas vos efforts.

Prenez le temps et fournissez les efforts nécessaires pour faire les choses correctement, conseille Jonathan. Assurez-vous que toutes vos fonctionnalités fonctionnent sur des écrans de toutes tailles afin que les utilisateurs puissent naviguer et utiliser votre site Web. Sinon, ils se dirigeront simplement vers la concurrence.

"La conception Web bas de gamme ne vous donnera pas la flexibilité et le contrôle nécessaires pour rendre votre espace numérique identifiable et unique sur le plan fonctionnel", dit-il. "Chaque élément compte, même les plus basiques. Ne lésinez pas sur la qualité."