Bonnes pratiques, conseils et lignes directrices en matière de conception de sites web que vous devriez connaître

8 Min.
Bonnes pratiques de conception de sites web

Quelles sont les meilleures pratiques en matière de conception de sites web ? Comment les mettre en œuvre avec succès dans votre prochain projet de web design ? Et que définissons-nous réellement comme norme de conception et meilleures pratiques en matière de conception de sites web ?

Qu'entendons-nous par "meilleures pratiques" ?

Il existe des règles fixes en matière de développement web, qui portent principalement sur la lisibilité et la propreté du code et la sécurité d'un site web. En revanche, dans la conception de sites web, la terminologie est un peu plus vague et les règles sont plus ouvertes à vos propres interprétations.

Les meilleures pratiques : Le webdesign, c'est plus que de l'esthétique

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

Les meilleures pratiques en matière de conception de sites web sont un ensemble de règles qui doivent être suivies pour répondre aux attentes générales des utilisateurs. Elles constituent également des lignes directrices pour une plus grande clarté et une meilleure expérience pour l'utilisateur.

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

J'aborderai également brièvement le thème des meilleures pratiques dans le domaine du développement WordPress . Comme vous le savez certainement, la planification et la gestion de projet sont une partie importante de la conception de sites web. Dans cet article, je laisserai ces deux sujets de côté pour l'instant, car cela dépasserait le cadre de cet article.

Les meilleures pratiques : Conception visuelle

Nous commençons maintenant avec les normes établies pour la conception visuelle : quelles sont les meilleures pratiques dans le domaine de la conception visuelle ? Et quels sont les facteurs en jeu ?

Caractéristique de reconnaissance et image de marque

Le site web doit s'intégrer au reste de l'apparence de l'entreprise et doit être basé sur le guide de style. Consultez le site web pour les questions suivantes :

  • Pouvez-vous dire à première vue pour quelle entreprise le site web a été créé ?
  • Le guide de style a-t-il été intégré ?
  • Les opérateurs du site sont-ils reconnaissables aux éléments visuels ?
  • 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 l'image de marque ?

Google est à l'avant-garde de la cohérence des marques. Je ne vois aucune autre marque qui propose autant de produits différents et qui parvient pourtant à donner à chaque produit l'impression d'être une entreprise. Même lorsque je regarde un produit Google que je n'ai jamais vu auparavant, je peux l'associer directement à la marque.

Comment Google procède-t-il ?

Entre autres par une utilisation cohérente des couleurs de Google, de la typographie, des espaces blancs distinctifs, de l'appel à l'action et de la navigation. Les logos présentent également une certaine cohérence qui fonctionne entre les entreprises et les catégories - bien que cela ne signifie pas nécessairement que le design va également générer des faveurs.

En ce qui concerne la cohérence de l'image de marque, il s'agit d'abord de déterminer si le site web reflète au mieux l'entreprise et son image de marque.

Norme de conception web et convivialité

Une autre "meilleure pratique" est définie par l'intégration de normes. Cela comprend, par exemple, le placement du logo dans le coin supérieur gauche, l'apparition de boutons, de liens, etc. Ils aident les visiteurs de votre site à s'y retrouver rapidement et facilement. Ces normes sont donc indispensables pour la mise en œuvre d'une utilisation réussie.

Autres ressources sur le thème de la convivialité :

Pourquoi devriez-vous vous intéresser particulièrement à la convivialité et à l'expérience des utilisateurs en tant que concepteur de sites web ? Vous trouverez des approches plus complètes sur le thème de l'utilisabilité dans cet article et sur https://www.usability.gov/.

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

Nous définissons des normes de conception répandues dans le domaine de la conception web par Modèles de conception de l'assurance-chômage. Andy Crestodina explique très clairement comment les normes sont définies dans son article sur Normes de conception de sites web.

Selon ce principe, une approche de conception doit être utilisée sur au moins 80 % des sites web pour être considérée comme standard. Tout le reste est soit une habitude (50-79 %), soit même une source d'incohérence et de confusion (0-49 %) pour votre site.

Dessin harmonieux : la règle des tiers

Sur le sujet un webdesign harmonieux J'ai déjà fait un rapport. Cette fois, je voudrais entrer dans le détail de la règle des tiers.

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

Conception de l'interaction
Source : interaction-design

Lors de la création de sites web, la règle des tiers vous aide avant tout à placer les informations les plus importantes de manière à ce que le visiteur puisse les percevoir directement. 

En termes simples, un élément visuel ne doit pas occuper plus de trois cases et doit être situé dans un tiers de la disposition. Les nœuds sont également particulièrement bien adaptés pour placer des messages importants et des appels à l'action.

Dans Photoshop, vous pouvez rapidement et facilement revoir et ajuster vos mises en page en utilisant l'outil de recadrage et le réglage de la règle des tiers. Pour illustrer la règle des tiers, j'ai créé le site web de Marqeta un peu plus près :

Bonnes pratiques

Le produit et son message sont bien répartis entre les nœuds. Ici, la conception pourrait être rendue un peu plus efficace en déplaçant un peu le CTA. Cependant, l'harmonie du design en souffrirait quelque peu :

Bonnes pratiques

La version mobile montre clairement que le message remplit le tiers inférieur de la mise en page, tandis que le produit est affiché de manière assez centrée. Ici, nous pourrions encore repenser le placement du CTA.

Les "cartes thermiques" vous aident également à savoir où les visiteurs de votre site regardent et cliquent principalement. L'outil Crazy Egg offre ici par exemple un service (payant).

Une autre façon de vérifier votre conception est le test dit "Blur". Ici, vous prenez la netteté de votre mise en page (par exemple, en utilisant Photoshop et le "flou gaussien" - 12 %). Si les utilisateurs ne peuvent plus lire le contenu, il devient rapidement clair où se trouve le centre d'intérêt lors de la consultation du site web. Ce test est également bien adapté à l'analyse du CTA. Est-il encore reconnaissable en tant que tel ?

Meilleures pratiques en matière de conception de sites web

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

Meilleures pratiques en matière de conception de sites web

La version mobile que j'ai désarmée encore plus pour tester ce qui reste. Ici, le produit attire d'abord l'attention, puis le CTA et le logo. Vous pouvez faire ce test avec l'ensemble du site - le mieux dans la phase de conception. Ici, vous pouvez rapidement et facilement analyser les éléments de votre design qui sont importants et décider si c'est ce que vous voulez.

Texte et référencement

La création de sites web comprend naturellement du contenu écrit. Pour cela, il existe des rédacteurs professionnels qui - en tenant compte du référencement, de la convivialité et du guide de style - rédigent un contenu pertinent pour votre site web. Mais il y a aussi quelques lignes directrices que vous pouvez suivre vous-même. 

Vous devez accorder une attention particulière à la longueur et à la lisibilité des textes - souvent les textes sont trop longs et trop imbriqués. 

Même si le groupe cible est habitué à un certain jargon, vous devez toujours être conscient que notre capacité d'attention sur un site web est beaucoup plus réduite que lorsque nous lisons des articles professionnels, par exemple. Nous recherchons plutôt des informations spécifiques lorsque nous naviguons sur des sites web. Nous sommes plus susceptibles de scanner le contenu plutôt que de prendre le temps de le lire correctement.

De même, sur Google, il y a des points négatifs si les phrases de votre page sont trop longues et des points positifs si elles sont remplacées par des phrases dites "mots de transition" sont interconnectés.

Des contributions intéressantes sur le thème de l'optimisation des moteurs de recherche sont également disponibles :

Accessibilité

L'accessibilité du web reste malheureusement un sujet marginal - et trop souvent ignoré. Il existe également des approches simples que nous pourrions prendre en compte dès la première conception. Par exemple, utilisez-vous principalement des couleurs pour mettre en valeur les informations ? 

Vous pouvez facilement le tester en regardant votre site web en noir et blanc :

Meilleures pratiques en matière de conception de sites web

Pour cela, j'ai analysé à nouveau le même site web. Même sans couleurs, le message est clair. Le CTA en haut à droite pourrait devenir problématique en ce qui concerne le contraste.

Pour vérifier cela avec certitude, il existe le "Contrôleur de contraste". Le rapport de contraste par défaut est d'au moins 4,5:1 pour les textes normaux et de 3:1 pour les textes de grande taille, comme les titres :

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

Si je précise les tons de gris, le CTA n'est pas assez riche en contraste, mais la variante de couleur est suffisante.

http://colorsafe.co/ est un autre outil permettant de déterminer les couleurs et leur contraste. Ici, vous pouvez essayer directement différentes combinaisons de couleurs. Le ratio vous est donné directement et vous avez la possibilité de sélectionner les polices de caractères et aussi en fonction desquelles Norme WCAG vous voulez faire votre choix.

Des problèmes peuvent survenir avec l'utilisation des couleurs pour la représentation visuelle des traitements d'erreurs. Prenons des éléments de forme, par exemple. Les erreurs sont souvent représentées ici en surlignant en couleur la zone de saisie. Cela peut faire en sorte qu'une personne ayant une faiblesse de couleur ne soit pas capable de reconnaître les erreurs et donc de les résoudre. 

Vous devez en tenir compte lors de la planification et donc toujours vous assurer qu'il existe une autre représentation de l'erreur. Vous trouverez ici d'autres faits et ressources intéressants sur l'accessibilité, ainsi que de précieux conseils pour créer une page WP accessible.

Autres ressources

Résolution et conception de dispositifs croisés

Il n'y a probablement aucune règle en matière de conception de sites web qui soit plus souvent abordée - et plus souvent ignorée - que "mobile first”.

Dans cette approche, le contenu est créé pour les appareils mobiles, puis adapté pour les plus grands. L'inverse est de concevoir pour les ordinateurs de bureau et autres et de les adapter ensuite à des appareils plus petits. 

Deux autres approches me viennent à l'esprit :

  • Créez un site web distinct pour chaque appareil mobile et de bureau, puis appelez-le en conséquence.
  • Afficher le site web en version de bureau sur votre téléphone portable

La première peut être la bonne approche - selon le projet - mais elle n'est pas très répandue car elle est très coûteuse et prend beaucoup de temps. Malheureusement, ce dernier est encore trop souvent vu sur le web et doit donc être ajouté d'urgence à la liste des "meilleures pratiques". Vous trouverez d'autres conseils pour l'optimisation des téléphones mobiles ici.

Mobile first ne doit pas nécessairement toujours être la bonne voie : Une recherche sur le groupe cible et son comportement sur Internet peut vous montrer rapidement quels sont les appareils principalement utilisés pour accéder à votre site. 

L'idée sous-jacente est non seulement que le contenu soit préparé de manière visuellement appropriée, mais aussi que les conditions extérieures modifiées soient prises en compte. Vous pouvez trouver plus de détails dans l'article Mobile-Première conception d'UX n'est plus une tendance Lisez.

Le tableau suivant montre clairement quels sont les écrans utilisés pour accéder à l'Internet le plus fréquemment. Cela peut vous aider à décider pour quels écrans vous souhaitez optimiser vos sites web. Mais veuillez noter qu'une telle généralisation ne peut être qu'une ligne directrice. Une analyse de vos groupes cibles ne peut pas remplacer ces statistiques.

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

les meilleures pratiques pour WordPress

WordPress Codex

WordPress vous offre un nombre incroyable de possibilités pour présenter vos créations sur le web. Mais même ici, il existe des normes et des meilleures pratiques que vous devriez suivre.

Le Codex WordPress

WordPress fournit un codex général à cet effet, qui peut vous aider à traiter le sujet plus en détail.

WordPress Plugins et Themes

Pour choisir le bon Plugins et Themes , ce n'est pas seulement sa fonctionnalité actuelle qui est importante. Il est également conseillé de lire les critiques et de se familiariser avec la fréquence des mises à jour et de savoir si Plugin ou Theme sera développé à l'avenir. WordPress Les outils qui sont régulièrement perfectionnés bénéficient généralement d'un soutien plus actif. Il est également plus probable qu'ils restent compatibles avec les futures versions de votre site.

WordPress Mises à jour et sécurité

La mise à jour régulière de vos sites Themes et Plugins réduira votre vulnérabilité aux accès non désirés. Les bugs seront résolus et vos sites web seront adaptés à l'environnement technique en constante évolution. La sécurité Plugins et WordFence permet également de garder votre site et sa sécurité en un coup d'œil et de réagir à temps en cas de problème. Un certificat SSL devrait être intégré à chaque site web. 

Bonnes pratiques en matière de conception de sites web : vos questions

Quelles questions avez-vous pour Sonja ? Quelles sont les meilleures pratiques que vous pouvez vous recommander ? Veuillez utiliser la fonction de commentaire. Vous voulez plus de conseils sur la conception et le développement de sites web ? Alors suivez-nous sur TwitterFacebook ou sur notre Newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la région verdoyante d'Auckland, il s'est spécialisé Sonja Hoffmanndans la conception de sites web et d'applications et leur développement. Elle se concentre sur la ludification et l'exploration de la motivation et de l'expérience des utilisateurs, associées à une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .