Si le flat design a envahi les interfaces multimédia l’an dernier, il est possible que tu n’aies aucune idée de cette notion de tendance graphique. Mais si tu es en MMI et que les mots “flat design”, “skeuomorphisme” ou encore “realism” ne te disent rien, il est temps de se renseigner.

Ça tombe bien, tu es au bon endroit ! Voila une explication rapide du flat design, ainsi que des aides par rapport à son utilisation.

Une arrivée logique

Ayant touché les interfaces mobiles en premier, ce mouvement est pratiquement partout, que ce soit sur ton smartphone, sur des sites internet, et même dans des logiciels. Et c’est logique ! Le flat design permet, par exemple, d’obtenir un site aéré et simple d’utilisation sur toutes les surfaces.

Le passage du realism au flat s’est fait petit a petit et très discrètement, jusqu’à la mise a jour de Windows 8 et peu après, l’arrivée de l’iOS 7. Deux géants qui n’ont pas fait de plis : là où Microsoft a joué gros en supprimant le menu démarrer, Apple a complètement changé sa vision du design (comme le montre la première image ci-dessous).

L'évolution de icône réglages de l'iOS 6 a l'iOS 7
L’évolution de icône réglages de l’iOS 6 a l’iOS 7
L'évolution du logo Windows de la version 7 à la 8.
L’évolution du logo Windows de la version 7 à la 8.

 

 

 

 

 

 

Finies les ombres et le relief : « délavez vos icônes et passez les au rouleau compresseur ! » diraient les plus conservateurs. Mais c’est plus que ça, il y a une justification derrière ces modifications. L’évolution de l’utilisation de ces outils a transformé leur image, passant du détail réaliste au simple et rapide.

L’impact de cette tendance a également influencé l’art digital, et beaucoup d’artistes proposent désormais des œuvres en flat design ! Que ce soit des affiches de films remasterisées ou encore des références à la culture pop, certaines de ces créations, malgré le minimalisme du genre, sont extrêmement belles et soignées.

 

Les tips du flat design

Dans le cadre de la création d’une application mobile, d’une icône d’un logiciel ou plus simplement d’un site internet, il est possible que tu sois amené à faire du flat design. Mais il ne faut pas se fier à l’opinion courante : il n’est pas si facile de faire du flat, il y a des “règles” à respecter ! Voila quelques indices sur la manière d’exploiter cette tendance :

  • Il faut des couleurs ! Là où les nuances de sombre pouvaient signifier quelque chose de classe, ici ce sont les couleurs qui priment.
  • Un style épuré, mais pas trop ! Il faut savoir différencier les parties ou choses importantes, et éviter la page blanche.
  • La typographie est un choix capital ! La police d’écriture a subit un gros changement avec cette nouvelle ère, et les classiques peuvent avoir changé.
  • Mélanger Flat et Realism, mauvaise idée. C’est possible si le mélange est habile, mais il y a plus de fortes chances de donner un effet « pas terminé » qui n’est pas très pro.

 

Généralement, ces quatre points sont respectés, mais en design, il ne suffit pas de suivre une mode, il faut également savoir créer ce qui va plaire à l’utilisateur. C’est pourquoi le flat ne fait pas l’unanimité : certaines personnes n’aiment simplement pas, et on trouve encore certains sites originaux et réalistes, qui raviront les réticents.

 

Histoire d’aller plus loin

Certains sites permettent de découvrir le flat design en détail de manière ludique ou de façon approfondie, vous pouvez également découvrir des créations originales sur des sites tels que Pinterest ou Creative Market.

Ce site internet explique l'arrivée du flat design grâce a une animation interactive. http://www.flatvsrealism.com/
Ce site internet explique l’arrivée du flat design grâce a une animation interactive.
http://www.flatvsrealism.com/
Le Flat Design, pourquoi et comment ?
4.6 (92.5%) 8 votes

Ce qui pourrait également t'intéresser ...

5 réflexions sur “ Le Flat Design, pourquoi et comment ? ”

  1. Avec l’arrivée du flat design et de la simplification et de la « minimisation » des éléments de design (Pratique auquel j’adhère complètement et que je prônais bien avant l’arrivé de ce courant), il semble intéressant de se poser la question « le design de mon site doit-il suivre l’esthétique à la mode du moment ? ». Car c’est le risque de se noyer dans la foule anonyme des sites ayant exactement le même style graphique. Ne serait-il pas bien de se démarquer de cet océan de sites uniforme, innover plutôt que de « moutonner » et de passer son logo en Helvetica pour la hype du moment ?
    Question ouverte bien évidemment

    1. Comment tu viens de le dire : Il faut trouver le bon compromis. Il faut aussi voir dans quel contexte se situe le projet. Si c’est un design pour un client X, avec cahier des charges construit en amont et donc une stratégie marketing définie, peut-être qu’on ne pourra pas totalement se faire plaisir et réaliser un design 100% flat. En revanche, on peut toujours réfléchir sur ce qu’apporte cette tendance en terme d’ergonomie et d’UX, et là on peut voir quelles solutions il apporte dans notre projet.
      Dans le cas où c’est un design pour soi-même, où on souhaite se faire plaisir, rien ne nous empêche de suivre la tendance, quitte à y amener sa touche perso. Après, rien ne garanti son efficacité …

      De mon côté j’étais plutôt retissant en voyant arriver cette tendance l’an dernier, question de goût tout simplement. Mais il est indéniable qu’avec l’ère mobile c’est une belle réponse aux problèmes d’espaces condamnés sur nos interfaces portables ! Moi-même aujourd’hui je fais 90% de mes designs en flat, parce que il y en a besoin

      Je pense qu’on peut probablement s’attendre à l’arrivée d’une nouvelle tendance graphique dans les prochains mois, quand on voit à la vitesse à laquelle ça évolue, et je ne serais pas étonné si cette évolution découle à nouveau d’une innovation technologique (ex: Google Glass).

  2. Il me semble que tu as fait une erreur dans la représentation des icônes de Safari. La première, il s’agit de celle d’OSX (Pré-Yosemite) et la seconde n’est pas officielle.

Laisser un commentaire

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

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir