10 conseils pour un site web parfait !
Le design de site web est une chose à laquelle à peu près tout le monde (dans le milieu professionnel) a affaire à un moment donné, mais que seuls les graphistes comprennent véritablement.
Si vous voulez avoir un site internet de bonne qualité, vous devrez apprendre les bases de manière à pouvoir communiquer correctement avec votre graphiste (et pour reconnaître un bon graphiste d’un mauvais !).
Nous savons comme il est difficile pour les non-professionnels du design de saisir la complexité du design de site web, et nous avons justement créé ce petit guide pour vous y aider.
Voici donc nos 10 meilleurs conseils divisés en trois grandes catégories : la composition, l’esthétique, et la fonctionnalité. Que vous comptiez faire appel à un graphiste professionnel ou que vous pensiez tout faire vous-même, servez-vous de cette liste pour évaluer votre design final.
La composition
—
1. Ne surchargez pas votre design
Tout d’abord, parlons d’une des erreurs les plus fréquentes en conception de site web : surcharger l’écran. La plupart des gens ont une liste de toutes les choses qu’ils veulent avoir sur leur site web, et sans y réfléchir à deux fois, les superposent toutes sur l’écran. C’est comme cela qu’on finit avec une page remplie de tout un tas de choses sans forcément de rapports les unes avec les autres.
Chaque élément que vous ajoutez sur votre site diminue l’impact des autres éléments qui y figurent. Si vous ajoutez trop de choses, les utilisateurs ne sauront pas où donner de la tête et votre site perdra en cohérence. En revanche, si votre site web ne contient que les éléments nécessaires, chacun de ces éléments-là gagnera en pertinence et en visibilité.
Plus d’espace blanc signifie un écran moins saturé, et c’est précisément ce qui est important pour créer un site web clair et minimaliste.
Pour qu’un design soit efficace, il doit d’abord être épuré. Les différentes routes que les utilisateurs peuvent prendre doivent être claires et évidentes. Il existe plusieurs façon de parvenir à cela (certaines sont expliquées ci-dessous), mais la première étape est toujours d’enlever les éléments secondaires et de ne garder que l’essentiel.
À faire :
Épurer. Enlevez tout ce qui n’est pas essentiel, c’est-à-dire tous les éléments qui n’apportent rien à l’expérience utilisateur. Si tel ou tel élément pourraient tout aussi bien se trouver sur une autre page, déplacez-les sur cette autre page.
Limiter les menus déroulants. Les menus déroulants (et autres menus du même genre) sont un excellent moyen d’épurer son design. Mais attention à ne pas simplement “cacher la misère” derrière de nombreux menus trop longs ou inutiles. Si possible, limitez-vous à sept options maximum.
À éviter :
Les sidebars. Les nouveaux visiteurs ne les utiliseront probablement pas. De plus, si vous n’arrivez pas à mettre toutes vos options dans votre barre de navigation, cela veut dire que vous devez simplifier votre barre de navigation de toute façon (voir ci-dessous).
Les sliders. Le mouvement et les nouvelles images contenues dans les sliders détournent l’attention et affaiblissent le contrôle que vous exercez sur ce que vos utilisateurs voient. Il vaut mieux ne montrer que vos meilleures images, tout le temps.
2. Utilisez suffisamment d’espace blanc
Vous vous demandez comme vous allez bien pouvoir remplir tout ces espaces blancs que vous avez créés en éliminant tous les éléments superflus de votre site web ? À vrai dire, nous vous conseillons de les laisser tel quel.
À faire :
Entourer l’élément le plus important avec de l’espace vide. Plus il y a d’espace négatif autour d’un élément, plus cet élément est mis en valeur.
Éviter de tomber dans les clichés avec des éléments visuels secondaires. Les autres éléments graphiques comme la couleur ou la typographie (voir ci-dessous) peuvent souffrir visuellement lorsqu’il y a beaucoup d’espace négatif.
À éviter :
Mettre en avant le mauvais élément. N’utilisez l’espace négatif que pour entourer les éléments importants de votre design. Si votre but est par exemple d’augmenter votre taux de conversion, entourez votre adresse email ou votre CTA de vente avec de l’espace négatif, et non pas votre logo ou votre argument de vente.
Avoir un fond trop chargé. Par définition, les arrière-plans sont supposés être discrets. Si votre fond ne contient pas suffisamment d’espace négatif, il volera la vedette aux autres éléments importants de votre design.
3. Guidez le regard de votre utilisateur avec une hiérarchie visuelle
On parle de hiérarchie visuelle lorsqu’on utilise différents éléments visuels (comme la taille ou le positionnement) pour influencer le sens de la lecture. Par exemple, on met généralement les titres en gros et en gras en haut de page, et les informations légales en tout petit et en bas de page. Ainsi, on crée une hiérarchie visuelle qui permet de donner la priorité à un élément plutôt qu’à un autre.
À faire :
Concevoir un design scannable. On ne lit généralement pas l’intégralité d’une page donnée. On ne voit d’ailleurs même pas tous les éléments des pages que nous regardons. Créez un design avec cela en tête pour être certain que vos utilisateurs verront ce qu’il faut voir.
Tester plusieurs alternatives. Parce que la hiérarchie visuelle peut être quelque chose d’assez compliqué, il vaut parfois mieux faire des tests. Créez différentes versions (“maquettes”) et montrez-les à quelqu’un d’autre pour avoir une nouvelle perspective sur vv
À éviter :
Utiliser des éléments en concurrence les uns avec les autres. La hiérarchie visuelle est une histoire d’ordre : d’abord ceci, puis cela. Évaluez l’importance de chacun des éléments pour créer une hiérarchie claire.
En faire trop. Prenez garde à ne pas tomber dans l’excès inverse en exagérant trop la taille ou l’impact de vos éléments par exemple. Utilisez autant de tactiques que nécessaire pour attirer l’attention, puis arrêtez-vous là.
L’esthétique
4. Choisissez vos couleurs stratégiquement
Maintenant que vous êtes un peu plus familier avec les principes de composition, examinons de plus près quelques spécificités, à commencer par la couleur, un outil aussi puissant qu’utile.
À faire :
Établir une hiérarchie des couleurs. Utilisez une seule couleur pour tous les éléments principaux, une deuxième couleur pour mettre en avant certains éléments, et une troisième couleur pour les éléments moins importants, comme le fond.
Créer une cohérence. Une fois que vous avez défini votre palette de couleurs, tenez-vous-y. Utilisez la bonne couleur pour le bon type d’éléments (principal, à mettre en avant, secondaire) sur toutes les pages de votre site web.
À éviter :
Opter pour ses couleurs préférées. L’influence des couleurs en marketing a été prouvée. Renseignez-vous sur la théorie des couleurs et saisissez cette opportunité de branding.
Choisir des couleurs qui ne vont pas bien ensemble. Choisir les bonnes couleurs pour votre marque ne suffit pas, il faut également que ces couleurs se marient bien les unes aux autres. Le rouge et le violet sont peut-être deux couleurs qui représentent bien votre marque, mais si le design final est affreux ou désagréable à l’œil, vous aurez tout de même du mal à vous vendre.
5. Ne lésinez pas sur les photos
Les photos doivent avoir un lien avec le branding et le concept. Elles peuvent créer du contraste, attirer l’attention, voire guider le regard vers le paragraphe suivant.
À faire :
Utiliser de vraies personnes. Les images d’individus ont tendance à davantage engager les utilisateurs, surtout s’il s’agit de vraies photos de votre équipe ou de vos clients.
Créer une bonne atmosphère. Les photos peuvent être très différentes les unes des autres. Sélectionnez uniquement celles qui représentent bien votre site web et votre entreprise. Si vous voulez un site web joyeux, utilisez des photos d’individus en train de sourire.
À éviter :
Utiliser des photos Stock trop génériques. Les images provenant des banques d’images en ligne peuvent être utiles, mais seulement lorsqu’elles ne sont pas trop génériques.
Sélectionner des photos basse définition. Nous sommes dans l’ère de la haute définition. Utiliser des images de basse qualité est donc le meilleur moyen d’avoir l’air dépassé. Vous pouvez en revanche compresser les fichiers trop larges pour pallier aux problèmes de poids.
6. Optimisez la typographie pour votre marque
Les mots que vous ou votre rédacteur choisissez sont extrêmement importants, mais vous pouvez aussi accroitre leur efficacité en leur donnant l’aspect idéal.
À faire :
Utiliser des polices web. N’oubliez pas de choisir des polices qui sont compatibles avec le web. Apprenez à les identifier en cliquant ici.
Renseignez-vous sur les différentes polices. Savez-vous ce qu’est une police à empattements ? La typographie est une discipline très vaste et il est utile de connaître les cinq types de polices afin de mieux saisir les nuances qui existent.
À éviter :
Utiliser trop de polices flashy. Les polices fantaisistes ou qui attirent l’attention peuvent être utiles pour les gros titres ou les mots isolés, mais il ne faut pas en abuser sous peine de perdre l’attention des visiteurs.
Utiliser la même typographie pour tous ses textes. Comme on peut le voir dans l’exemple de Her Habesha, la typographie fonctionne mieux lorsqu’elle est équilibrée. Utilisez des polices différentes pour les gros titres, les sous titres et le corps. Gardez cette même organisation sur toutes les pages de votre site.
La fonctionnalité
7. Soignez la navigation
Nous voici enfin arrivé à ce qui concerne la fonctionnalité, c’est-à-dire ce qu’un site donné est capable de faire. La navigation est au centre de la fonctionnalité et ce, pour de bonnes raisons.
À faire :
Trouver le bon équilibre. Il est important de donner suffisamment de choix à vos clients. En revanche, il n’est pas question de les submerger non plus. Organisez vos pages en catégories de façon à trouver le bon équilibre.
Construire sa navigation en fonction de ses utilisateurs. Lorsqu’on achète des chaussures en ligne, certains se rendent dans la catégorie “vêtements” tandis que d’autres vont dans la catégorie “accessoires”. Nous avons tous nos petites préférences et vous devez construire votre navigation en fonction de la manière dont vos utilisateurs pensent, en vous appuyant sur des données concrètes. Vous pouvez également effectuer des tests utilisateurs.
À éviter :
Expérimenter de nouveaux formats. S’il est toujours bon de s’adonner à quelques expériences pour générer de nouvelles idées, nous ne vous le recommandons pas dans cette situation précise. Pour éviter de demander trop d’efforts à vos utilisateurs, tenez-vous-en aux standards en la matière (barre de menu en haut de page, logo relié à la page d’accueil, barre de recherche représentée par une loupe, etc.)
8. Privilégiez la version mobile
De nos jours, il est très important de concevoir les sites web avec une utilisation mobile en tête. Nous avons tendance à exploiter les mises en page mobiles différemment de celles conçues pour les ordinateurs. Il est crucial de prendre en compte l’utilisation mobile pour créer un design efficace. Privilégiez un design sobre et minimal, et éliminez tout le superflu pour permettre aux utilisateurs de se concentrer sur le contenu.
La version mobile de votre site web doit être l’une de vos priorités dès le début. Mais cela ne veut pas pour autant dire que vous devez délaisser la version ordinateur. Votre site web doit être parfait quel que soit l’appareil que vos clients utilisent.
À faire :
Concevoir la version mobile en premier. Lorsque l’on réfléchit à la version mobile de son site web, on ne conserve que l’essentiel, tout simplement parce que l’espace à notre disposition est limité. Il est plus facile de commencer par la version mobile, puis d’ajouter ensuite d’autres éléments pour la version bureau, plutôt que de faire l’inverse.
Privilégier certains appareils en fonction des données utilisateurs. On a tendance à regrouper beaucoup de chose sous le nom “mobile”, mais les smartphones et les tablettes ont tous des formats d’écran et des spécificités techniques différentes. Tournez-vous vers les données utilisateurs pour déterminer quels types d’appareils vos clients utilisent le plus.
9. Produisez du texte facile à lire
Lorsque l’on parle de lisibilité, nous faisons référence à trois choses :
Style. Votre texte doit être bien rédigé en fonction des objectifs de votre entreprise et de votre audience cible.
Esthétique. Votre texte doit s’afficher correctement, avec suffisamment d’espace vide, et être découpé en blocs digestes qui ne feront pas peur aux utilisateurs.
Lisibilité. La police et la taille de votre texte doivent pouvoir permettre une lecture sans encombre ou effort.
Si la lisibilité naît principalement de la typographie, vous devez également prendre en compte la composition et la structure de votre contenu, ainsi que la manière dont votre texte interagit avec les autres éléments de votre design. Sans parler de la qualité de la rédaction, bien sûr !
À faire :
Faire attention aux combinaisons de couleurs. La manière dont la couleur du texte interagit avec la couleur de fond affecte énormément la lisibilité du texte, surtout pour ceux qui ont des problèmes de vue. Tenez-vous-en à des couleurs contrastantes (tons clairs et foncés) et si rien ne fonctionne, vous pourrez toujours vous rabattre sur un classique noir et blanc.
Tester la lisibilité de son texte. Ce qui vous paraît lisible à vous ne l’est peut-être pas pour quelqu’un d’autre. Testez la lisibilité de vos textes auprès de plusieurs personnes.
À éviter :
Utiliser des polices cursives ou trop fantaisistes pour son texte. Les polices extravagantes sont idéales pour les gros titres, mais il convient de choisir une police plus classique pour le corps de votre texte.
Inclure des gros blocs de texte. Les gros blocs de texte peuvent intimider les utilisateurs, même dans un autre contexte que celui d’un site web. Il vaut toujours mieux couper les paragraphes trop longs en jouant sur la mise en page.
10. Communiquez ce que vous désirez à votre designer
À faire :
Planifier à l’avance. Que vous l’écriviez sur un bout de papier ou que vous créiez un wireframe, planifiez à l’avance ce que vous voulez avoir sur votre site web. Cela vous aidera à ne rien oublier par la suite et constituera un excellent point de départ pour votre graphiste.
Garder l’esprit ouvert. C’est le travail de votre graphiste de créer pour vous un site web aussi beau que possible, donc gardez l’esprit ouvert quant à ses suggestions, même si elles sont différentes de ce que vous aviez imaginé au départ. Vous découvrirez peut-être quelque chose auquel vous n’aviez pas pensé.
À éviter :
Rester vague et générique. Les termes vagues et génériques comme “coloré” ou “interactif” n’en disent pas beaucoup, en fin de compte. De quelles couleurs parlez-vous ? Comment voulez-vous que les utilisateurs interagissent ? Soyez aussi spécifiques que possible, à moins que vous ne soyez prêt à laisser ces décisions au soin de votre graphiste.
Vous êtes prêt (ou du moins votre designer l’est)
Lire ces 10 conseils est une chose, mais c’en est une autre que de les appliquer à son site web ! La théorie des couleurs, la typographie, la composition et l’optimisation mobile sont des champs assez vastes, donc ne vous découragez pas si vous n’arrivez pas à tout régler en une session. Seuls les graphistes professionnels saisissent l’étendue des nuances de chacune de ces disciplines. Faire appel à quelqu’un qui maîtrise les principes de la conception de site web est généralement la route la plus sûre pour créer un bon design. N’hésitez pas à consulter notre liste des différents styles graphiques.
