Flat Design : La nouvelle tendance du web

Flat Design, kesako ?

Après mon précédent article sur la complexification des interfaces utilisateurs à l’envie de ces derniers temps, je voudrais aujourd’hui en prendre le contre pied et vous parler de la tendance actuelle des interfaces web, le flat design. Comme partout dès qu’il s’agit de design, des modes apparaissent et disparaissent. Peu de sites y échappent, le moteur de recherche de Google y est passé entre fin septembre et début octobre.

Le principe du flat design, c’est essentiellement de revenir à des graphismes épurés, sans effets d’ombre, et avec peu ou pas de dégradés de couleur, des icônes simples, l’essentiel pour se démarquer étant assuré par une bonne association de couleurs et une typographie originale, rappellant les techniques du « print ». Au final pour les adeptes du Flat Design, la frontière entre papier et web devient réellement ténue.

Les Géants de l’informatique déjà sur le coup

Microsoft a été l’un des premiers à lancer le mouvement – L’interface de démarrage de Metro est du pur flat-design, Google s’y est mis au niveau de son moteur de recherche il y a un mois afin d’harmoniser l’interface avec son réseau social : la barre de navigation noire du haut a laissé la place aux quelques icônes en haut à droite. Pour la petite histoire au passage j’ai eu un client qui m’a appelé parce qu’il me demandait de « réparer » son Google qui n’était plus comme avant … Des sites de messagerie instantanée et de micro-blogging tels que Skype ou Twitter y sont depuis un moment – même avant l’apparition du terme en fait, c’est principalement leur mode de fonctionnement qui se prête très bien à ce type de présentation.

Nouvelle mode, ancienne mode

Bien sur, pour marquer le coup, avec l’invention du terme flat-design, il a fallu inventer un nouveau mot pour définir l’ancienne tendance, qu’on a du coup désigné de skeumorphic-design. Un beau nom barbare qui veut juste dire qu’on s’efforce de faire ressembler des icônes ou une interface graphique en générale à leur pendant dans la vie réelle : des boutons en forme de boutons, un icone de carte en forme de carte, un curseur dédié au remplissage en forme de seau, etc. Ce qu’on fait depuis l’apparition des interfaces utilisateurs…

A noter que les deux types de design ne s’excluent pas, et qu’un site en flat-design peut tout à fait comporter des éléments skeumorphiques (l’inverse étant cependant plus improbable …)

Avantages du Flat Design

En tant que concepteur d’interface utilisateur, l’un des avantages du Flat Design est que l’on peut beaucoup plus facilement s’adapter à tous les différents supports (tablette, PC, smartphone) – une technologie elle-même répondant au doux nom de Responsive Design – , les zones actives du Flat Design se prêtant davantage au redimensionnement et au déplacement que les icônes pixelisés classiques.

Du point de vue de l’utilisateur, les zones sensibles sont de fait rendues explicites d’une manière plus subtile, moins pesante, que dans le cas de sites classiques, donnant à l’interface une apparence plus aérée et souvent plus facile à consulter. Les créations originales permises par le Flat Design permettent souvent d’avoir des sites plus sympas et plus diversifiés à consulter, tout en n’étant pas assailli par une bouillie de pixels comme on a l’habitude d’en voir ici et là…

Quelques sites en Flat Design …

Parmi les sites que j’ai parcouru en Flat Desin, un qui m’a particulièrement bluffé, c’est celui de France Télévision qui organise un sondage sur les opinions des français concernant tous les thèmes de société, baptisé « Génération Quoi ? »

http://generation-quoi.france2.fr/questions

Une webagency francaise qui a particulièrement bien réussi son coup en matière de conception de site Internet :

http://www.nitrografix.net/

Un outil de gestion de son activité sur les réseaux sociaux :

https://engagor.com/

…et bientôt le mien

Pour ma part, comme entrainement, je suis en train de refaire le site Internet d’Informatique-Oise, on peut espérer une sortie pour la fin décembre, sous le sapin de noël :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>