5 façons d'augmenter le contraste dans votre conception Web

Votre projet de design manque-t-il de cette pop spéciale? C'est probablement ce qui vous manque, c'est assez de contraste. Le contraste permet de différencier les éléments, donnant à chacun un aspect plus individuel, plus important et plus spécial.

Le contraste de conception est créé de différentes manières et utilise différents types d'éléments. De la typographie à la couleur en passant par l’espace, la création de contraste peut faire passer un dessin de fond en comble. Voici cinq façons de le faire.

1. le rendre plus grand (ou plus petit)

La symétrie et l'ordre peuvent être un piège lorsqu'il s'agit de créer un point central dans la conception. Trop d'éléments de poids égal finissent par se ressembler.

La solution simple consiste à agrandir ou réduire un élément de manière significative.

L'élément différent devient le point immédiat du poulain. L'utilisateur sera attiré vers cette zone de la toile car elle est différente.

Rendre un élément, une photo ou un bloc de texte plus grand ou plus petit est plus qu'une simple taille physique; c'est aussi un poids visuel. Le moyen le plus simple de comprendre ceci est la typographie. Regardez les images ci-dessus. Les deux mots sont la même? Taille ,? mais notez combien plus de poids une des versions a. Ce contraste est dû aux traits épais et fins des lettres.

Vous pouvez également appliquer ce même concept à presque tous les autres éléments de conception.

Consultez le site Web de Little Flyers ci-dessus. Portez une attention particulière à la navigation par texte en haut de la page et aux boutons en bas de l'écran. Quel texte attire votre regard plus rapidement? Pourquoi? Tout le type est de la même taille, mais le traitement avec une boîte à l'intérieur d'une photo colorée le fait paraître plus grand.

2. Ajouter un peu de texture

Avec des styles plats et minimaux comme moteur dominant dans les tendances du design à l'heure actuelle, la texture est moins courante qu'auparavant. Mais vous le voyez toujours dans de nombreux endroits, peut-être même sans y penser.

Passer d'un élément plat à un élément comportant une texture, un motif ou un style tridimensionnel aidera à créer une zone de mise au point. Et bien que l'ajout de texture à un arrière-plan puisse être la solution immédiate, il peut également être utilisé d'une autre manière.

Considérons un élément de texte avec une sensation texturée. (Ceci est assez populaire avec de nombreux styles de typographie vintage.) Les principaux types de texture sont bruts et lisses. Ils peuvent travailler ensemble ou de manière isolée pour aider à créer un focus visuel. Lorsque vous travaillez avec un motif imprimé, vous pouvez ajouter physiquement une texture en fonction du type de papier utilisé, des options de typographie et d'autres méthodes de publication.

3. Changer la forme

Regardez l'image ci-dessus. Quelle est la première chose que vous voyez? Pour moi, c'est l'objet circulaire avec le point d'interrogation à l'intérieur.

Est-ce que tu sais pourquoi? Dans une image pleine de rectangles, c'est le seul cercle. La différence de l'objet est ce qui le distingue. Le fait que le personnage soit à l'envers est également un facteur d'attention. Changer la forme ou l'orientation d'un élément peut avoir un impact immédiat.

Essayez-le la prochaine fois que votre design sera un peu plat. Arrondir les bords des boutons. Placez une photo dans un cadre circulaire plutôt que rectangulaire. Optez pour une photo verticale. Utilisez un emplacement un peu décalé.

N'importe laquelle de ces techniques pourrait vous mettre un peu mal à l'aise au début. Mais continuez à expérimenter et à jouer avec les options jusqu'à ce que vous transformiez ce même vieux rectangle en quelque chose d'un peu plus intéressant.

4. Ajouter de la couleur (ou à emporter)

La théorie des couleurs est l'un des concepts les plus importants à votre disposition. En modifiant les teintes, en ajoutant ou en supprimant des couleurs, vous pouvez modifier l'ambiance générale d'un dessin. La couleur peut faire paraître les choses grandes ou petites, audacieuses ou modérées. Le truc utilisé par certaines des palettes de couleurs les plus brillantes consiste à utiliser le contraste.

La forme de contraste la plus simple commence par la roue chromatique. La combinaison de couleurs le long de la roue permet d'obtenir différentes combinaisons contrastées:

  • Complémentaire: Paires haute intensité des côtés opposés de la roue
  • Triadique: Couleurs espacées d'un tiers le long de la roue.
  • Split-complémentaire: Une couleur et les deux couleurs à côté de la teinte complémentaire.

Il existe d'autres options de contraste de couleur qui peuvent fonctionner particulièrement bien si vous avez déjà une palette de couleurs et que cela ne vous dérange pas de faire des ajustements subtils.

  • Mélangez des couleurs chaudes, froides et neutres.
  • Changez la couleur de base en ajoutant des teintes et des tons afin que la saturation soit différente d'une couleur à l'autre.
  • Entrelacez les couleurs claires et sombres; Pensez-y comme yin et yang.
  • Ajouter des éléments sans couleur. Des accents noirs ou blancs peuvent ajouter de l’importance aux espaces riches en couleurs; et la couleur peut ajouter du contraste au noir et blanc.

5. Faites quelque chose d'inattendu

Une forme ou des détails inattendus peuvent également ajouter la bonne quantité de contraste. Une surprise dans la conception est tout ce qui ne correspond pas tout à fait, mais fonctionne toujours en harmonie avec elle.

Ces éléments comprennent:

  • Un élément d'asymétrie dans une conception par ailleurs symétrique.
  • Un repère visuel qui vous guide dans la conception, tel qu'une forme intense ou un motif de suivi de l'oeil, tel que celui utilisé dans le site pour Vibrant ci-dessus.
  • Un changement dans un motif ou un élément répétitif.
  • Changer l'orientation ou l'alignement d'un élément ou d'un texte, comme dans l'Anima (avec la lettre? I?) Ci-dessus.
  • Modification du positionnement ou de la taille d'un élément dans une rangée de visuels.
  • Différents styles d'imagerie, tels que le passage d'une photo à une illustration ou un soupçon d'animation.
  • Mélanger des styles visuels ou typographiques complexes et simples.

Conclusion

L'avantage de changer le contraste entre les éléments est que cela peut avoir un impact immédiat dans un projet de conception. En modifiant l'apparence des éléments, vous pouvez modifier le focus visuel et aider les utilisateurs à affiner la partie de la conception la plus importante pour le message.

Le manque de contraste est un problème commun et souvent facile à résoudre.Tant de fois quand vous entendez le redouté? Le rendre pop? d’un client ou d’un collègue, ce qu’ils essaient vraiment de dire, c’est qu’ils aimeraient voir plus de contraste dans les éléments de conception. Maintenant, vous êtes armé des outils pour relever ce défi.