Le flat design dans les interfaces des sites-web, des logiciels et même ailleurs, c’est assez à la mode en ce moment.
Ça consiste tout simplement à supprimer les dégradés, les arrondis et bien souvent aussi à l’usage d’icônes monochromes et sans détails, purifiés :

Par exemple, depuis peu, le logo de Google a changé pour du flat :

logo de google avant et après flat design
Et dans Android, entre la version 2.3 de 2010 et 4.1 de 2012 :

comparaison entre android 2.3 et 4.1
À première vue, c’est joli : on a droit à une suppression du bruit visuel, celui apporté par les dégradés, arrondis, détails, ombres et bordures.

Sauf que… Pour l’interface d’Android, on a un design « flat » utilisé sur un téléphone dont la coque est arrondie, avec des reflets brillants et des dégradés, des dessins et des bordures partout.
Au final : ça loupe tout : une interface flat-design dans un appareil au look fancy. Et c’est moche.

Pour moi, dans le design, il faut que tout suive. Autrement, ça donne des contrastes visuellement contestables. Regardez par exemple le design entre le Samsung Galaxy S3 et le Sony XPeria S : le premier est arrondi avec une interface flat, et le second est flat avec une interface flat. Je ne possède aucun des deux téléphones, mais visuellement parlant, je trouve quand même le Sony est beaucoup plus adapté à son interface logicielle.

Pour une interface flat, il y a aussi le Nokia Lumia et il aurait pu y avoir l’Ubuntu Edge, que je trouve très classe.

Il y a des choses qui ne vont pas ensemble, et parmi ça il y a le design fancy et le flat qui donnent quelque chose d’horrible quand on les mélange.

Pour les interfaces sur ordinateurs, il n’y a rien à faire : entre une interface flat et une interface plus classique, je préfère largement le deuxième. L’autre me donnant toujours cette impression de travailler sous Windows 95.

22 commentaires

gravatar
plouf a dit :

Alors là c'est quelque chose qui me dépasse je dois l'avouer, je n'ai jamais compris les prises de tête intergalactiques sur les questions de design. Bon, ok, c'est mieux quand c'est joli, mais le principal c'est que ça marche, non ?
J'ai toujours tendance à choisir le truc avec un design minimaliste, KISS principle quoi.

gravatar
seb a dit :

Supprimer les ombres, les dégradés et les arrondis je trouve qu'on recule plus qu'on avance.

gravatar
Le Hollandais Volant a dit :

@plouf : perso je pense qu’on peut faire KISS et joli à la fois : le kiss ne représente pour moi que les fonctionnalités, les boutons, les options, les cases à remplir : le fait de ne pas avoir trop d’options et fonctionnalités au risque de s’y perdre.

Le papier cadeau du design n’y change pas grand chose, pour moi.

Quelque chose que je considère comme un design acceptable, c’est ce que j’utilise dans mes "petits outils en ligne" : quand ne peut pas supprimer d’avantages de texte et d’options. Pourtant ça restera toujours KISS si je vire tout le CSS, ou que j’y color en rouge, vert, jaune…

GMail par exemple : le design a beau être épuré, je ne m’y retrouve absolument plus depuis quelques versions. Peut-être est-ce l’habitude perdu du fait de ne plus être sous GMail, mais tout semble être devenu contre-intuitif : beaucoup trop d’informations secondaire sur la même page.

Mais tout ça n’est que ma définition du Kiss…

@seb : Même chose oui : on s’est battu pour avoir les ombres et les dégradés en CSS, maintenant tout le monde se contente d’un « background: white » sur tout la page.

Pourquoi ne pas mettre non plus une police monospace tant qu’on y est ?

gravatar
Petitkoalak a dit :

Personnellement j'aime beaucoup le flat-design : je ne dis pas que tout ce qui est fait est joli et agréable à regarder (comme dans tous les types de design d'ailleurs) ça permet de ce concentrer sur le contenu et c'est plus parlant et comme il y a moins de détails, ça prend moins de place.
Après les goûts et les couleurs ça ne se discute pas, évidemment.

Je te rejoins sur un point, timo, c'est que ça serait mieux si le tout est accordé, mais là-dessus j'ai pas trop à me plaindre avec mon Galaxy S2 qui a un design un peu passe partout : il est en même temps très "carré" avec des coins arrondis, mais pas trop.

Ce qui est assez marrant, et que j'ai remarquer en apprenant le CSS, c'est qu'avant on retrouver beaucoup beaucoup de site avec des bordures rondes, et maintenant que le border-radius s'est démocratiser, il y en a beaucoup moins, avec des valeurs ne dépassant pas les 7px. Mais je trouve ça pas si mal que ça ^^ C'est une façon aussi de continuer à s'améliorer soit et les "normes" en vigueur, recherché un nouveau style quand est arrivé au "bout" de l'ancien, et y revenir peut-être plus tard, qui sait ?

gravatar
fab@c++ a dit :

Personnellement, je ne vois pas quel est le problème avec le flat design.

@seb : tu dis que le fait de ne pas vouloir utiliser les arrondis et ombres en css est un pas en arrière. Je ne suis pas d'accord, un flat design actuel n'a absolument rien à voir en terme d’esthétisme avec un design des années 90 par exemple. On pense que ces designs sont simples voir trop simple mais c'est absolu faux.
De plus, quelle est cette croyance que vous avez pour être persuadé que le flat design ne jure que par les bouts carrés ?
Regardez donc ici : http://designmodo.github.io/Flat-UI/

Le Web design comme tout ce qui est artistique (à mon avis) ne fait qu'évoluer. Que vous vouliez rester sur design classique (classique dans le sens vieux de quelques années), cela ne tient qu'à vous. Par contre, il est anormal de penser qu'une propriété dès lors qu'elle est standardisée doit être utilisée obligatoirement.

Le flat design est un style comme un autre.

Je dirais également que ne parler que des contradictions entre la forme d'un smartphone et son interface même si c'est vrai n'est pas assez représentatif, c'est trop précis.

Je développe actuellement ce site http://gcs-framework.dzv.me/ qui est bien dans l'air du flat design. Cependant, il utilise bien des arrondis, des ombres mais en petite quantité. C'est le style qui veut ça et je ne pense pas que cela soit critiquable.

gravatar
Matronix a dit :

Timo, tu as mis des mots sur ce qui me génait sur Android/iOS !
Depuis toujours je n'arrivais pas à dire ce qui me génait sur ces systèmes, je les trouvais moches tout simplement.

J'aime bien le design flat moi, ça fait plus propre je trouve et moins "gamin". M'enfin les gouts et les couleurs...

*retourne sur son Lumia joli* :D

gravatar
qwerty a dit :

Comme tout, il faut de la modération, un équilibre. Néanmoins, le choix de couleur de certains "flat" et de Windows 8 me font penser à mes premiers sites : un choix de couleur critiquable !

gravatar
Usagi enragé a dit :

Tout est question de goût :) Ce sont deux paradigmes différents et je ne pense pas que l'on puisse dire que l'un est mieux que l'autre. Ça dépend vraiment de ce qu'on en fait et de la personne qui perçoit le design : perso je préfère l'interface d'Outlook. Mais je pense quand même que les designs de type flat sont en général plus agréables, notamment car on tombe moins facilement dans l'excès. Les border-radius: XXXXXXpx et les dégradés abusés sont légions

@fab@c++ : Fait attention à laisser respirer la page, je trouve la rubrique "Pourquoi utiliser le GCsystem ?" trop tassée. Je trouve généralement qu'augmenter légèrement la hauteur des lignes permet déjà d'améliorer cet aspect ;)

gravatar
H2G2 a dit :

Séance de psychologie sur lehollandaisvolant.net:

Que ressentez vous sur l'image de gauche ?

On dirait les icones de windows 7. Des images que même les enfants de trois ans peuvent comprendre sans lire les messages ( par exemple formater son téléphone, c'est une icone Apple ). Et c'est assez moche comme design.

Et maintenant sur l'image de droite ?

Pourquoi ils ont foutu des couleurs 8 bits ? Même mon terminal affiche plus de nuance de couleur. Et c'est toujours aussi moche.

gravatar
galex-713 a dit :

Perso je préfère le KISS dans le sens où j’aime quand le design favorise la lisibilité et le fonctionnel, en ça je trouve le flat design plus simple et moins lourd…
Après t’as raison : un device flat = un design flat, et un device fancy = un design fancy.
Même si bon le dégradé et les ombres permettent parfois de comprendre une certaine architecture de superposition et peut communiquer un message sur l’organisation et la hiérarchisation des éléments.

PS : 2 mails ? Ah parce que toi t’en es pas submergé? Juste par curiosité… mais t’as reçu le mien ? Je pensais que t’avais pas trouvé le temps et que t’en avais certainement d’autres plus importants mais là… M’enfin après tu fais ce que tu veux ^^ Juste que j’aimerais savoir si tu les as reçu et sinon comprendre où ils sont passés…

gravatar
Le Hollandais Volant a dit :

@galex-713 : j’ai un mail, daté de trois jours, mais j’ai un gros soucis d’encodage de caractères : tu utilises bien la bonne clé GPG, mais le message décode mal, et c’est pas lisible sans faire un tas de conversions bizarre. Si tu peux, essayes d’écrire dans un fichier txt, et de chiffrer ce fichier là et mettre en PJ (je reçois tes messages en PJ uniquement et un mail vide autrement, btw, je sais pas si c’est normal).

C’est pour ça que je met ça de côté en attendant (je peux pas décoder ça sur mon tel, là où je passe le plus de temps pour les mails)^^'

Pour être submergé, je le suis (disons 5~30 mails par jour (22 aujourd’hui), hors spam), mais en général j’y répond assez vite, du coup j’ai jamais plus de ~20 « non lus », et parfois zéro (quand je passe un petit moment pour tout répondre).

@H2G2 : oui, pour android 2.3, c’est moche : on dirait un set d’icônes pris dans un logiciel quelconque. Dans 4.1, c’est flat et plus recherché, mais ça va pas avec les terminaux je trouve, comme dit Matronix :D.

@Petitkoalak : oui, les arrondis… Si tu voyais certains de mes vieux designs, j’avais la main lourd sur les border-radius. J’aime toujours autant, mais là c’est plus des arrondis légers (5px ou 7px).

gravatar
galex-713 a dit :

@Le Hollandais Volant : Bizarre… Mon client mail normalement chiffre en respectant les standards et j’ai pu discuter en chiffré avec des gens utilisant mutt, Apple Mail, ClawsMail, Thunderbird et autre… Et ils n’ont eu aucun problème… T’utilises quoi comme client ?
Après j’utilise Evolution (oui je sais, je vais quitter cette usine à gaz et passer à quelque chose de décent, Mutt, et ClawsMail ou Thunderbird en graphique/local) et il enregistre pas les messages envoyés ^^" du coup j’ai plus le mail… c’est bête ça parlait de spam et de Benjamin Sonntag qui explique comment remonter aux spammeurs directement, les stopper, se venger (genre leur pourrir la vie et leur boîte mail) et les attaquer en justice… :-° Bon après moi je reçois pas de spam donc bon… pourtant mon adresse email est bien publiée sur la page web principale de mon serveur… et plusieurs personnes utilisant gmail ont utilisé mon adresse (donc Google l’a)… à croire qu’ils en veulent pas…

gravatar
Le Hollandais Volant a dit :

@galex-713 : heu, là le shell Bash xD.
je télécharge le fichier .asc et je décrypte ça.

Mais je viens de tester avec Thunderbird, en effet c’est pas mal mieux.

gravatar
Anon a dit :

Il y a quelques années tout les bons designers chiaient sur la mode du 2.0/glossy, et pourtant aujourd'hui tout le monde y est habitué.
Ce sera pareil pour le flat (et ses sous-tendances ridicules ("long shadows") qui servent surtout de masturbation intellectuelle aux hipsters du design)/

Je suis pas tout a fait d'accord, le problème n'est ni le mélange ni l'utilisation de telle ou telle mode, c'est l'abus dans son implémentation. Il y a du flat magnifique autant que du glossy dégueulasse.
Et sur mobile, le flat est mille fois plus adapté, avec quelques touches d'ombres et de rares dégradés on peut faire des trucs de fous avec un peu d'inspiration.

Pour finir, le flat mobile d'apple est minable comparé a celui de microsoft, et c'est assez rare pour être signalé.
(Je parle pas d'android, parce que l'ergonomie est a chier, bon design ou pas)

gravatar
Leito a dit :

Les goûts et les couleurs...

La mode change, évolue, certains l'aiment, d'autres ne l'aiment pas...

gravatar
galex-713 a dit :

@Le Hollandais Volant : Bash ? Ah mais ça explique touuuuuuut ! J’avais déjà remarqué avec « afficher le code source du message » qu’Evolution faisait un encodage bizarre des caractères spéciaux (un truc avec des signes égal que tout client mail normal sait lire pourtant)… après je sais pas de quel standard ça vient (parce que si touts les autres clients le lisent, c’est bien que ça doit être standard) ni pourquoi, ni si Evolution est le seul à le faire…



@Anon : Complètement d’accord, n’importe quel style peut-être beau, c’est leur exagération qui est moche. La beauté, c’est l’harmonie, c’est la juste mesure.

@Leito : C’est vrai qu’il y a la notion de nouveauté et d’habitude qui compte dans le design, mais ça ne dure en effet que le début, car si on prend en compte l’efficacité ou la clarté du graphisme, il peut être d’influence éternelle : prend la ligne de commande, elle a quasiment pas changé, et pourtant est toujours utilisée aujourd’hui, pour son efficacité et sa simplicité, il y a d’ailleurs l’excellent mémoire « La ligne de commande : une esthétique de l’efficacité » qui a très bien été présenté par son auteur dans la conférence éponyme au PSES2013 (je te laisse chercher pour le streaming si tu veux, chez moi les vidéos sont pas bien encodées… en attendant voilà le lien magnet du dossier contenant toutes les conférences, dont « PSES2013-Quota_Atypique-La_ligne_de_commande_une_esthetique_de_l_efficacité.mp4 »).

gravatar
clem a dit :
Pour moi, dans le design, il faut que tout suive.

Pas du tout d'accord avec ca.

Déja il faudrait que l'appareil et l'OS soit créé par la même société, et actuellement, a part apple...

Et si on suit cette logique, il faux que les application suivre le design imposé par l'os (voir l'appareil). et pourquoi pas les interfaces des sites web : si je suis sur iphone, je fait de jolis boutons avec bords arrondis et ombres, si je suis sur windows XP, je fait des boutons grisatre avec un biseau.

gravatar
galex-713 a dit :

@clem : Oui et c’est déjà comme ça. Les boutons et autres contrôles (boutons radio, checkbox, liste, etc.) sur le web suivent le design de l’OS et on ne peut pas les changer. Chaque application doit suivre les même règles typographique, il faut une constance, une cohérence, une continuité, sinon ça devient incompréhensible, dégueu, compliqué, etc.

Sinon « créé par la même société », non, il suffit d’utiliser une bibliothèque logicielle en particulier, du genre GTK, Qt, GNUstep, etc. et même pas obligé : il existe un système de thème où l’on peut adapter le design des fenêtres et contrôle à chaque thème utilisé dans plusieurs environnements (ce qui les rend graphiquement compatibles).

Si tu savais au moins comment fonctionne un OS, tu saurais que la factorisation et la modularité sont des règles de base à respecter pour tout système, pour des tas de raisons (pas seulement le design). Si tu savais comment fonctionne le Web tu saurais que ce qui importe *avant tout* c’est la sémantique, tu saurais que le CSS impose une modularité et une factorisation, tu saurais que les styles se réutilisent très facilement, tu saurais que c’est lisible sur n’importe quel support par l’adaptabilité du CSS qu’on nomme aujourd’hui « responsive design » permet d’adapter le design à n’importe quel support, tu saurais que beaucoup de supports sont supportés par CSS, mais pas tout ce qui est imaginable, tu saurais que si le Web avait mieux débuté, le CSS serait interne au navigateur, et le design serait donc propre au logiciel et non au site, et tu saurais que ça rendrait tout le Web automatiquement plus simple, plus « responsive », plus accessible, plus léger, plus pratique, plus traitable, plus lisible, plus correct et qu’on éviterait toutes les plaies aujourd’hui imposées aux intégrateurs.

gravatar
master case a dit :

C'est vrai que le flat design a de nombreux avantages, mais c'est sans doute aussi un phénomène de mode. Je n'ai jamais trop aimé les dégradés personnellement.

gravatar
BungalowBill a dit :

Le véritable problème d'après moi, c'est l'incohérence dans l'utilisation du flat-design aujourd'hui.
En effet je vois beaucoup d'interfaces et de sites qui passent au flat-design pour suivre la tendance alors que cette "mise à jour" ne s'imposait pas forcément.
Le flat-design, par définition consiste (c'est du moins dans cette optique que je le conçoit) à épurer les interfaces et éléments graphiques dans le but principal de mettre en avant le contenu et obtenir un rendu visuel général optimisé pour la lecture/consultation de ce contenu.
J'ai donc tendance à encourager l'utilisation du flat-design à condition qu'il mette en avant un contenu de préférence créatif (je compense l'épuration générale par la mise en avant d'autres éléments du design comme des images ou typographies).
Trop souvent on voit des designs et interfaces s'aplatir dans le seul but de suivre le mouvement sans que ce soit vraiment au service des éléments d'un site ou d'une interface voire d'un terminal comme tu le fait remarquer avec l'exemple des smartphones !

gravatar
Pat.Rick a dit :

Perso, j'en ai marre des discutions stérile.
Le flat design est un crime contre le bon gout. Libre a chacun d'aimer ou pas, mais il faut savoir que le mauvais gout est un gout comme un autre. Ceux qui aiment ont le cerveau complétement démoli. NON vous n'avez pas le droit d'aimer une tel horreur contre logique.

ps : c'est la décadence que maitrise vos maitres à pensez, et comme des moutons vous cherchez des explications pour accepter inacceptable. La musique moderne est un autre exemple de décadence avec l’apparition des DJ qui n'ont aucune notion du solfège et de l'harmonie, qui sont les créateur de la musique actuel. Je dit STOP !
Ouvrez vos yeux, ont se paye notre tête, merci d'utiliser votre cerveau.

Le Flat design est chiant dans la pratique, car il est impossible d'avoir une vision globale d'un site. Je pense qu'il s'agit d'une manipulation sur l'esprit. Vous préférer une image subjective, a l'image réel. Alors si vous n’êtes pas des moutons sans cervelles, allez vous renseigné sur la décadence et la tendance actuel, qui tend a la dégénérescence.

Conclusion : Le flat design peut convenir a certain, je n'en disconviens pas en réalité, mais l'imposer comme un phénomène de mode, et voir un tel engouement pour défendre, et allé jusqu’à le justifier, impose une extrême virulence de ma part.

Les commentaires sont fermés pour cet article