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 d'ailleurs, 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 design web, la terminologie est un peu plus floue et les règles plus ouvertes à tes propres interprétations.
Les meilleures pratiques : Le design web, c'est plus que de l'esthétique
Les meilleures pratiques en matière de design web sont une série de règles à suivre pour répondre aux attentes générales des utilisateurs. En outre, ce sont des directives pour plus de clarté et une meilleure expérience d'utilisation.
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 t'aideront dans ton prochain projet.
J'aborde également brièvement le sujet 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 du design 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 s'harmoniser avec le reste de l'image de l'entreprise et doit suivre le guide de style. Vérifie donc le site web en répondant aux questions suivantes :
- Est-ce que l'on peut voir au premier coup d'œil pour quelle entreprise le site web 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 sujet du consistent branding. Je ne peux pas penser à une autre marque qui a autant de produits différents et qui réussit à donner à chaque produit l'image de l'entreprise. Même si je regarde un produit Google que je ne connais pas, je peux l'associer directement à la marque.
Comment fait Google ?
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 ne fais pour l'instant qu'analyser si le site web reflète de manière optimale l'entreprise et son branding.
Webdesign standard et utilisabilité
Une autre "meilleure pratique" se définit par l'intégration de standards. Cela inclut par exemple le placement du logo dans le coin supérieur gauche, l'apparence des boutons, des liens, etc. Ceux-ci aident les visiteurs de ton site à s'orienter rapidement et facilement. C'est pourquoi ces standards sont indispensables à la mise en place d'une ergonomie réussie.
Autres ressources sur l'utilisabilité
Pourquoi devrais-tu t'intéresser à l'utilisabilité et à l'expérience utilisateur en tant que designer web ? 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 design web ?
Les standards de design les plus répandus dans le design web sont définis par les UI Design Patterns. Andy Crestodina explique très clairement comment les standards sont définis dans son article sur les standards de 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. Tout le reste est soit une habitude (50-79%), soit apporte même de l'incohérence et de la confusion (0-49%) sur ton site.
Un design harmonieux : la règle des tiers
J'ai déjà parlé du thème du design web harmonieux. Cette fois-ci, j'aimerais m'attarder un peu plus sur la règle des tiers.
Elle est utilisée depuis plusieurs centaines d'années, principalement dans le domaine des arts visuels et plus tard dans la photographie. Comme le montre le dessin, le design est divisé en 9 cases de taille égale :
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 trouver dans un tiers de la mise en page. De plus, les nœuds sont particulièrement adaptés pour placer des messages importants et des appels à l'action.
Dans Photoshop, tu peux rapidement et facilement vérifier et ajuster 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é de plus près le site de Marqeta:
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. Cependant, l'harmonie du design en souffrirait un peu :
La variante mobile montre clairement que le message remplit le tiers inférieur de la mise en page, alors que le produit est présenté de manière assez centrée. Ici, nous pourrions repenser l'emplacement du CTA.
Ce que l'on appelle les "heatmaps" t'aident aussi à savoir où les visiteurs de ton site regardent et cliquent principalement. L'outil Crazy Egg propose par exemple un service (payant).
Une autre possibilité de vérifier ton design est le test du flou. Pour ce faire, tu extrais 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 le contenu, il est facile de voir sur quoi ils se concentrent en regardant le site. Ce test est aussi un bon moyen d'analyser le CTA. Est-il toujours reconnaissable en tant que tel ?
Pour cela, j'ai à nouveau utilisé le site 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 :
J'ai encore allégé la version mobile pour tester ce qu'il reste alors. Ici, le produit est le premier à attirer l'attention, suivi du CTA et du logo. Tu peux faire ce test avec toute 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 tu souhaites qu'ils le soient.
Optimiser le contenu et le SEO
La création d'un site web implique bien sûr l'écriture de contenus. Il existe des rédacteurs professionnels qui rédigent des contenus utiles pour ton site web en tenant compte du SEO, de l'ergonomie et du guide de style. Mais il y a aussi quelques directives que tu peux suivre toi-même.
Tu dois accorder une attention 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 le contenu plutôt que de prendre le temps de le lire.
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 "mots de transition".
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 le premier design. Par exemple, utilises-tu principalement des couleurs pour mettre en valeur les informations ?
Tu peux le tester facilement en regardant ton site web en noir et blanc :
Pour cela, j'ai analysé à nouveau le même site. Même sans couleurs, le message est clair. Le CTA supérieur droit pourrait être problématique en termes de contraste.
Pour le vérifier avec certitude, il existe le "Contrast Checker". Le ratio de contraste par défaut est d'au moins 4,5:1 pour le texte normal et de 3:1 pour les grands textes, comme les titres :
Si j'indique les nuances de gris, le CTA n'est pas assez contrasté, mais dans la variante couleur, il est suffisant.
http://colorsafe.co/ est un autre outil pour déterminer les couleurs et leur niveau de contraste. Ici, tu peux essayer directement différentes combinaisons de couleurs. Le ratio t'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 des 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 des couleurs de l'entrée Box . Pour quelqu'un qui a un problème de couleur, cela peut empêcher de reconnaître les erreurs et donc de les résoudre.
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
"*" indique les champs requis
Résolution et design web responsive
En matière de design web, il n'y a probablement 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 et ensuite adapté aux plus grands. Le contraire est de concevoir le design pour les ordinateurs de bureau et autres, puis de l'adapter aux petits appareils.
Deux autres approches me viennent à l'esprit :
- Créer ton propre site web pour chaque appareil mobile et de bureau, puis le consulter en conséquence.
- Afficher le site web en version bureau sur ton téléphone portable
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 en temps et en argent. La dernière 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 d'adapter le contenu visuellement, mais aussi et surtout de tenir compte de l'évolution de l'environnement extérieur. Tu peux lire plus de détails dans 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 veux optimiser tes sites web. Mais n'oublie pas qu'une telle généralisation ne peut être considérée que comme une ligne directrice. Ces statistiques ne peuvent pas non plus remplacer une étude de tes groupes cibles.
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 meilleures pratiques que tu dois suivre.
Le codex WordPress
Plugins et thèmes WordPress
Pour choisir le bon plugin et le bon thème, il ne faut pas seulement se concentrer sur la fonctionnalité actuelle. Il est également conseillé de lire les critiques et de se familiariser avec la fréquence des mises à jour et de vérifier si le plugin ou le thème sera encore développé à l'avenir. Les outils WordPress qui sont développés régulièrement ont généralement un support plus actif. La probabilité qu'ils restent compatibles avec les futures versions de ton site est également plus élevée.
Mises à jour de WordPress et sécurité
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 design et le développement web ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.
