Les grands principes du design à utiliser sur votre site web

par | Publié le 16/01/2025 | Site internet

« Le design est le langage corporel de votre marketing. Ne vous vautrez pas. » Mark King

En clair, ça veut dire : respectez les principes du design !

Mark King est à la fois designer et illustrateur. Il est reconnu pour ses créations où la typographie tient une place de choix. Dans son manifeste, il soutient que la seule opinion qui importe est celle de vos clients.

Je ne peux que souscrire à ce point de vue ! Oui, le seul avis qui ait vraiment de la valeur c’est celui de vos clients. C’est la raison pour laquelle le design de vos communications est si important. 

On va plonger aujourd’hui dans les principales règles de design que vous devez adopter sur vos pages web pour remporter l’effet WOW ! 

L’effet que votre site doit produire sur vos visiteurs 😉

 

« Il y a trois réponses à une création – oui, non, et WOW ! Wow est celle à viser. » Milton Glaser

I love NY Milton Glaser

Le design, au croisement de l’esthétique et de la fonctionnalité

Le design, ce n’est pas uniquement faire du « beau », c’est précisément mettre en oeuvre le principe de l’architecte Louis Sullivan : la forme doit suivre la fonction.

Révolutions industrielles, Bauhaus et principes du design

Jusqu’au XIXe siècle, les arts graphiques se contentaient de viser l’esthétique sans se soucier de la fonctionnalité. Peu à peu, les révolutions industrielles ont modifié ce paradigme.

Mais c’est en 1919 que le Bauhaus, nouvellement fondé par Walter Gropius, a clairement révolutionné la conception graphique et posé les bases du design moderne. Comment ? Les artistes du Bauhaus ont prôné l’union entre art et industrie. Le design se devait d’être simple, fonctionnel et épuré. 

Ces idées ont influencé tous les domaines du design : de l’architecture au mobilier, jusqu’aux interfaces numériques actuelles. Le meilleur représentant est Dieter Rams, designer chez Braun, qui a posé les bases du design fonctionnaliste dans les années 60 et 70.

Design fonctionnel dont les experts de chez Apple sont encore aujourd’hui les dignes héritiers.

Bauhaus

Le passage au numérique : la naissance du design web

Dans les années 1990, le design a dû s’adapter à un support encore inconnu : internet. Internet c’est d’ailleurs à la fois un media à part entière et un support. D’où la nécessité d’adapter les principes classiques du design à ce nouveau support numérique.

Vous vous en souvenez certainement, dans les années 2000, l’esthétique n’était pas le souci principal des concepteurs de sites ! On accédait à des pages uniquement fonctionnelles via nos modems 56K (bonjour la GenX !).

Le web 2.0 a permis d’évoluer vers des interfaces utilisateur (UI) à la fois plus intuitives et esthétiques.

Aujourd’hui, ce sont ces principes hérités du design graphique et industriel qui s’appliquent au design web. A cela, on ajoute une dose d’interactivité et d’UX (expérience utilisateur).

Les principes du design et les règles de hiérarchie visuelle

 

Suivre ces principes de hiérarchie visuelle pour la conception de vos pages web, c’est assurer une véritable expérience à vos utilisateurs. C’est également votre meilleur moyen d’atteindre vos objectifs stratégiques.

1. Hiérarchie visuelle

La hiérarchie visuelle consiste à organiser les éléments d’une page pour guider le regard de l’utilisateur. Vous pouvez jouer sur la taille des éléments, le contraste, la couleur ou la position des éléments.

Les principes du design

2. Équilibre et symétrie

Un design équilibré apporte de la stabilité et un sentiment d’harmonie. Vous pouvez utiliser une symétrie stricte comme un équilibre asymétrique dynamique.

 

3. Contraste

Le contraste aide à différencier les éléments et à rendre le contenu lisible. Le contraste s’opère via les couleurs, les tailles ou les typographies. Le site de Spotify, par exemple, utilise un contraste élevé entre le texte blanc et les arrière-plans noirs ou verts, ce qui améliore la lisibilité.

 

4. Cohérence

La cohérence garantit que tous les éléments d’un site suivent une logique visuelle et fonctionnelle. Cela inclut les polices, les couleurs, les boutons et les espacements. C’est ce que fait Airbnb sur son site avec des couleurs pastel et une typographie uniforme.

 

5. Lisibilité et typographie

La typographie est un pilier majeur du design. Elle doit être lisible sur tous les appareils, avec des tailles de police adaptées, des interlignes suffisants et une mise en forme simple. N’hésitez pas à aller jeter un oeil à Google Fonts pour choisir votre typo. Vous trouverez des typographies bien conçues, souvent utilisées sur des sites professionnels.

 

6. Espaces blancs

Les espaces blancs, ou espaces négatifs, sont fondamentaux sur une page web. Ils permettent de respirer visuellement et de mettre en valeur les éléments importants.

Le site de Tesla en est le parfait exemple : il exploite les espaces blancs pour focaliser l’attention sur les voitures et les messages clés.

 

7. Accessibilité

Évidemment, un site bien conçu doit être accessible à tous, y compris aux personnes souffrant de handicaps. Pour cela, veillez à prévoir des contrastes suffisants, des descriptions alternatives pour les images (balises alt) et une navigation au clavier. Microsoft a mis l’accent sur l’accessibilité sur son site en proposant de nombreuses options d’accessibilité.

 

8. Adaptabilité et réactivité

Le design responsive, c’est la base. Chacun utilise un appareil différent pour naviguer. Votre design doit s’adapter impérativement aux différentes tailles d’écran.

 

3 exemples de sites qui respectent les principes du design

 

Leboncoin

Leboncoin, c’est le parfait exemple d’un design web axé sur la fonctionnalité :

  • Hiérarchie visuelle : Les catégories sont bien organisées et les annonces prioritaires sont mises en évidence.
  • Équilibre : Agencement est simple et intuitif. On voit que l’esthétique n’est pas la priorité… Néanmoins, l’oeil de l’utilisateur n’est pas surchargé, on va à l’essentiel.
  • Accessibilité : Le site est conçu pour être facile à utiliser même par des personnes peu à l’aise avec le numérique.

 

MyCanal

Ce site est une référence en termes de design visuel pour les plateformes de streaming en France :

  • Contraste : Utilisation de fonds sombres et de visuels colorés pour mettre en valeur les contenus vidéo.
  • Cohérence : Une palette de couleurs homogène et une typographie élégante qui renforcent la cohésion visuelle.
  • Adaptabilité : Le site et l’application offrent une expérience fluide sur tous les appareils, des smartphones aux Smart TV.

 

Michel et Augustin

Ce n’est pas la 1ère fois que je vous parle de Michel et Augustin. Le site de la marque est une exemple parfait de design ludique et engageant :

  • Hiérarchie visuelle : Les produits phares et les promotions sont toujours au centre de l’attention.
  • Espaces blancs : Le design laisse respirer les éléments, la navigation est facile et agréable.
  • Cohérence : L’univers graphique de la marque est respecté partout. L’identité est claire et lisible.

 

3 exemples de sites qui sont passés à côté

 

PagesJaunes

Certes, ce site est avant tout destiné à être purement fonctionnel, mais franchement, le design est vraiment daté :

  • Manque de hiérarchie visuelle : Les résultats de recherche sont mal organisés, et le contenu important n’est pas mis en évidence.
  • Surcharge visuelle : Trop d’éléments (publicités, widgets inutiles) encombrent l’interface.
  • Accessibilité : Le contraste et la lisibilité pourraient être améliorés pour une meilleure expérience utilisateur.

 

SNCF Connect

Lors de son lancement, SNCF Connect a essuyé beaucoup de critiques quant à ses problèmes de design :

  • Cohérence : La refonte du site a créé des incohérences dans l’interface, avec des fonctionnalités difficiles à trouver.
  • Accessibilité : Certains utilisateurs avaient des difficultés à naviguer sur mobile.
  • Expérience utilisateur : Le site manque parfois de clarté dans l’affichage des itinéraires et des prix, d’où la frustration de certains usagers.

Impots.gouv.fr

Le site remplit son rôle administratif, certes, néanmoins son design reste perfectible :

  • Manque d’esthétique : L’aspect visuel est vraiment minimaliste à l’excès, sans effort pour rendre l’expérience plus engageante. Et c’est encore pire sur l’interface pour les professionnels !
  • Hiérarchie visuelle : L’information est parfois noyée dans des listes ou des menus peu intuitifs.
  • Adaptabilité : Si le site est techniquement responsive, l’expérience utilisateur mobile pourrait être améliorée.

 

Soigner le design est désormais un incontournable pour tout site web.

Attention tout de même car les standards évoluent sur le web comme pour les arts graphiques en général. Votre site qui est à la pointe de la tendance, semblera daté au bout de quelques années. C’est comme une boutique : il est peut-être temps de prévoir un lifting 😉

Quoi qu’il en soit, ne misez pas que sur l’esthétique. Travaillez le fond d’abord. Adaptez la forme ensuite. 

« Le contenu précède le design. Le design en l’absence de contenu n’est pas du design, c’est de la décoration. » Jeffrey Zeldman

 

Vous êtes un peu perdus ? Ça tombe bien, nous pouvons vous aider !

Les articles similaires qui pourraient vous intéresser

Pin It on Pinterest

Share This