Compréhension complète du contraste dans la conception
Habituellement, le sujet du contraste est réservé aux débutants. Les livres diront "le noir et le blanc ont un contraste, le rouge et l’orange ne le font pas" - mais il ya tellement plus.
Les livres pour débutants ne concernent généralement que le contraste des couleurs, mais qu'en est-il de la taille et du contraste de forme? La manière la plus simple de dire à un concepteur amateur d'un professionnel est de regarder son utilisation du contraste.
Créer une structure importante en utilisant la taille, la forme et la couleur est ce qui donne un impact et une lisibilité à la page pour le lecteur.
Dans cet article, nous allons examiner le contraste en détail, en examinant une grande typographie, des formes funky, des divisions claires, des images et comment ils s'emboîtent correctement en utilisant le contraste pour une bonne expérience utilisateur.
Une introduction au contraste
Le contraste peut être défini comme "la différence de propriétés visuelles qui distinguent un objet (ou sa représentation dans une image) des autres objets et de l’arrière-plan." Dans un anglais simple, on peut décrire comme "des choses différentes les unes des autres. "
Pour les concepteurs dans tous les domaines de la pratique, mais particulièrement les concepteurs Web, le contraste est à la base de presque tout. Nous essayons constamment d’établir des hiérarchies d’importance, d’attirer des personnes dans certaines zones d’une page et de communiquer un message clair et concis au cœur même de notre travail. Créer des relations entre différents éléments d'un dessin est à peu près la chose la plus importante que vous puissiez faire. Vous avez probablement déjà fait beaucoup, consciemment ou non.
Les exemples évidents de contraste sont le noir et blanc, grand et petit, rapide et lent, épais et mince. Les opposés sont le moyen le plus simple de saisir ce que le contraste est, mais en appliquant le contraste au design, il n’est jamais aussi noir et blanc. Si vous vous posiez la question, c’est là que vient le dicton d’une situation «en noir et blanc», qui conduit également à dire que quelque chose est une «zone grise». Dans la conception, nous comparons souvent des choses différentes mais non opposées, par exemple un H1 et un h1, ou un bouton "Ajouter au panier" et un bouton "Extraire". C'est là que des niveaux de contraste plus importants entrent en jeu.
Examinons les différents types de contraste et quelques exemples de leur utilisation dans la conception de sites Web.
Contraste de couleur
L'exemple le plus courant est celui où tout commence. Si deux couleurs sont différentes l'une de l'autre (par exemple noir et blanc), elles ont un contraste élevé, alors que si elles sont très similaires (rouge et orange), elles ont un contraste faible.
TekRoc utilise ici un contraste de couleur très évident en superposant une image lumineuse et vibrante sur un fond très sombre. Les couleurs orange et bleu vives se détachent clairement et l'œil est immédiatement attiré par toutes les autres choses de la page.
Tim Van Damme fait un superbe usage du contraste des couleurs dans le design du site GoWalla. Non seulement la bordure multicolore en haut de la page se distingue et crée un intérêt visuel en étant différente du fond pâle, mais il a également ajouté des ombres portées 1px extrêmement subtiles au texte sur les boutons. L'orange légèrement plus sombre aide vraiment à créer un contraste entre le texte blanc et le fond orange.
Envato sont les maîtres du contraste subtil et la tendance à utiliser des frontières 1px pour cela peut probablement leur être attribuée plus que quiconque. Tous leurs sites disposent de plusieurs frontières de pixels simples pour créer un contraste entre les sections. Dans la capture d'écran ci-dessus, les deux zones de contenu pourraient être divisées par un simple espace ou une seule ligne, mais en utilisant deux lignes (une sombre et une lumière), elles créent un contraste subtil entre les deux sections.
Contraste de taille
La forme de contraste la plus courante consiste à utiliser la taille. Quelque chose de gros à côté de quelque chose de petit indique généralement que le plus gros article est beaucoup plus important. C'est vrai, nous disons que la taille compte!
MadeByWater est le portefeuille de design de Jordan Vitanov. Il utilise le contraste de taille avec une typographie extrêmement large pour transmettre instantanément une citation de Bruce Lee qui définit pourquoi il a choisi de se faire connaître avec le nom MadeByWater.
28Thiers est un bar haut de gamme attractif en France. Leur site Web utilise beaucoup le contraste de taille pour attirer votre attention immédiatement sur la grande photographie du Martini avec des ingrédients variés qui l'entourent. Il est évident que c'est l'élément le plus important de la page et le concepteur veut que vous regardiez cette image et que vous soyez vendu sur le fait qu'il s'agit d'un établissement extrêmement élégant.
SlideScreen fait de multiples utilisations du contraste de taille dans leur site. En plus d'avoir leur produit affiché avec une grande capture d'écran, ils utilisent également de très gros boutons pour leurs appels principaux à l'action. Ils veulent que vous regardiez la vidéo de leur produit en action, puis ils veulent que vous la téléchargiez. Ce sont les éléments les plus importants de la page, donc ils sont sensiblement plus grands que les autres éléments qui les entourent.
Contraste de forme
Le contraste de forme implique de rendre les choses notables par leur différence de forme physique par rapport aux autres éléments de la page. À son niveau le plus élémentaire, cela peut être utilisé pour ajouter des coins arrondis aux boutons, mais à des niveaux plus extrêmes, cela peut attirer beaucoup plus d'attention.
Anebstar utilise le contraste de forme pour présenter trois images importantes dans l'en-tête. Étant donné que la plupart des choses sur le Web sont rectangulaires, l'une des manières les plus faciles d'obtenir un contraste de forme consiste à utiliser un cercle. Bien entendu, cet exemple a également un petit contraste de taille, mais vous pouvez clairement voir comment les éléments circulaires se distinguent de tout ce qui se trouve sur la page.
Carbonmade est un site magnifique avec un véritable mélange d'illustrations magnifiques et de contenu bien présenté. Un simple bouton d'inscription ici aurait fonctionné, mais la taille et le contraste des couleurs ne l'auraient probablement pas suffisamment différencié de l'arrière-plan occupé. Ajouter une pieuvre amicale derrière le bouton lui donne vraiment cette différence de forme pour attirer directement le regard.
WireframePlus utilise un peu de contraste de forme simple mais extrêmement efficace pour mettre en évidence le prix de ses services. Ils veulent que vous lisiez leur contenu, mais ils essaient avant tout de vous vendre leur prix en plaçant un grand cercle derrière eux.
Contraste Positionnel
La création de contraste dans le positionnement est un moyen très pratique de créer une hiérarchie d’éléments uniquement en utilisant différents alignements. Ces derniers temps, cette technique a été rendue populaire par des gens comme Elliot Jay Stocks, qui l’ont utilisé à l'extrême sur son site de portfolio le plus récent.
Elliot Jay Stocks utilise une grille détaillée pour définir l’alignement de tous les éléments sur son site. L'attention est appelée sur des zones spécifiques en étant respectivement en retrait à gauche ou à droite. Dans cette capture d'écran particulière, le paragraphe d'introduction ressort vraiment car il est aligné le plus à gauche, où l'œil regarde d'abord quelque chose. Ce type d'alignement a «inspiré» de nombreux autres concepteurs au cours des douze derniers mois à créer des designs avec un contraste de position dans le même genre de style.
SimpleBits est la marque sous laquelle travaille Dan Cederholm, vous le connaissez peut-être à partir de projets tels que Dribbble . Lors des premières impressions, le site SimpleBits ne semble pas avoir de contraste de position, mais lorsque vous commencez à faire défiler, tout devient clair. Lorsque certaines personnes utilisent une image d'arrière-plan fixe pour créer un effet stylistique soigné, Dan a complètement fixé son logo et sa navigation afin que, quel que soit l'endroit où vous défiliez, elles restent toujours au même endroit sur l'écran. Ceci est un excellent exemple de contraste de position non standard.
SquaredEye est la boutique de design dirigée par Matthew Smith et les pages d'étude de cas de son portfolio font un usage fantastique du contraste de position. Vous devez voir toute la page pour vraiment comprendre l'idée, mais essentiellement, Matthew a méticuleusement créé un positionnement spécifique pour chaque section de la page. Cela crée un contraste fantastique entre les sections et crée un grand intérêt visuel pour le lecteur sans être distrayant.
Conclusion de contraste
Il y a tellement plus de contraste que juste «clair et sombre» - c'est l'un des principes les plus importants du design et vous ne pouvez presque jamais en avoir trop, à condition que vous l'utilisiez correctement.
Passer à la vitesse supérieure avec vos créations ne consiste pas à trouver le prochain chariot pour utiliser des coins arrondis et des ombres portées pour tout, mais aussi à trouver des moyens plus efficaces de communiquer le message derrière le design.
Explorer le contraste en détail et l'utiliser à son plein potentiel est l'un des meilleurs moyens d'y parvenir.
Qu'est-ce que tu penses? Quelle attention accordez-vous au contraste dans vos créations? Est-ce quelque chose que vous pensez tout le temps ou est-ce quelque chose qui vient naturellement?