Le Material Design Lite, par Google

Adapté aux écrans de toutes tailles et popularisé par des géants tels qu’Apple, Microsoft ou Google (même McDonald’s s’y est mis), le flat design est une tendance forte du webdesign depuis 2013. Si les designers n’ont plus peur du « vide » qu’il fallait à tout prix combler auparavant, le passage au flat design n’est pas aussi simple qu’il n’y paraît et implique des efforts certains dans la phase de conception. Quels sont ses atouts majeurs et ses principales limites?

 

Flat design vs. skeuomorphisme

Le flat design (littéralement « design plat ») est un design graphique minimaliste ayant pour but de faciliter sa lisibilité et son utilisation. Associé à la formule « less is more », il est souvent opposé au skeuomorphisme, qui vise à reproduire de manière plus ou moins fidèle les caractéristiques graphiques d’un objet réel (couleur, texture, relief, forme) afin de donner des repères à l’utilisateur.

Le skeuomorphisme a marqué son époque et a notamment accompagné Apple dans le succès de l’iPhone, de 2007 à 2013, année de sortie d’iOS 7. Il a alors participé à la familiarisation des utilisateurs avec les écrans tactiles en offrant des repères concrets calqués sur le réel. Il offre en effet un approche sécurisante pour les utilisateurs, puisqu’il se rapproche le plus possible de la manière dont nous percevons les objets.

 

Application Boussole sur l'iPhone

L’application Boussole d’Apple sur iOS 6 (skeuomorphisme), puis sur iOS 7 (flat design)

 

Ce temps d’adaptation passé, le flat design s’est imposé petit à petit, proposant une représentation plus épurée et permettant de revenir aux bases du design : un bon design est un design réduit à sa plus simple expression. Plus besoin d’artifices. En enlevant les éléments superflus utilisés pour créer un effet 3D, tels que les ombres, le biseautage, les textures ou encore les effets dégradés, l’interface s’en retrouve simplifiée et nécessite un temps de chargement moindre. L’objet suggère toujours sa fonction, mais d’une façon plus raffinée. Les éléments graphiques ne cherchent plus à imiter à tout prix le réel, mais se focalisent sur l’essentiel pour transmettre l’information principale.

L’approche du flat design est donc plus abstraite. Si le fait de retirer certains détails peut sembler plus simple à exécuter pour un designer, cela représente en réalité un nouveau challenge puisque la réflexion en amont concernant les actions principales, la disposition des éléments et les couleurs à utiliser prend encore plus d’importance.

 

Minimalisme, simplicité, lisibilité

Le terme flat design a été popularisé par Allan Grinshtein (de LayerVault) qui explique que « les interfaces élégantes sont celles qui ont le plus d’impact avec le moins d’éléments ». Si la plupart des sites pouvaient alors paraître complexes, Grinshtein a voulu proposer une vision plus « honnête » du design.

 

Mouvement Bauhaus et Flat Design

Le mouvement artistique Bauhaus, source d’inspiration du flat design ? (à gauche, Homage to the Square par Josef Albers; à droite, Material Design par Google)

 

Rapidement adopté par la communauté des designers, le flat design s’appuie sur une hiérarchie et un placement des éléments clairement établis afin de faciliter la compréhension de l’interface et l’interaction avec celle-ci.

Alors que le flat design séduit de plus en plus de sites Web, il est encore plus populaire auprès des applications mobiles. Après s’être répandu lors de la sortie de Windows 8, puis démocratisé lors du lancement d’iOS 7 par Apple, suivi par Google et son Material Design, le flat s’est imposé sur les terminaux à écran réduit, ou l’expérience utilisateur est devenue la clé, notamment grâce au tactile.

 

Un nouveau défi

Chaque élément de l’interface utilisateur doit être facilement et rapidement accessible : l’interaction est désormais au centre du design, elle doit se faire de manière intuitive. Il ne s’agit plus de représenter fidèlement un objet, mais plutôt de le faire de manière symbolique, en s’appuyant sur une palette de couleurs, des formes et des typographies servant à guider l’utilisateur.

 

Flat Design - Log In

 

Sur ce type d’interface, les couleurs vont jouer un rôle primordial. Ce sont elles qui servent à hiérarchiser le contenu, en permettant par exemple de mettre l’accent sur un bouton et donc de rendre la navigation plus simple pour l’internaute. Le site Flat UI Color Picker recense ainsi quelques unes des teintes les plus en adéquation avec les tendances actuelles. Attention cependant à ne pas en abuser ou à utiliser les couleurs sans réflexion préalable. Pour s’assurer de choisir les bonnes combinaisons de couleurs, le site Paletton est une référence.

 

La simplicité est la sophistication suprême.” – Léonard de Vinci

 

En enlevant la surcharge informationnelle, le flat design redonne au texte l’importance qu’il mérite. De plus, si auparavant les navigateurs étaient limités dans l’affichage des polices, la liberté est désormais plus importante, notamment grâce aux webfonts et à des services comme Google Fonts ou Font Squirrel.

 

Quelles limites ?

Pour certains, le flat design commence déjà à souffrir de de sa popularité, avec comme argument premier le fait que beaucoup de sites deviennent impersonnels. Trop de flat design tue-t-il le flat design ? En tout cas, un des défis majeurs pour les designers reste d’arriver à concilier flat design et image de marque forte.

En outre, le flat design ne doit pas primer sur les besoins des utilisateurs : il ne s’agit pas d’une fin en soi mais plutôt d’un moyen. En effet, il ne dispense en aucun cas d’une réflexion globale pertinente car chaque design doit être adapté à chaque problématique.

Enfin, la dernière difficulté est d’arriver à différencier les éléments et à faire comprendre leur fonction sans tromper l’utilisateur. La frontière entre expertise des internautes et élitisme est faible et, en ce sens, un réel effort doit être fourni afin d’assurer la simplicité de navigation. Le tout étant de trouver le juste équilibre entre ergonomie et esthétique.