Le brutalisme dans le webdesign

Ce mouvement du design présent depuis quelques petites années maintenant. Le brutalisme est utilisé principalement pour des sites de designer, et dans le milieu de la musique ou du sport.
Le Brutalisme est reconnaissable à une apparente simplicité, mais qui demande au web designer des techniques un peu plus complexe, et surtout de casser ses habitudes de webdesign classique. Je vous donne la recette.

Couleurs limitées

Ce que l’on remarque dans le Brutalisme c’est l’utilisation limitée des couleurs. De manière totalement assumée les photo vont être en noir et blanc. Les deux couleurs utilisées on un gros contraste, fond blanc et écriture bleu, fond noir et écriture rose fuchsia, le tout sur un fond uni.

Proportions et police d’écriture

Ce qui frappe directement lorsqu’on visite ce type de site, ce sont les différences très marquées dans les tailles de police. Pour faire du bon brutalisme, même la taille de l’écran n’est pas un frein à la taille de la police, il suffit de l’animé de droite à gauche pour le rendre visible.
Le poids à soin importance aussi, car il faut alterner grand titre en Black ou Extra Bold avec texte en light.

Le texte, et c’est une grande spécificité de ce style, c’est l’utilisation du contour des lettres, c’est très rare d’en trouver dans un style plus classique. La question et comment faire les contours des lettres.
Il existe 3 méthodes principales :

• Le -webkik-text-stroke qui prend une taille de contours et une couleur. Très intéressant, mais il n’est pas officiel, demande le prefixe webkit. Il est cependant supporter par tous les navigateurs à par Internet explorer.
  Mais MDN le spécifie bien à l’heure ou l’article est écrit il n’y pas d’officialisation en cours de cette méthode.
  -webkit-text-stroke: 1px #fff;
• Une méthode plus officielle, mais moins pratique utiliser le text-shadow car il faut superposer plusieurs text-shadow (trois au minimum) et mettre le color avec la couleur de fond et non pas transparent.
  color: #000; text-shadow: -1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
• La méthode la plus utilisée reste celle du SVG text en effet juste indiquer son remplissage, la taille et la couleur.
  fill: none; stroke: #fff; stroke-width: 1px;

Des illustrations spécifiques

Souvent, on ajoute une photo hors contexte un peu bizarre, un œil, une photo d’un catalogue des années 70 en négatif, un top-model qui ne sourit pas…
À cela s’ajoute des symboles géométriques très contrastés et animés.

Positionnement

Dans le Brutalisme le positionnement est important. En effet, le classique design en bandeau est proscrit. Les éléments se chevauchent, il est de bon ton d’ajouter du texte sur une photo en dépassant de celle-ci. Les éléments peuvent s’animer au scroll de haut en bas de droite à gauche.

Conclusion

Malgré les années, le Brutalisme dans le webdesign s’est imposé chez les designers et conquière les grandes marques de mode notamment. Il donne un style abouti en dehors des codes, il en est sûrement la représentation de l’art moderne au niveau du web design. Peut-être trop élitiste parfois il n’est pas adapter au grand publique. Inapplicable pour beaucoup de secteur, imaginez-vous déclarer vos impôts en ligne sur un site Brutaliste, ça serait un peu perturbant. Cependant, il est complément adapté pour une image de marque plus mode/design/ pour donner une touche artistique et créative.

Retrouver les articles concernant les courants dans le webdesign avec le Néomorphisme ou le Glassmorphisme.