Qu’est ce que le flat design ?

Il n’est plus nécessaire de rappeler que la mode du web en ce moment c’est le Flat Design, que l’on retrouve dans les sites et plus encore dans les applications et les terminaux mobiles.

Qu’est-ce que le Flat Design ?

La version courte : le Flat Design est tout simplement un style épuré et minimaliste qui exclut tout effet de profondeur, d’ombre portée, de reflet. Il joue avec des couleurs vives sur des éléments utilisés en aplat. “Less is more” prend alors tout son sens.

Quelques petits exemples qui illustrent bien le Flat Design :

Flat design vs. Skeuomorphisme

Skeuo-quoi ? D’après notre ami Wikipédia : “Le skeuomorphisme (en anglais skeuomorphism) est un terme formé à partir du grec skeuos (l’équipement militaire, mais aussi le costume, l’ornement, la décoration) et définissant un élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine”.

Le Skeuomorphisme est en partie responsable de la facilité d’utilisation d’iOS dès ses début, il a permis à un large public d’appréhender une nouvelle technologie (le tactile), en reproduisant au plus près, des éléments que nous utilisons au quotidien (calculette, bloc-notes, bibliothèque, …).

Il apparaît évident que le Skeuomorphisme répondait à un besoin de continuité et de familiarité.

Ces derniers temps, on a reproché à Apple ce superflu de textures où l’aspect prime sur la fonctionnalité. Aujourd’hui, la tendance web se rapproche de plus en plus du design print.

En d’autres termes, une petite overdose de Skeuomorphisme s’est fait ressentir. L’arrivée du Flat Design, il y a 5 ou 6 ans déjà, s’est popularisé avec la sortie de l’interface Windows phone (anciennement appelé interface “Metro“).

Le skeuomorphisme d’Apple :

Exemple d’Apple qui a nuancé le style avec la sortie de son dernier OS :

Flat Design = Responsive Design

Qui dit Flat Design, dit Responsive web. Fondamentalement, ces deux techniques sont faites pour s’entendre et vont aussi de pair. Le responsive design est créé à la base sur une grille qui permet de repositionner les éléments, suivant le support sur lequel il est lu.

La structure des pages et de la navigation est réduite à l’essentiel.

Ce principe de conception à plat permet une optimisation de la lisibilité, une hiérarchisation de l’information idéale pour les petits écran, un design épuré, une légèreté graphique mais aussi un code plus simple (on sait que le chargement de page influe sur le référencement).

Quelques exemples de sites réalisés en Flat design

– http://neueyorke.com/

–http://www.microsoft.com/en-us/default.aspx

La typographie : un rôle essentiel

Avec une simplification esthétique extrême, la typographie s’impose comme un élément graphique à part entière, qui met l’accent sur la lisibilité et l’objectivité.

Le ton de la typo doit correspondre au schéma de conception globale, une police hautement enrichie peut paraître étrange contre un design ultra-simple. Les typos sont sans-sérif et sans empâtements.

Quelques exemples de l’importance de la typographie sur petits écrans :

Conclusion

Le flat design est une tendance certainement durable car elle est basée sur des principes ayant fait leurs preuves depuis le Bauhaus dans les années 30. “Ne pas ajouter de détails superflus, se concentrer sur l’essence même de la fonction”: voilà le premier des commandements modernistes. Chaque élément a son poids, sa présence et son utilité.

Le Flat peut même être perçu comme une évolution du web d’où naîtront des perspectives multiples de designs d’espaces plus ergonomiques.