Comment bâtir un site Web efficace

Comment bâtir un site Web efficace

Comment bâtir un site Web efficace, professionnel et beau? Voici quelques astuces simples pour créer ou améliorer le design de votre site!

La structure

Arborescence

La première chose à faire est de bien penser à la structure de votre site Web. Il est primordial d’avoir une arborescence. Celle-ci comprend le nombre de pages du site, les titres des pages (menu), les sous-sections, les boutons et les liens.

Petit conseil, pensez à ajouter une section blogue. Elle aidera grandement votre référencement! On vous explique pourquoi ici.

arborescence site web efficace

Textes

Ensuite, vient le temps de rédiger les textes qu’on retrouvera dans vos pages. Pour créer votre design, c’est l’idéal de savoir la longueur des textes, des titres, etc. 

Portez, justement, une attention particulière à la longueur de vos textes. Les visiteurs passent peu de temps en ligne, donc ils souhaitent trouver rapidement l’information recherchée. Il est aussi très important de présenter au moins 2 niveaux de lecture et d’ajouter du gras dans vos longs textes afin de faire ressortir les éléments importants. Faites des paragraphes courts et assurez-vous d’avoir plusieurs sous-titres. N’oubliez pas d’inclure des mots-clés relatifs à chaque page. 

Images

Pour bâtir un site Web efficace, le choix de vos photos est très important – c’est souvent ce qui fait la différence. On doit garder en tête d’avoir toujours le même style et filtre photo. Le cadrage n’est pas à négliger. Si vous avez, par exemple, une page équipe, que les gens soient tous de la même grosseur et proportion fera toute la différence.

Les photos rendront votre site plus attrayant et dynamique en allégeant la lecture par le fait même. Des textes alternatifs contenant vos mots-clés seront à ajouter sur chaque image. Par contre, faites attention au poids de vos images. Autant que possible, elles ne doivent pas dépasser 300 ko. Si vos images sont trop lourdes, votre site sera long à charger et cela pourrait décourager certains utilisateurs. Vous serez aussi pénalisé dans votre référencement Web. Vous pouvez utiliser cet outil pour tester la vitesse de chargement de votre site.

Icônes

C’est un bon moyen pour attirer l’attention dans votre visuel. Une fois le style d’icône repéré, assurez-vous de toujours garder le même genre. C’est-à-dire, si vous choisissez quelque chose en outline, ne choisissez pas un icône rempli pour une autre section. Vous pouvez les mettre en couleur afin d’avoir encore plus d’impact visuellement.

icônes site web efficace

Espace blanc

Cela signifie d’avoir un certain espace autour de vos éléments. Vous devez absolument laisser respirer vos éléments, que ce soit des photos, des textes, etc. Vous ne devez surtout pas surcharger le contenu de vos pages. 

Accessibilité et lisibilité

Ne pas négliger cet aspect important. Le tout doit être clair, autant pour le texte, les photos et le contraste que la taille de la police. Il existe des règles pour la grosseur des polices et le contraste minimal. Nous vous recommandons cet outil pour vérifier votre contraste.

La recherche

Il est important de faire une bonne recherche du style qu’on désire avoir au niveau de l’ambiance, des textures, des éléments graphiques et de la compétition. Bref, plus votre recherche est approfondie, plus vous saurez où vous diriger et quel style vous voulez donner. 

Allez chercher de l’inspiration sur Pinterest, Behance, Dribbble. Prenez en note tout ce que vous trouvez beau et qui correspond au  look que vous recherchez. Que ce soit un bouton, le header, etc. Toutefois, gardez en tête, lors de vos recherches, qu’un site peut vraiment être beau et original, mais qu’il doit quand même être, autant que possible, « user-friendly ». Le look doit être adapté à votre clientèle cible.

Les couleurs

Il est important de choisir 1 à 3 couleurs et de les conserver tout au long de la conception de votre site Web. Ces couleurs sont généralement celles qu’on retrouve dans le logo, donc 2 de base et 1 couleur accent. Vous pouvez aussi y aller avec une couleur complémentaire totalement différente.

Le noir, blanc et gris ne sont généralement pas considérés comme des couleurs, donc vous pouvez les utiliser en plus de vos choix de couleurs (sauf si votre site Web est ton sur ton). L’utilisation idéale de vos couleurs accents sont : les titres ou sous-titres, les boutons, les traits de division (une bande) ou encore les icônes.

Les typographies

Sélectionnez 2 ou 3 polices au maximum. Prenez toujours une typographie simple qu’on retrouve majoritairement dans le site. On peut jouer avec celle-ci de trois façons: en ajoutant de l’espace entre les lettres, en mettant un sur-titre en MAJUSCULES ou en utilisant le caractère gras. Ensuite, on peut choisir une typographie plus originale qui sortira du lot.

L’alignement

C’est important de prendre le temps de bien aligner le tout. Ainsi, toujours garder les mêmes marges et le  même espacement entre vos sections. Si vous avez 3 blocs,  les aligner en hauteur et largeur et avec le même espacement. Ceci donnera un look professionnel à votre site Web. 

De plus, alternez l’alignement de vos sections. Ne centrez pas toujours votre texte. Faites de la variété. Alignez à gauche, à droite ou encore de façon centrée. Ne mettez pas toujours les photos du même côté non plus, vous comprenez le principe!

site web efficace

Les animations

Que ce soit au niveau d’une photo, du texte, d’une vidéo ou encore d’un élément graphique du brand, ajouter de l’animation à votre site Web fait en sorte que l’œil sera plus attiré. Notre cerveau étant constamment à la recherche de stimuli, le fait d’animer des éléments sur votre site Web donnera le goût aux utilisateurs d’y passer encore plus de temps à naviguer.

Grâce à ces quelques conseils, vous êtes maintenant en mesure de bâtir un site Web efficace! Mais le plus important, c’est surtout de laisser aller votre créativité tout en respectant votre image de marque! La cohérence dans votre site, ainsi que dans tous vos médias, est la clé. Si jamais vous avez besoin d’un petit coup de pouce, n’hésitez pas à nous contacter!