Principes de base pour un webdesign harmonieux

Sonja Hoffmann Mis à jour le 21.10.2020
7 Min.
Principes de base de la conception de sites web
Dernière mise à jour le 21.10.2020

Comme le dit le dicton : "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 ce site est "bon" ou "mauvais". Surtout avec vos propres créations, il est infiniment difficile d'effectuer 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 sens pour une mise en page visuelle attrayante. La conception de sites web offre une incroyable variété de possibilités pour s'exprimer de manière créative. Mais elle offre aussi au moins autant de possibilités de se perdre dans le processus de conception. Surtout si vous êtes profondément enraciné 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 le 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. Dans la plupart des cas, un site web orienté vers l'utilisateur réussit grâce à une interaction bien équilibrée entre la typographie, les éléments interactifs et 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. Et éventuellement aussi par les compétences techniques du développeur ou par l'outil que nous utilisons pour créer le site web en question. 

Vous devez également tenir compte des tendances actuelles et de l'identité de votre client. La conception de sites web est essentiellement la somme de la conception graphique, de l'interface utilisateur et de l'IC, ainsi que des tendances actuelles compte tenu des conditions techniques.

La création d'un site web est un projet assez vaste. Il n'est donc pas étonnant que toute une équipe soit derrière elle. Souvent, les individus (et malheureusement les équipes) ont tendance à accorder plus d'attention aux domaines dans lesquels ils sont particulièrement forts. En revanche, d'autres domaines reçoivent moins d'attention - ou dans des cas extrêmes, aucune. Cela crée un déséquilibre qui pourrait vous donner l'impression qu'un site web est de qualité inférieure et désharmonieux.

Une "bonne" conception web est le résultat d'un équilibre entre les différents domaines de conception et les conditions techniques.

Comme un examen détaillé de tous les domaines dépasserait le cadre de cet article, je vais maintenant me concentrer principalement sur la conception visuelle. 

Contraste, espace blanc et couleur

Le contraste va souvent de pair avec le choix des couleurs primaires du dessin ainsi qu'avec l'espace blanc dans la composition. Cependant, l'espace blanc ne signifie pas nécessairement ici l'espace qui est laissé blanc. Il s'agit plutôt des espaces entre les éléments. Cet espace intermédiaire est également appelé "espace négatif" et peut, soit dit en passant, être encore 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 Minimalisme. Cela signifie qu'il faut systématiquement supprimer de la mise en page tout ce qui est inutile et qui n'ajoute aucune valeur 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 : Les contenus difficiles à lire peuvent empêcher les personnes souffrant d'un handicap visuel (par exemple, la reconnaissance des couleurs) de voir ces contenus.

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 pour beaucoup d'espaces et de contrastes

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 disparaît complètement dans ce contexte agité.

pourquoi-ux-échecs
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 de conception de matériaux en couleur

Outil de conception de matériaux en couleur crée des images filaires de basse fidélité avec un défaut de deux couleurs primaires.

matériau-conception-couleur-outil

Roue des couleurs Adobe

Roue des couleurs 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 à partir de gradients.

adobe-color-wheel

Lors de la sélection des 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, il est possible de choisir une couleur ayant l'effet psychologique approprié. Ce n'est pas par hasard que le bleu est souvent utilisé dans des secteurs plus sérieux, comme les assurances, le conseil et les sites de comparaison. Le bleu inspire la confiance et a un effet calmant. Toutefois, il ne faut 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.

Vous connaissez la règle des 60-30-10 ?

C'est la règle d'or recommandée pour l'utilisation des palettes de couleurs. Voici le principe appliqué : 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 ajoute des accents supplémentaires avec 10 %. Cet arrangement a un effet particulièrement équilibré sur l'utilisateur.

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

Dans son article "Les principes de la conception et leur importance" L'auteur et designer Cameron Chapman explique ses deux approches les plus importantes pour trouver un équilibre dans la conception de sites web. Elle différencie les contenus en fonction de leur visibilité, c'est-à-dire s'ils sont plus 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 "de disposer symétriquement ou asymétriquement" peut aider ici.

Comment les deux approches fonctionnent-elles ?

Dans l'approche symétrique, les éléments ayant une importance similaire sont disposés ensemble. En revanche, avec l'approche asymétrique, les contenus plus importants et moins visibles sont agencés ensemble. 

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

Couro Azu

Zéro utilise cependant le même principe - mais avec un arrangement plus libre. En raison de la forte utilisation de l'espace blanc, il semble é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 des 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 les messages clés déterminés, il est important de les mettre en évidence en utilisant la couleur et/ou 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. Après tout, le contenu ne peut pas être mis en valeur par la seule typographie et la seule couleur. Aussi par l'image - comme pour Restaurant Jamie Oliver's - et grâce à l'interaction de différents principes, vous mettez en évidence le contenu sélectionné.

Restaurant Jamie Oliver's

Proportion, cohésion et hiérarchie

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

C'est aussi 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. Pour ainsi dire, le résumé de votre site web.

Hiérarchie visuelle : ce qui est vraiment important

Une hiérarchie peut également être créée par ce que l'on appelle le mouvement. Ici, nous arrangeons le contenu de la page de manière à ce que l'œil soit guidé à travers elle. Cela peut être réalisé, par exemple, en utilisant des formes et des arrangements. Ce Portefeuille est un exemple intéressant de ce à quoi cela pourrait ressembler :

Portefeuille

L'œil est guidé à travers l'écran de gauche à droite. Le point 01 a clairement la plus grande hiérarchie - même tous les éléments sont de la même taille et semblent à première vue égaux. 

La proportion joue donc également un rôle : des éléments de même taille, de même couleur et de même forme nous donnent essentiellement le sentiment d'appartenir à un même ensemble et d'avoir la même fonction. Cela est particulièrement important avec les éléments interactifs.

L'exemple présenté ci-dessus montre qu'une conception cohérente peut largement contribuer à l'harmonie visuelle : 

  1. Des formulaires uniformes sont utilisés pour toutes les images,
  2. toutes les images s'harmonisent en couleur, 
  3. au total, seules deux polices et tailles de caractères différentes sont utilisées, 
  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 titres.

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 des designs intéressants et nouveaux !

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é transférées sur nos supports de communication actuels. Personnellement, je trouve important de connaître ces théories et ces méthodes. Souvent, nous appliquons quand même les règles de manière intuitive, car notre œil créatif a "appris" à le faire.

De plus, la connaissance des différentes approches en matière de conception aide à évaluer vos propres projets. Considérez cela comme une liste de contrôle sur laquelle vous pouvez vous appuyer lorsque vous remarquez que quelque chose ne fonctionne pas tout à fait visuellement. Souvent, vous ne trouvez pas la distance nécessaire par rapport à votre propre projet pour l'évaluer objectivement. 

Les principes de conception indiqués ici sont loin d'être complets. Si vous souhaitez approfondir le sujet, vous pouvez consulter ces articles et livres électroniques : 

Quelle est votre opinion sur les principes de conception ? Quelles questions avez-vous à poser à Sonja ? Veuillez utiliser la fonction de commentaire. Vous souhaitez être informé des nouvelles contributions à la conception et au développement de sites web pour les agences et les indépendants ? 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 * .