Principes de base du webdesign

Principes de base pour un webdesign harmonieux

Comme on le dit si bien : il n'y a pas de deuxième chance pour la première impression. Tu consultes un site web inconnu et tu juges en quelques secondes si ce site est "bon" ou "mauvais". C'est justement pour les créations personnelles qu'il est infiniment difficile de procéder à une analyse objective. Heureusement, il existe des principes de design qui ont fait leurs preuves et sur lesquels tu peux t'appuyer. Un aperçu.

Qu'est-ce qu'un bon design web ?

La conception de sites web est assez complexe : il ne suffit pas d'avoir l'œil pour une bonne typographie et le sens d'une disposition visuelle attrayante. Le design web offre certes des possibilités d'expression créative extrêmement variées. Mais il offre en même temps au moins autant de possibilités de se perdre dans le processus de conception. Surtout si l'on est profondément enraciné dans le processus de conception, il est facile de ne pas voir l'arbre qui cache la forêt. Il peut en résulter un design que nous considérons comme "mauvais".

Notre évaluation se fait souvent de manière intuitive, de sorte qu'il est difficile d'expliquer pourquoi le même élément de design convient parfaitement sur un site, alors qu'il semble perdu et déplacé sur un autre.

Qu'est-ce qui fait la réussite d'un site web ?

Les bons sites web présentent les informations de manière claire et efficace, de sorte que les utilisateurs trouvent intuitivement leur chemin à travers le site. La plupart du temps, un site WordPress orienté vers l'utilisateur est réalisé grâce à une combinaison bien équilibrée de typographie, d'éléments interactifs et d'un grand nombre de finitions visuelles. 

Et comme ce n'est pas encore assez compliqué, nous sommes également limités par ce que les navigateurs de nos utilisateurs potentiels peuvent afficher. Le cas échéant, nous sommes également limités par les compétences techniques du développeur ou de l'outil que nous utilisons pour créer le site WordPress en question. 

De plus, tu dois tenir compte des tendances actuelles et de l'identité visuelle de ton client. Le webdesign est en principe la somme de l'UX, de l'UI et du design graphique, de la CI et des tendances actuelles, tout en tenant compte des conditions techniques.

La création d'un site web WordPress est un projet assez vaste. Il n'est donc pas étonnant qu'il y ait généralement toute une équipe derrière. Souvent, les individus (et malheureusement aussi 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 d'attention - ou, dans les cas extrêmes, pas d'attention du tout. Il en résulte un déséquilibre qui peut te faire penser qu'un site WordPress est de mauvaise qualité et peu harmonieux.

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

Comme une étude détaillée de tous les domaines dépasserait le cadre de cet article, je me consacre aujourd'hui principalement au design visuel. 

Contraste, espace blanc et couleur

Le contraste va souvent de pair avec le choix des couleurs primaires du design et l'espace blanc dans la composition. Toutefois, l'espace blanc ne désigne pas nécessairement l'espace laissé en blanc. Il s'agit plutôt des espaces qui se trouvent entre les éléments. Cet espace est également appelé "negative space" et peut d'ailleurs être coloré.

En général, un site web est plus ordonné et plus clair lorsqu'il comporte beaucoup d'espace blanc. Cette approche va en outre souvent de pair avec le minimalisme. Cela signifie supprimer systématiquement de la mise en page tout ce qui est inutile et n'apporte pas de valeur ajoutée au design. Qu'il s'agisse de texte, d'éléments décoratifs ou d'une surabondance de CTA.

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

Conseil pour des contrastes réussis

Lors de la planification du contraste et de la couleur, tu dois également garder à l'esprit les points suivants : Un contenu difficile à lire peut, dans certaines circonstances, empêcher les personnes souffrant de troubles de la vision (par exemple, la reconnaissance des couleurs) de le percevoir.

Un exemple réussi de beaucoup d'espace blanc 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 noyé dans l'arrière-plan agité.

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

Parfois, il n'est pas facile pour les concepteurs de trouver les couleurs appropriées pour un design. 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 : outils pour le choix des couleurs

Material Design Color Tool

Material Design Color Tool crée des wireframes basse fidélité en imposant deux couleurs primaires.

matériau-conception-couleur-outil

Roue chromatique Adobe

Adobe Color Wheel t'aide non seulement à créer différentes palettes de couleurs, mais aussi à extraire les palettes de couleurs utilisées à partir de designs existants. Depuis peu, cela est également possible à partir de dégradés de couleurs.

adobe-color-wheel

Lors du choix des couleurs appropriées, il vaut la peine de jeter un coup d'œil attentif à la marque du client : Quelles palettes de couleurs sont déjà utilisées ? Dans quelle mesure puis-je m'en écarter ?

Les bases de la théorie des couleurs sont également inévitables : en fonction du secteur d'activité de ton client, il est ainsi possible de choisir une couleur ayant un effet psychologique approprié. Ce n'est pas un hasard si le bleu est souvent utilisé dans des secteurs plutôt sérieux - comme les assurances, le consulting et les sites de comparaison. Le bleu inspire confiance et rassure. Il ne faut toutefois pas être trop généraliste, car même des nuances de la même couleur peuvent susciter des émotions très différentes.

Connais-tu la règle des 60-30-10 ?

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

Symétrie ou asymétrie ?

Dans son article "The Principles of Design and Their Importance", l'auteur et designer Cameron Chapman explique ses deux principales approches en matière d'équilibre dans le design web. Selon elle, les contenus sont différenciés en fonction de leur visibilité, c'est-à-dire s'ils attirent plus ou moins l'attention. 

Le défi suivant consiste donc à organiser les contenus de manière à donner un sentiment d'équilibre. Pour ce faire, il est possible de prendre la décision créative de "disposer les contenus de manière symétrique ou asymétrique".

Comment fonctionnent les deux approches ?

Dans l'approche symétrique, les éléments ayant une proéminence similaire sont disposés ensemble. Dans l'approche asymétrique, en revanche, les contenus les plus en vue et les moins visibles sont disposés ensemble. 

Dans ce cas, la mise en page peut par exemple rester clean. Les éléments sont alors clairement séparés les uns des autres, comme c'est le cas pour Couro Azul. Souvent, de tels contenus sont placés de manière légèrement décentrée afin de donner un peu plus d'espace à l'élément le plus faible et de créer un équilibre.

Zero, en revanche, utilise le même principe - mais avec une disposition plus libre. L'utilisation importante de l'espace blanc lui confère 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, comme les smartphones, bénéficient en revanche de modules clairement séparés et disposés les uns en dessous des autres.

Définir et fixer des priorités

Avant de commencer à concevoir un site web WordPress, il convient de définir très clairement le message à communiquer. Souvent, la clarté du concept marketing apporte également de la clarté dans la mise en page du design.

Une fois les messages clés déterminés, il s'agit de les mettre en valeur par l'utilisation de la couleur et/ou de la typographie.

Tu peux voir dans cet exemple comment les deux peuvent être combinés :

cowboy
https://cowboy.com

Cependant, il existe également de nombreuses possibilités de mise en œuvre. En effet, les contenus ne peuvent pas être mis en valeur uniquement par la typographie grasse et la couleur. Tu peux également utiliser des images - comme dans le restaurant de Jamie Oliver - et combiner différents principes pour mettre en avant des contenus sélectionnés.

Restaurant Jamie Oliver's

Proportion et hiérarchie

Le contenu d'un site web doit être présenté de manière à ce qu'il ait un sens dans sa hiérarchie. Tu dois donc placer le plus important en haut. Plus l'importance diminue, plus tu dois descendre. Tu devrais donc te demander : quelles sont les informations les plus importantes pour le visiteur de mon site ? Qu'est-ce qui n'est qu'une information supplémentaire ? 

C'est aussi la raison pour laquelle le menu de navigation se trouve dans la plupart des cas tout en haut. Outre le fait qu'il s'agit d'un modèle d'interface utilisateur, c'est tout simplement l'un des aspects les plus importants d'un site web. Après tout, le menu n'est rien d'autre qu'un aperçu du contenu principal que tu y proposes. C'est en quelque sorte la table des matières de ton site WordPress.

Hiérarchie visuelle : ce qui est vraiment important

La hiérarchie peut également être créée par le biais de ce que l'on appelle le mouvement. Nous organisons le contenu du site de manière à ce que l'œil puisse le traverser. On peut y parvenir par exemple à l'aide de formes et de dispositions. Ce portfolio est un exemple intéressant de ce à quoi cela pourrait ressembler :

Portefeuille

L'œil est guidé de gauche à droite à travers l'écran. Le point 01 a ici clairement la plus grande hiérarchie - bien que tous les éléments soient de la même taille et semblent pour l'instant équivalents. 

La proportion joue donc aussi un rôle : les éléments de même taille, couleur, forme nous donnent en principe le sentiment d'appartenir ensemble et d'avoir la même fonction. C'est particulièrement important pour les éléments interactifs.

L'exemple présenté ci-dessus illustre le fait 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 termes de couleurs 
  3. au total, seules deux polices et tailles de caractères différentes sont utilisées, 
  4. une seule couleur est utilisée pour la typo et les séparateurs,
  5. les séparateurs représentent un élément de design récurrent - et ils réunissent visuellement l'image et les deux titres.
Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Conclusion : principes de base du design web

Malgré tous les principes de base mentionnés ci-dessus, les règles sont faites pour être transgressées. C'est la seule façon de créer un design intéressant et inédit !

Les approches que j'ai brièvement présentées ici ne sont évidemment pas nouvelles. Il s'agit plutôt de déclinaisons de recherches scientifiques et/ou psychologiques qui ont été appliquées à nos médias de communication actuels. Je trouve personnellement important de connaître ces théories et méthodes. Souvent, nous appliquons de toute façon déjà les règles de manière intuitive, parce que notre œil de créateur l'a "appris" ainsi.

De plus, connaître les différentes approches du design aide à évaluer ses propres projets. Considère-le comme une liste de contrôle à laquelle tu peux te référer lorsque tu constates que quelque chose ne fonctionne pas encore tout à fait visuellement. Souvent, on ne trouve pas le recul nécessaire pour évaluer objectivement son propre projet. 

Les principes de conception évoqués ici sont loin d'être exhaustifs. Ceux qui souhaitent approfondir le sujet peuvent jeter un coup d'œil à ces articles et e-books : 

Tes questions sur le design web harmonieux

Quelles questions as-tu à poser à Sonja ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé(e) des nouveaux articles sur le thème du webdesign et du développement ? Alors suis-nous sur Twitter, Facebook, LinkedIn 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.