Bonnes pratiques de conception de sites web

Meilleures pratiques, conseils et directives en matière de conception de sites web que vous devriez connaître

Quelles sont les meilleures pratiques en matière de design web ? Comment les mettre en œuvre avec succès dans ton prochain projet de design web ? Et qu'est-ce que nous définissons comme norme de conception et meilleures pratiques en matière de design web ?

Qu'entendons-nous par "meilleures pratiques" ?

Dans le développement web, il existe des règles fixes qui ont surtout trait à la lisibilité et à la propreté du code ainsi qu'à la sécurité d'un site web. En revanche, dans le domaine du webdesign, la terminologie est un peu plus floue et les règles plus ouvertes à l'interprétation personnelle.

Les meilleures pratiques : Le design web ne se résume pas à l'esthétique

Les meilleures pratiques en matière de design web sont un mélange de design visuel, de design d'expérience utilisateur, d'accessibilité et de rédaction de contenu - avec un accent sur le référencement.

Les bonnes pratiques en matière de conception de sites web sont une série de règles à suivre pour répondre aux attentes générales des utilisateurs. Il s'agit en outre de directives visant à améliorer la clarté et l'expérience utilisateur.

Dans cet article, je te présente les meilleures pratiques pour un bon design web. Pour chaque domaine, je te donne des conseils sur la manière d'acquérir des connaissances supplémentaires et je présente des outils et des exemples qui te seront utiles pour ton prochain projet.

J'aborde également brièvement le thème des meilleures pratiques en matière de développement WordPress. Comme tu le sais certainement, la planification et la gestion de projet sont des aspects importants de la conception web. Dans cet article, je laisse ces deux sujets de côté pour le moment, car cela dépasserait le cadre de cet article.

Les meilleures pratiques : Design visuel

Nous commençons maintenant avec les normes établies en matière de design visuel : quelles sont les meilleures pratiques en matière de design visuel ? Et quels sont les facteurs qui en font partie ?

Reconnaissance et image de marque

Le site web doit être en harmonie avec le reste de l'image de l'entreprise et doit s'orienter vers le guide de style. Vérifie donc que le site web répond aux questions suivantes :

  • Est-il possible de savoir au premier coup d'œil pour quelle entreprise le site a été créé ?
  • Le guide de style a-t-il été intégré ?
  • Les éléments visuels permettent-ils de reconnaître les propriétaires du site ?
  • Les éléments visuels sont-ils utilisés de manière cohérente ?
  • La langue utilisée sur le site web reflète-t-elle le branding ?

Google est très en avance sur le thème du consistent branding. Je ne vois pas d'autre marque qui propose autant de produits différents et qui parvient à donner à chacun d'entre eux l'image de l'entreprise. Même lorsque je regarde un produit Google que je ne connaissais pas, je peux l'associer directement à la marque.

Comment Google y parvient-il ?

Entre autres par une utilisation cohérente des couleurs Google, de la typographie, d'un espace blanc marqué, d'appels à l'action et d'une navigation constants. Les logos présentent également une certaine constance, qui fonctionne pour toutes les entreprises et toutes les catégories - bien que ce dernier point ne signifie pas nécessairement que le design suscite l'approbation.

Avec la cohérence dans le branding, tu analyses d'abord seulement si le site web reflète de manière optimale l'entreprise et son branding.

Webdesign standard et ergonomie

Une autre "meilleure pratique" se définit par l'intégration de standards. Il s'agit par exemple du placement du logo dans le coin supérieur gauche, de l'apparence des boutons, des liens, etc. Ceux-ci aident le visiteur de ton site à s'orienter rapidement et facilement. C'est pourquoi ces standards sont indispensables à la mise en œuvre d'une ergonomie réussie.

Autres ressources sur l'utilisabilité

Pourquoi l'utilisabilité et l'expérience utilisateur devraient-elles t'intéresser en tant que webdesigner ? Tu trouveras des approches plus complètes sur le thème de l'utilisabilité dans cet article.

Qu'est-ce qui définit une norme de conception de sites web ?

Les standards de design les plus répandus dans le design web sont définis par les UI Design Patterns. Andy Crestodina explique de manière très compréhensible comment les standards sont définis dans son article sur les standards du design web.

Selon cette étude, une approche de design doit être utilisée sur au moins 80 % des sites web pour être considérée comme standard. Toute autre approche est soit une habitude (50-79 %), soit une source d'incohérence et de confusion (0-49 %) pour ton site.

Un design harmonieux : la règle des tiers

J'ai déjà évoqué le thème du design web harmonieux. Cette fois-ci, j'aimerais m'attarder un peu plus sur la règle des tiers.

Celle-ci est utilisée depuis plusieurs centaines d'années - principalement dans le domaine des beaux-arts et plus tard dans celui de la photographie. Dans ce cas, comme le montre le dessin, le design est divisé en 9 cases de taille égale :

Design d'interaction
Source : interaction-design

Lors de la création de sites web, la règle des tiers t'aide aussi et surtout à placer les informations les plus importantes de manière à ce que le visiteur puisse les percevoir directement. 

Pour simplifier, un élément visuel ne devrait pas occuper plus de trois cases et se situer dans un tiers de la mise en page. En outre, les nœuds se prêtent particulièrement bien au placement de messages importants et d'appels à l'action.

Dans Photoshop, tu peux rapidement et facilement vérifier et adapter tes mises en page à l'aide de l'outil "Crop" et du paramètre "Rule of Thirds". Pour illustrer la règle des tiers, j'ai examiné d'un peu plus près le site web de Marqeta:

Meilleures pratiques

Le produit ainsi que son message sont bien répartis sur les nœuds. Ici, le design pourrait être un peu plus efficace en déplaçant légèrement le CTA. Toutefois, l'harmonie du design en souffrirait quelque peu :

Meilleures pratiques

La variante mobile montre clairement que le message occupe le tiers inférieur de la mise en page, alors que le produit est représenté de manière assez centrée. Nous pourrions ici repenser le placement du CTA.

Ce que l'on appelle les "heatmaps" t'aident en outre à déterminer où les visiteurs de ton site regardent et cliquent principalement. L'outil Crazy Egg propose par exemple un service (payant) à cet égard.

Une autre possibilité de vérifier ton design est le "test de flou". Il s'agit de déterminer la netteté de ta mise en page (par exemple à l'aide de Photoshop et du "Gaussian Blur" - 12%). Si les utilisateurs ne peuvent plus lire les contenus, il devient rapidement clair sur quoi se concentre l'attention lorsqu'ils regardent le site web. Ce test se prête en outre bien à l'analyse du CTA. Celle-ci est-elle toujours reconnaissable en tant que telle ?

Meilleures pratiques en matière de conception de sites web

Pour cela, j'ai à nouveau utilisé le site web de Marqeta. Le CTA de droite et le produit sont particulièrement proéminents, suivis du message et enfin du logo et du deuxième CTA :

Meilleures pratiques en matière de conception de sites web

J'ai encore allégé la version mobile pour tester ce qu'il en reste. Ici, c'est le produit qui saute aux yeux en premier, suivi du CTA et du logo. Tu peux faire ce test avec l'ensemble de la page, de préférence pendant la phase de conception. Tu peux ainsi analyser rapidement et facilement quels éléments de ton design sont proéminents et décider si c'est ce que tu souhaites.

Optimiser le contenu et le référencement

La création d'un site web implique bien entendu la rédaction de contenus. Il existe certes des rédacteurs professionnels qui rédigent des contenus pertinents pour ton site web en tenant compte de la SEO, de l'utilisabilité et du guide de style. Mais il y a aussi quelques directives que tu peux suivre toi-même. 

Tu dois accorder une importance particulière à la longueur et à la lisibilité des textes - souvent, les textes sont trop volumineux et trop imbriqués. 

Même si le groupe cible est habitué à un certain jargon, tu dois toujours être conscient du fait que notre durée d'attention sur un site web est beaucoup plus courte que lorsque nous lisons des articles spécialisés, par exemple. Lorsque nous parcourons un site web, nous recherchons plutôt des informations spécifiques. Nous scannons pour ainsi dire le contenu plutôt que de prendre réellement le temps de le lire correctement.

Google donne également des points négatifs si les phrases de ta page sont trop longues et des points positifs si elles sont reliées entre elles par ce que l'on appelle des "Transition Words".

Des articles intéressants sur le thème du SEO sont également disponibles :

Accessibilité du web & sites web sans barrières

L'accessibilité du Web est malheureusement encore un sujet marginal - et trop souvent ignoré. Là aussi, il existe des pistes de réflexion simples dont nous pourrions tenir compte dès la première conception. Par exemple, utilises-tu principalement des couleurs pour mettre en évidence des informations ? 

Tu peux le tester facilement en regardant ton site web en noir et blanc :

Meilleures pratiques en matière de conception de sites web

J'ai analysé à nouveau le même site web. Même sans couleurs, le message est clair. Le CTA en haut à droite pourrait poser problème en termes de contraste.

Pour le vérifier avec certitude, il existe le "Contrast Checker". Le ratio de contraste prédéfini est d'au moins 4,5:1 pour le texte normal et de 3:1 pour les grands textes, comme les titres :

Meilleures pratiques en matière de conception de sites web
Meilleures pratiques en matière de conception de sites web

Si j'indique les nuances de gris, le CTA n'est pas assez contrasté, mais il est suffisant dans la variante couleur.

http://colorsafe.co/ est un autre outil pour déterminer les couleurs et leur intensité de contraste. Ici, tu peux essayer directement différentes combinaisons de couleurs. Le ratio est directement indiqué et tu as la possibilité de choisir les polices de caractères ainsi que la norme WCAG selon laquelle tu souhaites orienter ta sélection.

L'utilisation de couleurs pour représenter visuellement les manipulations d'erreurs peut poser problème. Prenons par exemple les éléments de forme. Souvent, les erreurs sont représentées par la mise en évidence en couleur de l'entrée Box . Cela peut conduire à ce que les erreurs ne soient pas reconnues et donc pas résolues par quelqu'un qui a un problème avec les couleurs. 

Lors de la planification, tu dois en tenir compte et donc toujours veiller à ce qu'il y ait une autre représentation de l'erreur. Tu trouveras ici d'autres faits et ressources intéressants sur le thème de l'accessibilité, ainsi que de précieux conseils pour la création d'un site WordPress sans barrières.

Autres ressources

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Resolution et Responsive Web Design

En matière de design web, il n'y a sans doute pas de règle qui soit plus souvent évoquée - et plus souvent ignorée - que "mobile first".

Dans cette approche, le contenu est créé pour les appareils mobiles, puis adapté en conséquence pour les plus grands. L'inverse consiste à concevoir le design pour les ordinateurs de bureau et autres, puis à l'adapter en conséquence pour les petits appareils. 

Deux autres approches me viennent à l'esprit :

  • Créer un site web spécifique pour chaque appareil mobile et de bureau et le consulter en conséquence.
  • Afficher le site web en version de bureau sur le téléphone mobile

La première peut être - selon le projet - la bonne approche, mais elle n'est pas très répandue, car elle est très coûteuse et demande beaucoup de temps. La seconde est malheureusement encore trop souvent vue sur le web et doit donc être ajoutée d'urgence à la liste des "meilleures pratiques". Tu trouveras d'autres conseils sur l'optimisation mobile ici.

Le mobile first n'est pas forcément toujours la bonne solution : Des études sur le groupe cible et son comportement sur Internet peuvent rapidement te montrer quels sont les principaux appareils utilisés pour accéder à ton site. 

L'idée n'est pas seulement de préparer les contenus de manière visuelle, mais aussi et surtout de tenir compte de l'évolution des conditions extérieures. Pour plus de détails, tu peux lire l'article Mobile-First UX Design Is No Longer a Trend.

Le tableau ci-dessous montre clairement quels sont les écrans les plus utilisés pour accéder à Internet. Cela peut t'aider à décider pour quels écrans tu souhaites optimiser tes sites web. Mais n'oublie pas qu'une telle généralisation n'a qu'une valeur indicative. Ces statistiques ne peuvent pas non plus remplacer une étude de tes groupes cibles.

Meilleures pratiques en matière de conception de sites web
Source : https://www.hobo-web.co.uk/best-screen-size/

Meilleures pratiques pour WordPress

Codex WordPress

WordPress t'offre de nombreuses possibilités pour présenter tes designs sur le web. Mais ici aussi, il existe des normes et des bonnes pratiques auxquelles tu dois te conformer.

Le codex WordPress

WordPress met à disposition un codex général qui peut t'aider à approfondir le sujet.

Plugins et thèmes WordPress

Lors du choix d'un plugin ou d'un thème, il ne faut pas seulement tenir compte de sa fonctionnalité actuelle. Il est également utile de lire les critiques et de se familiariser avec la fréquence des mises à jour proposées et de vérifier si le plugin ou le thème sera encore développé à l'avenir. Les outils WordPress qui sont régulièrement développés bénéficient généralement d'un support plus actif. La probabilité qu'ils restent compatibles avec les futures versions de ton site est également plus élevée.

Mises à jour et sécurité de WordPress

La mise à jour régulière de tes thèmes et plugins réduit la vulnérabilité aux accès non souhaités. Les bugs sont résolus et tes sites web sont adaptés à l'environnement technique en constante évolution. Des plugins de sécurité comme WordFence aident en outre à garder une vue d'ensemble de ton site et de sa sécurité et à réagir à temps en cas de problèmes. Un certificat SSL devrait être intégré à chaque site web. 

Meilleures pratiques en matière de design web : tes questions

Quelles questions poses-tu à Sonja ? Quelles sont les meilleures pratiques que tu peux recommander toi-même ? N'hésite pas à utiliser la fonction commentaire. Tu veux plus de conseils sur le webdesign et le développement ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.