Lifting du design du site

Voilà maintenant 5 ans que le site est en place sous wordpress et qu’il n’y a eu qu’un seul habillage qui fait maintenant un peu vieillot et qu’un lifting ne lui ferait pas de mal.

Après une petite recherche sur notre ami Google j’ai découvert qu’une nouvelle tendance en matière de design web était en marche depuis quelque mois : le Flat design

Du coup j’ai décidé, pour cette nouvelle année, de refaire le design du site dans ce nouveau style graphique.

Qu’est-ce que le Flat design ?

En bref

Le flat design est en fait un design graphique minimaliste, débarrassé de tout ornement en relief, qui a pour but d’améliorer la lisibilité

Nicolas le Cam – Le Flat Design, Principe et utilité – Lunaweb

Voilà ce que je cherchais, simplicité et lisibilité. Je suis aussi tombé sur le site http://www.flatvsrealism.com/ qui montre les différences entre le style flat et le style réaliste que l’on avait l’habitude de voir surtout dans les produits Apple.

Code couleur

Pour ce qui est des couleurs, je suis tombé sur le site http://flatuicolors.com/ qui donne la base des couleurs pour le flat design.

flat ui colors

Evidement je suppose que l’on peut utiliser d’autres couleurs mais j’ai préféré rester sur cette gamme en n’utilisant que 3 couleurs : wet asphalt, clouds et pomegranate.

Bon j’avoue, bleu blanc rouge, ça fait un peu drapeau français mais ce n’était pas du tout voulu

Un peu de relief

Par contre le tout plat ne me convient pas vraiment car ça me fait penser à l’interface de windows 8 que je n’aime pas vraiment et donc j’ai mis une petite ombre sous les blocs d’article un peu à la manière de Google+. Cela permet de rajouet un peu de relief à l’ensemble et de détacher les blocs d’article du reste.

Logo

Pour le logo du site, si on peut appeler ça un logo, j’utilise une nouvelle tendance pour donner un peu de relief à tout ce plat : Le long shadow.

Cela consite à mettre une ombre longue à 45° comme lors d’un couché/levé de soleil et ça donne l’illusion que le logo est posé comme un poteau sur le fond.

Pour la méthode du long shadow avec photoshop c’est ici.

Avant-après

Voilà j’espère que ce nouveau design vous plait, je pense qu’il va évoluer avec le temps car il est loin d’être parfait. Pour rappel voici l’ancien design.

N’hésitez pas à me donner votre avis