Principes de base pour un webdesign harmonieux 

Sonja Hoffmann Dernière mise à jour le 21.10.2020
7 Min.
Principes de base du webdesign
Dernière mise à jour le 21.10.2020

Comme le dit le proverbe : "Il n'y a pas de seconde chance pour une première impression". Vous appelez un site web inconnu et vous jugez en quelques secondes si cette page est "bonne" ou "mauvaise". Surtout avec vos propres créations, il est infiniment difficile de faire une analyse objective. Heureusement, il existe des principes de conception éprouvés que vous pouvez utiliser comme guide. Une vue d'ensemble.

Qu'est-ce qu'un "bon" design web de toute façon ?

La conception de sites web est assez complexe : il faut plus qu'un simple œil pour une bonne typographie et un flair pour une disposition visuelle attrayante. Il est vrai que la conception de sites web offre des possibilités d'expression créative incroyablement variées. Mais elle offre aussi au moins autant de possibilités de s'enliser dans le processus de conception. Surtout lorsque vous êtes profondément ancré dans le processus de conception, il est facile de perdre de vue la forêt pour les arbres. Le résultat peut être un dessin que nous percevons comme "mauvais".

Notre évaluation est souvent intuitive, il est donc difficile d'expliquer pourquoi un même élément de conception s'adapte parfaitement à un site web alors qu'il semble perdu et déplacé sur un autre.

Qu'est-ce qui fait le succès d'un site web ?

Les bons sites web présentent les informations de manière claire et efficace afin que les utilisateurs puissent s'y retrouver intuitivement. La plupart du temps, un site web centré sur l'utilisateur réussit grâce à un jeu bien équilibré de typographie, d'éléments interactifs et de beaucoup de peaufinage visuel. 

Et comme ce n'est pas assez compliqué, nous sommes également limités par ce que les navigateurs de nos utilisateurs potentiels peuvent afficher. Si nécessaire, également par les compétences techniques du développeur ou par l'outil que nous utilisons pour créer le site web respectif. 

En outre, vous devez tenir compte des tendances actuelles et de l'identité visuelle de votre client. La conception de sites web est essentiellement la somme de l'UX, de l'UI et de la conception graphique, de l'IC et des tendances actuelles, en tenant compte des conditions techniques.

La création d'un site web est un projet assez vaste. Pas étonnant qu'il y ait généralement toute une équipe derrière. Souvent, les individus (et malheureusement, les équipes) ont tendance à accorder plus d'attention aux domaines dans lesquels ils sont particulièrement forts. Alors que d'autres domaines reçoivent moins - ou dans des cas extrêmes - d'attention. Cela crée un déséquilibre qui peut vous amener à percevoir un site web comme étant de mauvaise qualité et inharmonieux.

Un "bon" design web est le résultat d'un équilibre entre les différents domaines du design et les réalités techniques.

Étant donné qu'un examen détaillé de tous les domaines dépasserait le cadre de cet article, je me consacrerai aujourd'hui principalement à la conception visuelle. 

Contraste, espace blanc et couleur

Le contraste va souvent de pair avec le choix des couleurs primaires dans le dessin, ainsi que des espaces blancs dans la composition. Cependant, l'espace blanc ne signifie pas nécessairement ici l'espace qui est laissé blanc. Elle se réfère plutôt aux espaces entre les éléments. Cet espace est également appelé "espace négatif" et peut toujours être coloré.

Beaucoup d'espaces blancs donnent généralement à une page un aspect plus ordonné et plus clair. Cette approche va souvent de pair avec le minimalisme. Cela signifie qu'il faut systématiquement supprimer de la mise en page tout ce qui est inutile et qui n'apporte aucune valeur ajoutée reconnaissable au dessin ou modèle. Qu'il s'agisse de textes, d'éléments décoratifs ou d'un flot de CTA.

Conseil

Lorsque vous planifiez le contraste et la couleur, vous devez également garder les éléments suivants à l'esprit : Un contenu difficile à lire peut, dans certaines circonstances, faire en sorte que les personnes souffrant d'un handicap visuel (par exemple, la reconnaissance des couleurs) ne puissent plus le percevoir.

En particulier avec la tendance à remplir les en-têtes des sites web avec de grandes images panoramiques, nous trouvons souvent des superpositions de texte difficiles à déchiffrer.

Un exemple réussi de beaucoup d'espace et de contraste

Principes de base pour un webdesign harmonieux 
Principes de base pour un webdesign harmonieux 

https://aiven.io/

Un faible exemple de contraste

Voici un exemple qui pose un problème de contraste, surtout dans la version mobile. L'appel à l'action est complètement perdu devant le fond bosselé.

pourquoi-ux-failles
https://www.opitz-consulting.com/

Parfois, il n'est pas si facile pour les designers de filtrer les bonnes couleurs pour un dessin. Heureusement, il existe des outils qui nous permettent de tester rapidement différentes combinaisons - avant de passer beaucoup de temps à créer une mise en page coûteuse.

Théorie des couleurs : ces outils vous aident à choisir les couleurs

Outil couleur de conception des matériaux

Material Design Color Tool crée des images filaires de basse fidélité en utilisant deux couleurs primaires.

matériau-conception-couleur-outil

La roue des couleurs d'Adobe

Laroue des couleurs d'Adobe vous aide non seulement à créer différentes palettes de couleurs, mais aussi à extraire les palettes de couleurs utilisées des dessins existants. Depuis peu, cela est également possible sur la base de gradients de couleur.

adobe-color-wheel

Pour choisir les couleurs appropriées, il est utile d'examiner attentivement l'image de marque du client : Quelles sont les palettes de couleurs déjà utilisées ? Dans quelle mesure puis-je m'en écarter ?

Les bases de la théorie des couleurs sont également incontournables : en fonction du secteur d'activité de votre client, une couleur ayant l'effet psychologique approprié peut être choisie. Ce n'est pas un hasard si le bleu est souvent utilisé dans des secteurs plus sérieux - comme les assurances, le conseil et les sites de comparaison. Le bleu a un effet apaisant et inspirant la confiance. Cependant, il est important de ne pas être trop général ici, car même des nuances de la même couleur peuvent évoquer des émotions très différentes.

Connaissez-vous la règle des 60-30-10 ?

C'est une règle d'or recommandée pour l'utilisation des palettes de couleurs. Le principe appliqué ici est le suivant : la couleur principale représente environ 60 % de la mise en page, une couleur complémentaire en représente 30 % et une troisième couleur met en évidence 10 % de la mise en page. Cette disposition a un effet particulièrement équilibré sur l'utilisateur.

Disposition symétrique ou asymétrique des éléments du dessin

Dans son article "The Principles of Design and Their Importance", l'auteur et designer Cameron Chapman explique ses deux approches les plus importantes de l'équilibre dans la conception de sites web. Elle distingue ainsi les contenus en fonction de leur visibilité, c'est-à-dire s'ils sont plus accrocheurs ou moins proéminents. 

En conséquence, le défi suivant consiste à organiser le contenu de manière à ce qu'il transmette un sentiment d'équilibre. La décision de conception "disposer symétriquement ou asymétriquement" peut aider ici.

Comment les deux approches fonctionnent-elles ?

Dans l'approche symétrique, des éléments de même importance sont disposés ensemble. L'approche asymétrique, en revanche, organise ensemble les contenus les plus importants et les moins importants. 

Par exemple, la mise en page peut être maintenue propre. Les éléments sont clairement séparés les uns des autres, comme c'est le cas du Couro Azul. Souvent, ces contenus sont placés légèrement excentrés pour donner un peu plus d'espace à l'élément le plus faible et créer un équilibre.

Couro Azu

Zéro, par contre, utilise le même principe - mais avec un arrangement plus libre. La forte utilisation de l'espace blanc donne à ce dernier un aspect élégant et contemporain.

Cette approche fonctionne très bien sur les grands écrans (à partir de la taille d'une tablette). Les appareils plus petits, tels que les smartphones, en revanche, bénéficient de modules clairement séparés, disposés les uns sous les autres.

Définir et fixer les priorités

Avant de commencer la conception d'un site web, il convient de définir clairement le message à communiquer. Souvent, la clarté du concept de marketing apporte également de la clarté dans la présentation du design.

Une fois que les messages clés ont été déterminés, l'étape suivante consiste à les mettre en évidence par l'utilisation de la couleur et/ou de la typographie.

Vous pouvez voir dans cet exemple comment les deux peuvent être combinés :

cowboy
https://cowboy.com

Toutefois, il existe également de nombreuses possibilités de mise en œuvre dans ce domaine. Le contenu peut être mis en valeur non seulement par une typographie et des couleurs vives. Vous pouvez également, par le biais d'images - comme dans le cas du restaurant de Jamie Oliver - et grâce à l'interaction de différents principes, mettre en valeur le contenu sélectionné.

Restaurant Jamie Oliver's

Proportion, regroupement et hiérarchie

Le contenu d'une page doit être présenté de manière à ce qu'il ait un sens dans sa hiérarchie. Par conséquent, vous placez le plus important au sommet. Avec une importance décroissante, vous devriez vous frayer un chemin vers le bas. Vous devez donc vous demander : quelles sont les informations les plus importantes pour le visiteur de ma page ? Qu'est-ce qu'une simple information complémentaire ? 

C'est également la raison pour laquelle le menu de navigation se trouve en haut dans la plupart des cas. Outre le fait qu'il s'agit d'un modèle d'assurance-chômage, c'est simplement l'un des aspects les plus importants d'une page. Après tout, le menu n'est rien d'autre qu'un aperçu du contenu principal que vous y proposez. La déclaration de contenu de votre site web, pour ainsi dire.

Hiérarchie visuelle : ce qui est vraiment important

La hiérarchie peut également être créée par ce qu'on appelle le mouvement. Ici, nous organisons le contenu de la page de manière à ce que l'œil soit guidé à travers elle. Cela peut être réalisé, par exemple, à l'aide de formes et d'agencements. Ce portfolio est un exemple intéressant de ce à quoi pourrait ressembler une telle chose :

Portefeuille

L'œil est guidé à travers l'écran de gauche à droite. Le point 01 a clairement la plus grande hiérarchie ici - même si tous les éléments sont de la même taille et semblent initialement avoir la même valeur. 

La proportion joue donc aussi un rôle : des éléments de même taille, de même couleur, de même forme nous donnent essentiellement le sentiment qu'ils sont liés et qu'ils ont la même fonction. Cela est particulièrement important pour les éléments interactifs.

L'exemple présenté ci-dessus montre qu'un design cohérent peut largement contribuer à l'harmonie visuelle : 

  1. Des formes uniformes sont utilisées pour toutes les images,
  2. toutes les images s'harmonisent en couleur, 
  3. Dans l'ensemble, seuls deux types et tailles de police différents sont utilisés, 
  4. une seule couleur est utilisée pour les fautes de frappe et les séparateurs,
  5. les séparateurs représentent un élément de conception récurrent - et ils unissent visuellement l'image et les deux rubriques.

Principes de base de la conception de sites web - Conclusion

Malgré tous les principes de base susmentionnés, les règles sont là pour être enfreintes. C'est la seule façon de créer un design intéressant et original !

Les approches que j'ai brièvement présentées ici ne sont bien sûr pas nouvelles. Il s'agit plutôt de variations de la recherche scientifique et/ou psychologique qui ont été appliquées à nos moyens de communication actuels. Connaître ces théories et ces méthodes est une chose que je trouve personnellement importante. De toute façon, nous appliquons souvent les règles de manière intuitive, parce que notre œil créatif l'a "appris" de cette manière.

De plus, le fait de connaître les différentes approches de la conception vous aide à évaluer vos propres projets. Pensez-y comme une liste de contrôle à laquelle vous pouvez vous référer lorsque vous vous rendez compte que quelque chose ne fonctionne pas encore visuellement. Souvent, vous ne pouvez pas trouver la distance nécessaire par rapport à votre propre projet pour l'évaluer objectivement. 

Les principes de conception évoqués ici sont loin d'être complets. Si vous souhaitez approfondir le sujet, n'hésitez pas à consulter ces articles et livres électroniques : 

Quel est votre avis sur les principes de conception ? Quelles questions avez-vous pour Sonja ? N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux articles sur la conception et le développement de sites web pour les agences et les indépendants ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la ville verdoyante d'Auckland, Sonja Hoffmann s'est spécialisée dans la conception et le développement de sites web et d'applications. Elle se concentre sur la ludification et les causes derrière la motivation et l'expérience des utilisateur·rice·s, et y combine une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.