Flat Design

Flat Design : Règles strictes et clairement établies, approche visuelle minimaliste parfois radicale ; réflexion globale sur le Web Design, partie intégrante d’un même mouvement comprenant le Responsive Design, volonté de bousculer les normes esthétiques imposées, au centre de quelques débats qui agite les acteurs concernés, etc. ; Autant d’éléments qui pourraient permettre d’envisager le Flat Design comme l’expression d’une véritable intention artistique. Mais nous n’en sommes encore pas là…

ps : l’image d’intro du billet est un petit clin d’œil à Say Fat, une boutique de tee-shirts appétissante…

Définition de Flat Design

Le Flat Design se caractérise par une approche visuelle minimaliste établie selon :

• Une interface graphique y est essentiellement constituée d’aplats de couleurs
• Dans sa forme la plus radicale : tout effet de dégradé, biseau, motif, texture ou volume est définitivement écartés.
• Si volume ou ombre il y a, ceux-ci sont représentés, selon ces mêmes spécificités : par de l’aplat.
• Les formes simples (éléments graphiques et interactifs, icônes, interface globale) sont privilégiées
• Les couleurs sont, le plus souvent, vives sur fond contrasté ; les couleurs primaires et secondaires étant largement privilégiées (teintes de bleus vifs, verts, jaunes, oranges, violets, notamment)
• La palette de couleurs est également plus étendue dans une approche graphique (six à huit couleurs au lieu de trois dans la conception « classique »)
• La structure des pages et la navigation, elles aussi, sont réduites à l’essentiel
• En raison de cette simplification esthétique extrême, la typographie joue un rôle prépondérant et s’impose comme un élément graphique à part entière. Il en est de même pour la mise en page et les caractères de polices utilisés (« sans serif » sont préférés, à empattement variable). Le texte lui-même étant également réduit à l’essentiel

Quelques infidélités ; le « presque flat »

Partant de ses fondements théoriques mais s’imposant une approche esthétique moins radicale, on constate des variations et divergences :

• L’ajout (discret) de dégradés ou d’ombres portées
• L’utilisation de textures
• L’abandon de couleurs vives et saturées par l’ajout de blanc et de teintes globales d’orange, jaune ou bleu pour une esthétique rétro ; ou encore en privilégiant une palette de couleurs monochromatiques (dominante de bleu le plus souvent) accompagnées parfois d’une ou deux variations de couleurs (de cette variation, le vert est très populaire semble t-il).

La conception skeuomorphiste

Le Flat Design revendique, consciemment, une rupture totale à la conception skeuomorphisme. Ce terme consiste à donner à un objet virtuel l’apparence et tous les attributs d’un objet réel ; ceci, par l’emploi de texture (cuir, bois, papier), d’effets de transparence, de volume, etc. Tout l’inverse du minimalisme, donc.

Une approche esthétique apparue presque en même temps que les plus lointaines origines d’Internet (souvenez-vous : les backgrounds de site Internet avec des feuilles à petits carreaux maintenues par un trombone. #nostalgie..) pour atteindre son ultime (et bien plus subtile toutefois) aboutissement chez Apple et l’iconographie de ses applications mobiles ; ceci, dans un jeu de broderies ou de matières d’un réalisme parfois ahurissant (!). Hypothèse sociologique et anthropologique : l’illusion de la réalité rassure devant les manifestations de ce monde virtuel, étrange et lointain. Tout est affaire d’illusion, toujours, trop.. « La vie a besoin d’illusions, c’est-à-dire de non-vérités tenues pour des vérités. » (Friedrich Nietzsche).

Le signe de maturité du Web Design ? 

Bien plus que l’affirmation de principes esthétiques et conceptuels, le Flat Design entend surtout résoudre les questions de fonction. Un champ d’expérimentation et de réflexion (pour les projets les plus aboutis) au travers desquels la fonction prime définitivement sur la forme : en d’autres termes, faire que l’apparence d’un élément graphique découle uniquement de sa fonction et de ses interactions pour apporter une solution simplifiée et cohérente aux besoins des utilisateurs ; une expérience utilisateurs (UX) optimale.

Peut-être pourrait-on voir dans cette approche un signe de maturité du Web Design ? Car le Flat Design permet, finalement, à l’instar du Responsive Design (qui est à considérer comme l’aspect technique d’un même mouvement), d’interroger des fondements mêmes de la discipline et ses véritables enjeux : les éléments d’interaction et leurs articulations au sein du dispositif, la hiérarchisation et de l’information et son appropriation par l’utilisateur, etc (voir ces quelques réflexions complémentaires, entre autres, abordées dans l’introduction et état des lieux du Responsive Design).

Une simplification du discours (dans le sens : la démarche du projet en elle-même), en somme ; entre individus (concepteurs et utilisateurs) responsables et pleinement conscients dans leur rapport à l’objet. À ce titre, Allan Grinshtein (de LayerVault) faisait récemment référence à l’idée de « conception honnête » et exprimait la nécessité pour les designers de s’affranchir des codes visant à représenter les attributs du monde réel dans leur démarche conceptuelle.

Un courant artistique ?

L’enjeu finalement n’est pas si différent de ce qui se joue dans cette bonne vieille dualité théorique qui a depuis toujours échauffé les esprits (dans le sens : alimenté les débats) en design comme en architecture (le « Form follows function » de Louis Sullivan comme devise du fonctionnalisme) par exemple. Ceci avant de poser la nécessité d’un retour à la forme ; parce que l’humain dans toute sa complexité, ses désirs et sa Volonté (au sens de Schopenhauer) est bien plus que le simple rapport à la fonction et au rationnel ! I Need Something More s’efforcent de nous répéter les Dafts Punk dans le magnifique Touch (Daft  Punk, c’est placé !).

Là, toutefois, n’est pas la question. Et si les évènements semblent se faire écho, tout ça s’inscrit inexorablement dans le sens de l’histoire.

Et l’histoire de l’Art (peinture, architecture, littérature, ou cinéma, notamment), d’ailleurs, en est une parfaite illustration ; chaque nouveau mouvement s’opposant, de façon souvent radicale, au précédent (celui devenu une norme, tellement bien installée, tranquillou bilou, qu’elle en devient mortifère..) : l’impressionnisme succédant à l’académisme ; la nouvelle vague au cinéma de studio, l’architecture moderne faisant « table rase » de l’ornementation.

Toutes ces ruptures entretiennent presque toujours un rapport particulier à la technique. Plus précisément, les innovations technologiques et évolutions sociales conduisent certains à repenser les acquis et les règles imposées : la photographie et la révolution industrielle voient apparaître les premières expressions de ce qui sera nommé l’impressionnisme ; le béton, notamment, favorisera l’architecture moderne ; l’apparition de nouveaux appareils (caméra et magnétophone) permettra aux cinéastes de quitter les studios et d’inventer de nouvelles formes narratives, etc.

Flat Design = Responsive Design

Bref, pas si éloigné de ce que laisse entrevoir notre affaire : le Flat Design et le Responsive Design, l’expression d’un même mouvement devant de nouvelles contraintes (vitesse de chargement, contenu adapté aux différents supports et contextes, etc. Voir nos dossiers sur le Responsive Design à ce propos) et les nouveaux enjeux de la mobilité.

En fait, on serait bien tenté de dire, en contrepoint du débat actuel, que nous sommes face à une rupture et l’émergence d’une véritable intention artistique (ne mâchons pas nos mots !) dans la courte histoire du Web Design mais déjà riche ; au regard de cet « espace-temps Internet » dans sa fulgurante accélération et des mutations technologiques auxquels il est soumis.

Principales difficultés de cette apparente simplicité

Rapidement, si l’intention première s’inscrit dans cette simplification de la forme (esthétique) et du discours, le Flat Design appelle à une approche conceptuelle bien plus complexe et exigeante qu’il n’y paraît. Complexe dans la mesure où rien, aucun artifice, ne permet de détourner de la véritable fonction de chaque élément ; chacun d’eux (des règles générales de la typographie jusqu’au choix des couleurs) jouant un rôle prépondérant dans la conception et la compréhension du dispositif.

Conclusion

Ici, chez tuto.com, on aime bien le Flat Design ; on trouve ça très swag (d’ailleurs la prochaine version du site s’inspire du flat design, disons presque flat  – voir capture – et vous devriez voir fleurir très prochainement des tutoriels et formations consacrées au Flat Design) !…

Une petite preview de la v3 de tuto.com en flat design

Mais peut-être, tout ceci est-il bien plus simple, anecdotique et fugace qu’on veut bien se l’avouer et comme le témoignage (pas totalement contradictoire..) de François Le Pichon nous inviter à le penser..

Témoignage de François Le Pichon (Steaw NY)

Le Flat Design est incontestablement la grosse tendance UI Design du moment. Plus qu’un pivot esthétique, je parle du passage du skeuomorphisme à l’aplat de couleur, c’est également une tendance en parfaite adéquation avec le contexte technique du moment. Ainsi le responsive, le cross platform, le hosting, le templating, … tout est plus « simple » en Flat Design. Après, graphiquement, on voit de très belles choses, colorées, mais parfois un peu trop plate pour le coup. C’est un mouvement en maturation, reste à espérer qu’un juste milieu entre simplification et appauvrissement soit vite trouvé.

Ressources :

• http://designmodo.github.io/Flat-UI/
• http://magazineduwebdesign.com/kit-graphique-gratuit-flat-design-psd
• http://magazineduwebdesign.com/kit-graphique-gratuit-flat-design-psd
• http://graphicdesignjunction.com/2013/05/flat-design-ui-elements/

Pour approfondir le sujet :

• http://designmodo.com/flat-design-principles/
• http://designmodo.com/flat-design-colors/
• http://www.manoz.fr/historique-flat-design-enjeux/#.UahcZmTAV5m

(11033)