Conseils graphiques

7 façons d’ajouter du contraste à votre design

Publié par Morgane Ponton

Le contraste n’est pas simplement un effet visuel. Dans l’expérience utilisateur, il est essentiel pour hiérarchiser l’information, structurer la page et guider le visiteur.

Besoin d'un graphiste ?
Trouvez gratuitement un graphiste qualifié et disponible !

Déposez votre annonce

Vous êtes graphiste ? Créer un compte gratuitement

Comme toujours en design, le dosage est important. Un design trop uniforme avec les mêmes tailles de polices, de forme, de couleur, sera ennuyeux pour le lecteur. A contrario, un visuel envoyant trop de signaux pour les yeux deviendra vite illisible.

Pour trouver le bon équilibre, suivez ces 7 façons d’ajouter du contraste à votre design.

1. “Cassez” la structuration de la page et de vos textes

Ce n’est parce qu’il faut respecter une logique de lecture que votre structure de page doit être parfaitement symétrique. Une première technique consiste à jouer des décalages pour créer de l’espace entre vos composants et les mettre en lumière.

Décalage structure

Lorsque vous imaginez votre composition, vous pouvez aussi décider de mettre des lignes directrices en milieu de page au lieu d’avoir une homepage très linéaire. Le site du Crédit Agricole par exemple, propose une coupure au centre.

Coupure au centre

Commandez un logo personnalisé
à l'un de nos 30 000 graphistes professionnels
Pour toutes les entreprises et tous les budgets

Commander mon logo

Vos boutons d’action ou textes en hyperliens peuvent aussi être décalés ou alignés à droite pour les démarquer.

L’essentiel sera de conserver des repères visuels et des séparations claires (avec un liseré ou tout simplement un espace blanc) pour éviter l’effet chaotique.

2. Jonglez avec les formes

Les formes et les illustrations viennent apporter des éléments de lecture dans votre page.

Pour fuir la monotonie, vous pouvez jouer sur différentes formes :

  • Coins parfois arrondis, parfois carrés ;
  • Blocs carrés + une offre rehaussée dans un cercle ;
  • Formes géométriques Vs naturelles (c’est-à-dire des formes fluides, inspirées de la nature).

Ajoutez du relief à vos compositions en jouant sur la superposition d’images ou de layers. Le site de cette agence mixe asymétrie et superposition pour un effet réussi :

Forme et layer superposition

3. Variez les couleurs pour créer du contraste

Pour ajouter du contraste à vos designs, vous devez utiliser les couleurs.

Il existe des centaines de possibilités pour les marier ou les opposer, tant que le rendu reste harmonieux :

  • Technique n°1 : les dégradés. Qu’ils soient monochromatiques ou avec des couleurs secondaires, ils créent tout de suite un effet acidulé et gai.
  • Technique n°2 : superposer des couleurs complémentaires en choisissant une teinte “chaude” et une teinte “froide”. Pour les composants et les fonds vous devrez alors utiliser des couleurs neutres ou pastels (blanc, beige, pêche, gris).
  • Technique n°3 : créer le contraste et guider l’oeil du lecteur avec un effet clair / obscur (proche du dégradé monochrome).
  • Technique n°4 : utiliser les méthodes de saturation d’une couleur et jouer également sur la transparence.

Pensez à vos call-to-action. Il ne doivent pas se fondre dans l’ensemble mais plutôt ressortir et contraster avec le reste des couleurs utilisées dans le site.

Contraste couleur

Source : Tubik

4. Aventurez-vous dans les animations CSS

Vigilance et prudence avant d’utiliser du design interactif. C’est pourtant un des meilleurs moyens d’ajouter du relief à vos créations.

Par exemple sur un bouton, changez son aspect au survol. Jouez sur un ton différent ou un effet vide / plein.

Vous pouvez aussi vous amuser et aller plus loin comme dans ces exemples de goooders.com ou Huru.rocks.

Design interactif

5. Jouez avec les polices

Les thèmes des CMS déterminent des styles différents pour les titres et paragraphes. Faites de même en adoptant des gabarits variés dans vos créations.

Plusieurs méthodes permettent de différencier vos polices :

  • La taille de vos textes ;
  • Les différentes typographies. Vous pouvez choisir une police complexe ou manuscrite pour certains titres puis une police simple et lisible pour vos paragraphes ;
  • Pour une même typographie, adaptez la graisse. La police HELVETICA NEUE en possède 14 : de fin à condensé noir en passant par l’italique. Utilisez également la combinaison serif (polices anguleuses) / sans serif (polices lisses).

Enfin, pensez à conserver des espacements dans les lettres de vos textes et entre vos paragraphes et titres. Si vous condensez trop vos titres et vos textes, vous rendez l’ensemble uniforme et illisible.

6. Maniez les patterns et textures avec brio

Que ce soit pour une police ou un background, vous pouvez mixer des styles flat et des allures plus en relief. De la même manière, vous pouvez opposer un effet rugueux ou crayonné à une surface parfaitement lisse.

Les patterns sont des effets de matière ou des pictos que vous pourrez utiliser en fond. Ils sont essentiels pour donner du caractère à votre marque et peuvent être déclinés sur de nombreux supports (background de site, en relief sur vos cartes de visite, en papier peint de l’entreprise, etc.)

7. Créez la surprise

Un des premiers concepts en UI est de respecter les standards pour placer vos éléments aux endroits où les internautes ont l’habitude de cliquer. En dehors de cela, les interfaces utilisateurs peuvent et doivent susciter la curiosité.

Un des moyens d’apporter du contraste à vos designs est d’y ajouter quelque chose d’inattendu, comme cette montagne dans le bloc du site Wix ou encore ce vélo en plein Manhattan.

Contraste Wix

Ajouter du contraste à ses visuels lors de leur conception est essentiel pour capter l’attention des internautes et ne pas rendre vos sites ennuyeux ou illisibles.

Nous avons parcouru 7 techniques pour créer du relief sur vos réalisations. Ne les mélangez pas toutes ! Choisissez deux ou trois méthodes maximum et créez ainsi de fabuleux designs.

7 façons d’ajouter du contraste à votre design
4.7 (93.33%) 6 votes

2 Commentaires

  • 98% des exemples donnés dans votre article sont liés au webdesign ; quid du Print. Il faudrait peut-être l’indiquer dans le titre ou montrer également des exemples dans le domaine du Print 😉

    • Bonjour Xavier, merci pour votre commentaire. Dans nos futurs articles nous ferons en sorte d’accorder plus d’importance au print 🙂
      Charlotte

Laissez un commentaire