Les deux courants principaux du design : le Flat design et le Material design

by Alexandre Vincent on 20/09/2018 |

Nous vous parlions il y a deux mois de l«importance d«investir dans une bonne identité visuelle. Aujourd«hui nous allons vous parler des deux courants de design que nous utilisons aujourd«hui dans le domaine du numérique : le Flat design et le Material design, deux styles à la fois semblables et différents.

Que ce soit pour le Flat design ou le Material design, toutes les interfaces numériques que nous utilisons aujourd«hui (Smartphone, tablette, ordinateur, etc.) sont modernes et épurées. Mais cela n«a pas toujours été le cas, et il est important de savoir d«où nous sommes partis.

*Le premier courant de design : le Skeuomorphisme

C«est lors de la présentation du tout premier iPhone en 2007 que le premier courant de design dans le numérique est reconnu : le Skeuomorphisme. Un style qui est caractérisé par des éléments d«interfaces informatiques reproduisant l«esthétique des vrais objets physiques. L«idée était de créer les interfaces les plus intuitives et familières possible pour les utilisateurs « casual ». En résumé, le Skeuomorphisme à été conçu dans le but d«habituer les utilisateurs au passage du réel vers le numérique.

On reconnaît ce style notamment par son côté réaliste vis-à-vis du réel avec des ombres, des reflets, ou encore des textures du réel comme le cuir, le papier, ou le bois dans le but de donner des repères facilement accessibles à l«utilisateur.
Mais depuis 2013 jusqu«à aujourd«hui nous connaissons des styles de design qui poussent encore plus loin la simplicité. Néanmoins on retrouve encore le skeuomorphisme dans le domaine de la production de jeux vidéo, ou encore dans les interfaces de MAO (musique assistée par ordinateur).

*L«arrivée du Flat design

Le Flat design a été conçu pour améliorer l«intuitivité et la prise en main des interfaces skeuomorphe. Littéralement « design plat », il consiste à la combinaison d«éléments graphiques (icônes, font, couleurs, etc.) bidimensionnel. Il met de côté tout ce qui ne sert pas directement à la lecture de l«interface pour la rendre la plus simple possible. Les ombres, les dégradés, les textures, tout est abandonné pour laisser place aux formes simples et aux aplats de couleurs. (voir ci-dessous la différence avec la skeuomorphisme.)


Mais l«intuitivité n«est pas le seul argument du Flat design. C«est également une question de vitesse de chargement. En effet, le Skeuomorphisme était surchargé de textures et d«éléments graphiques qui ralentissaient les performances et les temps de chargement de l«application.
Un autre avantage du Flat design est qu«il est conçu pour créer des interfaces intuitives avec n«importe quelle résolution d«écran. Microsoft, pionnier dans le domaine du Flat design est un très bon exemple notamment avec les dernières versions de Windows. Car l«objectif de ces dernières versions était d«adapter le système d«exploitation pour smartphone et tablette.
Malheureusement, il faut croire que l«utilisation du Flat design pour créer un OS multi-plateforme n«était pas une idée pertinente. L«expérience utilisateur n«était pas bonne car il y avait trop d«éléments similaires, et il était difficile pour certaines personnes d«aller au bout de leurs actions. Les éléments cliquables se distinguaient mal par rapport aux textes et icônes non cliquables. Microsoft a donc échoué avec son projet de « Windows Phone » mais se rattrapera avec brio avec Windows 10 que l«on connait tous.
Apple sera les premiers à réussir grâce au Flat design avec l«arrivée d«iOS 7 en 2013. à l«inverse de Windows, Apple a revu juste revu ses designs existants et a effectué diverses corrections. Ils ont notamment rajouté des aplats et supprimé les ombres. Les utilisateurs n«ont eu aucun mal à s«y retrouver et ont pu vraiment apprécier ces nouvelles interfaces. iOS 7 a eu droit à un excellent accueil du public et de la critique.

*Google entre en scène avec le Material design.

Le 25 juin 2014, lors de la conférence Google I/O, le Material design est présenté pour la première fois. Le Material design est un ensemble de règle de design proposé par Google et qui s«applique à l«ensemble des interfaces de ses logiciel et ses applications, notamment Android depuis la version 5.0 du système d«exploitation. En créant le Material design, Google avait la volonté d«avoir sa propre identité graphique sur l«ensemble de ses produits.


Le concept de base du Material design porte sur le papier et l«encre. Ce style de design privilégie les animations, les transitions, les effets de profondeur tels que l«éclairage et les ombres (les boxshadows) tout en gardant la base graphique du Flat design. Material design compile le tout avec un système intelligent de grilles. En effet Google souhaitait corriger certaines erreurs issues du Flat design. Comme dis précédemment, Microsoft avait échoué dans son design d«interface utilisateur à cause de la confusion qu«il y avait entre les éléments cliquables et les éléments non cliquables. Google a essayé de résoudre ce problème en rajoutant des ombres dans leur design. Les objets bidimensionnels deviennent des objets tridimensionnels permettant à l«utilisateur de mieux distinguer les éléments cliquables.
En résumé, le Material design reprend les grands codes du Flat Design en y rajoutant, de manière modérée, des caractéristiques du Skeuomorphisme pour rajouter de la convivialité et de la lisibilité à son identité visuelle.


*Flat design VS Material design : avantages et inconvénients
Maintenant que nous avons mentionné les courants principaux de design de ces dernières années, faisons une comparaison entre les deux styles principaux, le Flat design et le Material design.
Les avantages du Flat design :
-Minimaliste et à la mode.
-Accessible à la bonne compréhension des utilisateurs.
-Gain de temps et de performances ; UX optimisé.
-Ce design ne détourne pas l«utilisateur vers autre chose que le contenu en lui-même.
-Le Flat design s«adapte à tout type de résolution d«écran, ce qui est idéal pour le responsive design.
Les inconvénients du Flat design :
-La simplicité n«est pas forcément la solution à tout.
-Le Flat design de par son aspect très « plat » peut sembler ennuyeux s«il est mal utilisé.
-Pas toujours si intuitif que ça en a l«air, surtout pour les utilisateurs inexpérimentés (voir le cas de Microsoft).
-Le Flat design est beaucoup trop à la mode, ce qui en devient lassant. De plus il est compliqué de se démarquer de nos jours avec le Flat design.
Les avantages du Material design :
-De la même manière que le Flat design, le Material design est minimaliste et à la mode.
-Plus convivial et facile à utiliser. En effet la conception matérielle est une excellente idée car elle s«adapte à tout type d«utilisateur ayant l«habitude du numérique ou non.
-Le côté skeuomorphe qui est utilisé au service d«une UX plus compréhensible.
-Material design est fourni par Google avec une documentation complète simple à mettre en pratique.
-L«effort fourni par Google par rapport aux concepts d«animation qui apportent un plus à l«UX, et qui sont idéals pour les solutions web.

Les inconvénients du Material design :
-Un surplus d«animation peut entraîner des baisses de vitesses dans les applications, ainsi qu«une surconsommation d«énergie sur votre appareil.
-Material design est la propriété de Google. Il est donc difficile d«y apporter sa touche personnelle sans l«autorisation du détenteur des droits.
-Ce qui nous amène au point suivant : Si Google a les droits sur le style de design le plus utilisé de nos jours, on peut se demander si la créativité et l«originalité ne seront pas en danger dans les années à venir.


*Conclusion
Le Flat design et le Material design sont deux styles à la fois similaire et différent. La préférence de l«un ou l«autre n«est qu«une question de goût et de parti pris. Tout ce que l«on peut dire c«est que le Material design à été conçu en quelque sorte en réponse au Flat design en créant une alternative à l«aspect plat du Flat tout en ajoutant une pincée de skeuomorphisme pour ajouter du relief.
Certains vous diront que Material design relève du génie alors que d«autres auront plus tendance à dire que le Material design est le Flat design de la marque Google.
Chez Oshara nous nous tenons au courant régulièrement sur les tendances en matière de design. Car nous accordons une grande importance à l«identité visuelle que nous concevons pour vos projets numériques. Car un projet de qualité, est un projet ayant sa propre identité. Un prochaine article sur la trend de design actuel vous intéresserait ?


Source : Montpellier Wis

Was this article useful?

Processing.....