7 conseils pour bien designer votre site web en total débutant

Deux ou trois couleurs sont suffisantes

Vous n’avez pas besoin que votre site soit bariolé comme au pays des licornes et des arcs en ciel. Vous pourriez même ne choisir qu’une seule couleur, avec de multiples nuances, puis le noir et blanc.

Établissez un couple de couleurs pour votre brand (prononcez bwind en français) ou votre marque si vous préférez. Cela fera qu’on sent que votre site est consistant en terme de langage design.

Utilisez l’outil Adobe Color CC pour trouver des couleurs complémentaires.

Deux ou trois typographies sont suffisantes

Ce n’est pas parce que des millions de typographies existent que votre site web devrait toutes les utiliser, ni même en utiliser juste 12 de vos préférées. Puis ça prends du poids au chargement les typographies.

Tout comme la palette de couleurs, votre site aura une brand plus forte visuellement et un langage plus consistant si vous en utilisez juste quelques unes. Puis comme bonus, cela rend votre contenu beaucoup plus facile à scanner rapidement si vous utilisez une palette de couleur et de typographies consistantes.

Cinq à huit éléments dans la navigations sont suffisants

La navigation c’est comment les visiteurs vont d’une page à l’autre.

Dans un récent article sur ce blog, je vous disais qu’il est important de limiter les choix, sinon les gens n’en font aucun. Donc moins d’éléments dans le menu signifie que c’est plus facile de scanner et de trouver.

Le nom des pages aussi ont besoin de faire sens, tout particulièrement pour un premier visiteur. Pensez-y. Vous pouvez toujours utiliser des choses comme les drop-down menus ou même ajouter dans la barre latérale ce qui ne rentre pas dans le menu, genre des sections spécifiques absolument nécessaires.

Pour votre premier essai, essayez de réduire votre menu, et consultez votre web designer pour voir si cela fait sens vue de sa perspective.

L’espace blanc n’est pas juste pour les minimalistes ou projets d’art

L’espace entre chaque élément ou section de votre site web donne à votre design l’espace visuel pour respirer. L’espace sépare les idées et aide à attirer l’attention sur les éléments les plus importants.

Si les choses sont collées ensemble c’est difficile de distinguer chaque élément, ou de comprendre celui qui plus d’importance que les autres et sur lequel vous voulez diriger l’attention pour indiquer à votre visiteur quoi faire.

Il y a de l’élégance dans la simplicité, mais plus important encore il y a des raisons business de vous focaliser la simplicité. Steve Jobs, amoureux du design n’en pensait pas moins.

Je le répète encore, trop d’options amène les gens à simplement n’en choisir aucune d’entre elles (et probablement à quitter votre site web pour naviguer ailleurs.)

Le minimalisme peut être brillant, fort, coloré. Personnellement j’aime le minimalisme avec quelques photographies fortes. Le minimalisme n’est pas forcément du noir et blanc. Un site web minimaliste effectif peut être un site avec fond en rose brillant (une seule couleur, pas 10), avec un texte blanc en 2 tailles. Une taille pour les paragraphes, un autre pour les titres qui amènent vos visiteurs soit à lire l’article, soit à acheter.

Vous voyez c’est très simple, pourtant je vous le dit, ce site pourrait être très notifié dans la masse des autres sites web.

Donc avant de demander à votre designer de tout resserrer entre les éléments, pour que ça fasse bien rangé, d’ajouter de nouvelles typographies, des couleurs, pensez d’abord à votre audience.

Est-ce qu’ils vont prendre plus d’actions parce que vous utilisez plus de typographies, ou est-ce que votre site sera plus clair et focalisé?

Les standards existent pour une raison

Vos visiteurs sont éduqués pour s’attendre à ce que les choses soient placés au même endroit sur un site web. Si vous avez l’idée de faire original avec votre site web et de faire perdre tous leurs repères aux gens, résultat vous allez les perdre.

Nous sommes d’accord, votre style, votre marque et votre voix devraient être créatives, mais ne sacrifiez jamais la compréhension. Utilisez un langage clair et des visuels qui font sens à tout le monde. Faites que chaque page aient un modèle similaire, avec le logo, le menu au même endroit, la structure de page similaire, comme ça ils sont plus faciles à trouver. Nommez les pages et sections d’une manière qui fasse sens.

C’est plus important que les visiteurs sachent comment faire quelque chose plutôt qu’être impressionnés avec votre originalité à nommer les choses. Exemple, mon client sur le projet Unimgo à voulu nommer chaque élément de son menu spécialement. Mon client y tenait, mais c’est une mauvaise idée.

Les gens scrollent… sérieusement, ils scrollent

Oui, les gens font défiler les pages. Pour de vrai. Même les études d’utilisabilité montrent que les gens savent ce qu’est une barre pour faire défiler la page.

Donc n’ayez pas peur de créer un site web qui ne s’affiche pas uniquement en plein écran et sans barre pour défiler. N’ayez pas peur, les gens utilisent la barre de défilement pour descendre sur votre site.

Évidement, placez les informations importantes en haut dans le design. Mais focalisez à faire qu’il soit intéressant de faire défiler la page avec votre contenu et votre design.

Limitez l’usage des images lourdes et des scripts

Dans un site web, vous pouvez décomposer les éléments en 4 catégories:

Le code représente pas plus de quelques dizaines de kilooctets, les typographies, quelques dizaines de kilooctet supplémentaires, par contre ensuite avec les scripts et les images ça peut très vite grimper.

Le dernier site web que j’ai réalisé pour un client était très lourd dans sa 1ère version, 12mo pour la page d’accueil. Ça représentait 10-20 secondes de chargement sur une connexion rapide (imaginez sur un mobile). Il a fallu donc que je réduise le nombre d’images grand format et leur poids, que j’enlève des scripts inutiles, que je simplifie, que j’optimise.

Idéalement, votre site ne devrait pas dépasser 2 mo. Et vous devriez viser à se qu’il se charge en pas plus de 2-3 secondes — idéalement là encore.

Je vous recommande ces outils pour tester la vitesse de votre site:

Optimiser la vitesse d’un site est un travail de professionnel, cependant c’est bien que vous ayez une idée d’où se positionne votre site en terme de vitesse de chargement et de poids par rapport au reste des sites web dans le monde.

Mots de fin: la simplicité c’est mieux

Votre web designer sait beaucoup à propos de ce qui fonctionne et ce qui ne fonctionne pas en web design, il est régulièrement payé pour ça et il a des années de pratiques. Il y a des raisons pourquoi la plupart des sites web à succès n’utilisent pas chaque outil, pleins de typographies, de couleurs ou le maximum d’éléments possible.

Votre site web devrait être surtout facile à utiliser, de manière ce que le visiteur puissent se focalisé sur ce que vous lui indiquez, et non sur la présentation en elle-même.

Moins est toujours mieux quand il s’agit de se focaliser.

Vous voulez plus de conversions
sur votre site web?

Inscrivez-vous et recevez mon guide avec 12 conseils simples

Vous serez aussi abonné à ma newsletter irrégulière. No spam.

Je suis Julien Lucas

Développeur Front-End, Expert Wordpress, et designer freelance. J'écris aussi sur bizcampus.co, un blog où j'aide les indépendants et freelances.