Beige, couleurs et Web Designs

En ce début d’année, le beige est une couleur de plus en plus présente sur internet, elle se révèle être une bonne alternative au blanc comme couleur de fond et il se créé un mouvement que l’on pourrait nommé “web designs texturés” dont elle est la couleur principale.
J’en profite pour vous souhaiter une bonne année à tous, et j’espère bien reprendre un peu d’activité sur Split Da Diz :).
Je vais tenter dans cet article de vous décrire cette couleur ainsi que les différentes tendances de son emploi dans les web design récents.

Pour bien commencer un peu d’histoire ainsi qu’une définition de cette couleur: le beige est à la base la couleur naturelle de la laine, c’est une couleur assez lumineuse dans les tons jaune-brun. Aaron Priven, un des fondateurs de l’internet tel que nous le connaissons actuellement la décrivait comme la couleur du diable, en effet nous associons souvent le mal à des couleurs comme le rouge ou le noir, par exemple un enfant va tout de suite reconnaitre les couleurs du sang ou de la nuit comme de « mauvaises couleurs ». Nous ne pouvons pas associer le blanc au mal car c’est une couleur “pure”, le beige quant à lui, même s’il reste proche du blanc est une couleur beaucoup plus permissive. Aaron en donnait une bonne définition :

Most people think that, if colors have attributes such as good or evil, that the color of evil is either the red of arterial blood gushing from a wound, or the deepest black of the darkest night sky. While these are certainly evil colors, they are not as evil as beige.

Le terme “beige” qui définit cette couleur est assez récent vu que sa première utilisation a vu le jour en 1887, et comme vous vous en serrez douté c’est un nom français (cocorico :D).

Actuellement nous pouvons trouver dans le domaine du web design un grand nombre de beige différents, celui-ci pouvant allez d’une couleur assez neutre à des tons jaunâtre-rose assez intense.

Le principal intérêt de cette couleur est quelle s’harmonise avec beaucoup d’autres couleurs tel que le bleu, le magenta ou le vert. Elle semble donc s’établir petit à petit comme une bonne alternative au blanc comme couleur de fond et commence à prendre racine.
Ce n’est pas une couleur neutre comme le blanc, ce qui lui confère un certain caractère, elle ne s’impose pas non plus comme une couleur tonique car elle reste très désaturée. De plus s’il existe un seul blanc, un beige peu assez facilement varier et être harmonieux avec un grand nombre de couleurs.
La couleur la plus souvent utilisée avec celle-ci est incontestablement le brun qui est l’opposé du beige dans la luminosité. Le bleu clair à tendance à également tendance à donner une bonne pointe de dynamisme à cette couleur, bien que cette couleur tonique puisse être différente ma préférence va vers celle-ci.

En ce moment un grand nombre de web designs récent emploie du beige, ceux-ci peuvent se diviser en 3 grandes catégories. Alors que certains l’emploient comme une couleur « classieuse », à l’opposé, d’autres l’emploient comme une couleur plutôt « sale » et ancienne. Nous pouvons enfin trouver des web designs assez intéressants mélangeant les deux. Je vais tenter d’illustrer mes propos par de très sympathiques sites trouvés aux quatre coins du web.

WebDesing propres :

Dans ces web design, la couleur beige a plus une notion classieuse et lumineuse, il me semble que c’est un des premiers emplois de cette couleur dans le web design.

Cabedge

Une référence dans le domaine pour un design sombre et efficace. Un beige très lumineux y est employé, je vous conseille d’allez faire un tour sur leur travaux tous plus convainquant les uns que les autres.

Happy Corg

Un site incontournable fait par pour tous les interressés du web design tout comme un de leur blog A List Apart (n’hésiter pas à allez y faire un tour). Le design y est également très sobre avec une très bonne lisibilitée.

Nitram Nunca

Un très bon emploi des différents luminosité du beige, un web design très leché qui plait à coup sûr.

South Creative

Des couleurs magnifiques et un menu de navigation qui prend tout le header assez original

Foamee

Un site incoutournable pour tous ceux qui utilise Twitter, je mets Foamee comme j’aurais aussi pu mettre d’autre site de SimpleBits, un design très sobre et efficace que j’affectionne tout particulièrement.

31 Three

Je pense qu’il n’est plus utile de présenter ce site, un exellent webdesign qui a déjà fait parler de lui plus d’une fois…

Tijs Vrolix

Très bon exemple de la diversités des couleurs allant parfaitement avec le beige avec ce web design quadri-couleur.

Joyent

Excellent site web avec une navigation des plus agréable et joliment illustré.

unFortunate

Bon site pour apprendre le chinois ?

Cork’d

Parfait exemple d’un design assez classieux acoompagné d’illustration, personnellement j’aime beaucoup.

iune Wind

Un bon exemple d’utilisation de beige et de bleu.

Advanced Wallness

Un magnifique web design que j’affectionne tout particulièrement

Nice Icons

Un beige virant presque au rose pour un design simple et efficace.

Sacha Greif

Design de blog assez sobre et bien organisé.

Olamar Living

Encore une bonne utilisation des différentes luminositées du beige.

LIDI

Un web design très soigné et moderne.

Mark & Velma’s

Site très simple, pas de remplacement SiFR, on apprécie tout de fois la bonne lisibilité.

Toggle Design

Sobre avec une bonne utilisation d’une alliance bleu/beige.

Tiny Price

Site assez simple mais très lisible.

Design By Anderson

Exellent site mélangeant image organique et web design.

WebDesigns semi texturé:

Mélangeant la couleur comme couleur assez sobre et “propre” avec un brin de texture, ces web designs commencent à être de plus en plus présent sur le web.

Marius Roosendaal

Un des plus beau portfolio en html/css actuel

Tilly Moss

Mélange de pattern un peu texturer tout en restant sur une base très claire, cela lui donne à ce site une ambiance ancienne pour se design assez sobre.

Belgrade Jazz Festival

Une très bonne interface pour ce site de musique, on apprécie le fond clair et les quelques touches texturées.

Mobile Web Book

Un exellent site pour cet exellents livre sur les standards du web design sur mobile.

Jen Gordon

Un des meilleurs web design actuel à mon gout, les couleurs y sont très finement employer et les pattern très réussis.

Webstock

Exellent site web très reconnu en outre-merre, ils organisent d’exellente conférence, si vous avez l’occasion d’assister à l’une d’elle n’hésiter par à me faire un faire signe ?.

TTF4

Assez peu texturer, ce site offre une exellente lisibilitée ainsi qu’une bonne catégorisation des différents éléments/rubriques.

Sahayata

Un vrai design semi texturé, on apprécie la lisbilité et la simplicité du site.

Spike Girl

Joli design pour de magnifiques illustrations.

Vision Forum Ministries

Site majoritairement beige et haut en image, on apprécie un peu moins la coupe des « ombrages ».

StoneTire

Exellent site avec un semblant de texture sur les différents menu du corps. Je vous invite vivement à aller y faire un tour.

Jason Graphix

Blog de l’auteur de l’excellent livre « The pronciple og beautifull webdesign », quelques bons petits conseils et une interface claire.

WebDesign texturés:

Mes préférés, une majoritée des webdesign texturés emploient du beige, il est donc normal de leur réserver une catégorie ici. Ces sites sortent de la norme de l’internet et se différencie tout particulièrement du style graphique dit « web2.0 ». Ceux-ci me rappelle un peu les sites du débuts années 2000 sur les jeux vidéos tels que Starcraft ou en Warcraft3 avec des beaux designs en tableau (et oui à l’époque on ne parlait pas de css :p). Enfin ce qui est surtout important à retenir c’est que l’utilisateur a plutôt tendance à retenir ces sites qui « sortent un peu de la norme » et bien que ceux-ci peuvent parfois paraître assez grossier, ils sont en réalité très lechés pour la plupart.

Legendary Aircraft

Les avions ne sont pas ma passion mais il faut avouer que quand on tombe sur ce site on sait directement à quoi on a affaire. Un parfait exemple de site très texturé qui sort un peu de l’approche plutôt « papier » de la plupart des sites texturés.

Jason Santa Maria

On ne peux pas passer à côté de ce site sans remarquer sa beauté. Exemple type des webdesign texturé que l’on va nommer « papier », c’est un de mes webdesign préféré (oui je sais j’aime beaucoup le beige ^^).

Jesus Rodriguez Velasco

Blog plutôt inpressionnant surtout quant on sait que Jesus est professeur d’université. Ultra lisible (personnellement je trouve la typo un peu grosse mais c’est une question de goût), on remarquera aussi que la 2ième colonne passe sous la première pour les petites résolutions.

Lakata

J’ai découvert ce portfolio assez récemment, un très bel exemple de design vintage.

Firsticuff Design

Site très interressant et assumé pour une agence, un style typique que l’ont retient à coup sur.

Kindred Spirit

Design assez simple pour ce site très propre.

RobGoodlatte

Blog folio qui dégage vraiment une ambiance particulière, tous les éléments ont été très travaillé et reste très lisible.

Web Designer Wall

Comment passer à côté de ce site qui a su s’imposer en quelques mois comme une référence dans le domaine. Un style graphique très particulier et très bien pensé, c’est le genre de webdesign texturé que l’on a envie de retenir ?

MindTwitch

Un design que l’on pourrait qualifier « d’hyper texturé », personnellement je moyennement accroché car je le trouve assez lourd, après c’est à vous de voir !

Here’s Life Africa

Très beau site pour cette association caritative, on regrette juste la découpe un peu grossière (une seule grosse image pour le corps alors qu’on aurait pu répéter une image plus petite) enfin je chipote ?

Team Green

Un autre design « ultra texturé » mais cette fois on reste plus sobre avec une petite pointe de Flash. Encore un web design qui ne laisse pas indifférent l’utilisateur et qui donne envie de revenir.

Miss Potter

Site assez texturé, le web design est vraiment cool mais le développement (code) assez nul avec pas mal de flash qui aurait pu être évité :s et une découpe assez grossière.

Buzz Is Media

Ca arrive bientôt en tutorial sur Split Da Diz :)

Pour aller plus loin :

• Très bonne définition du beige.
• L’article de Aaron sur le beige
• Vintage Web Design
• La gestion de la couleur: Guide exhaustif à l’usage des graphistes

Popularity: 66% [?]