Softiblog : Le blog de l'agence web Softibox

Flat Design, minimaliste mais sophistiqué

Posté par hoby 13 - mai - 2014

Flat LandDans le monde des tendances, tout va et tout vient. Tout est Ă©phĂ©mĂšre et ne peut durer Ă©ternellement dans l’univers de l’habillage. Et non, je ne parle pas de vĂȘtements de mode Ă  la Victoria’s Secret mais plutĂŽt de l’habillage d’un site, communĂ©ment appelĂ© design.

Si vous l’avez remarquĂ©, il fĂ»t un temps oĂč l’autoscale se trouvait sur presque tous les sites, mais il fĂ»t bien vite supplantĂ© par le RWD (Responsive Design). Ces derniers temps, et notamment avec l’arrivĂ©e de Windows8 de Microsoft, un nouveau genre de design fait beaucoup parler de lui : le FLAT DESIGN ou « design plat » en bon françois.

L’avĂšnement du Flat Design est comme un tsunami dans le monde du design, emportant dans sa course de plus en plus de designers et donc de sites, et les tendances actuels ne font que confirmer le gain de popularitĂ© du Flat Design.

Bien sûr, il est facile de ne pas mettre en place le Flat Design tout comme tout autre type de design, cependant, une compréhension plus détaillée révÚle que le flat design est bien plus que du « matte-moi ça ».

Mais qu’est ce que c’est ? C’est Windows8 !!!!  C’est iOS7 !!!! Non, c’est FLAT DESIGN !!!!!!!!!!

Flat design, késako ?

windows8-flat-design

Pour un nĂ©ophyte, le Flat Design c’est du chinois (ou de l’arabe, ou du nĂ©palais, c’est comme vous voulez). Pour mieux comprendre, jetez un coup d’Ɠil au bureau de votre ordinateur (celui sur l’ordinateur et non celui sur lequel l’ordinateur est posĂ©) ou Ă  la calculatrice de vote iPhone (ou tout autre Smartphone si vous n‘aimez pas la pomme). Vous remarquerez que ces Ă©lĂ©ments ont une forme similaire Ă  ce qu’ils reprĂ©sentent en rĂ©alitĂ© (c’est ce qu’on appelle le skeuomorphisme). A-t-on besoin  de mettre tant de dĂ©tails et d’effets visuels pour comprendre leur utilisation ? Et bien les flat- designers pensent que non.

Au design simple, le Flat Design peut ĂȘtre considĂ©rĂ© comme une version plus sophistiquĂ© et versatile du minimalisme. Souvent comparĂ© au skeuomorphisme, le Flat Design possĂšde un design simple dĂ©barrassĂ© de tout effet de relief, ce qui ne peut qu’amĂ©liorer la lisibilitĂ© et l’expĂ©rience utilisateur.

Dans ses débuts, le Flat Design, à 2 objectifs :

  • Accepter les limites de l’Ă©cran et travailler sur ces paramĂštres plutĂŽt que d’essayer de les dissimuler.
  • Utiliser cette nouvelle simplicitĂ© comme un point de dĂ©part pour l’épuration du design, et faire des sites web plus rapides et plus agrĂ©ables.

Le Flat Design c’est donc se dĂ©barrasser du style pour la fonctionnalitĂ©, de  la limitation de l’expĂ©rience utilisateur Ă  un monde analogue pour une expĂ©rience jouant sur les forces des interfaces digitales.

Principes du Flat Design

Alors, qu’est ce qui fait qu’un design est plat (ça sonne bizarre, je crois qu’on va garder « Flat ») ? Quatre Ă©lĂ©ments sont Ă  tenir compte pour un bon Flat Design.

Aucun effet supplémentaire

 

AngryBirdsFlat-iPhone

Quand c'est Flat c'est plat... rien Ă  redire

Le Flat Design tire son nom des formes utilisĂ©s, et utilise style 2D distinctif qui est juste plat. Le concept fonctionne sans le recours Ă  des effets de dĂ©coration – ombres portĂ©es, biseaux, relief, dĂ©gradĂ©s ou tout autre outil qui ajouterait de la profondeur. Rien n’est ajoutĂ© pour faire paraĂźtre les Ă©lĂ©ments plus rĂ©alistes, contrairement au skeuomorphisme qui fait tout pout donner un semblant de rendu 3D.

Mais alors qu’est-ce qui fait que ça fonctionne ? Le Flat Design Ă  un look bien distinct et se porte bien sans les petits effets par-ci par-lĂ , et se base sur la comprĂ©hension de la hiĂ©rarchie dans le design et du bon placement des Ă©lĂ©ments pour rendre un projet rĂ©ussi facile Ă  comprendre et Ă  interagir avec pour  les utilisateurs.

Eléments simples

flat example

Le Flat Design utilise des Ă©lĂ©ments simples  pour l’interface utilisateur (ou UI pour User Interface), comme des boutons et des icĂŽnes. Les designers se limitent souvent aux formes de bases comme les cercles, les rectangles et les carrĂ©s, et permettent Ă  chaque forme d’ĂȘtre autonome.

Chaque Ă©lĂ©ment de l’UI doit ĂȘtre facile Ă  cliquer (par la souris ou par le doigt), et l’interaction doit ĂȘtre intuitive pour les utilisateurs sans avoir Ă  passer par de longues explications.

En plus d’un style simple, l’utilisation du gras et des couleurs sur les boutons cliquables est souvent fait pour encourager l’utilisateur à cliquer. C’est ce qui nous amùne au point suivant : la typographie.

Importance de la typographie

Flat Typologie

De part la simplicitĂ© des Ă©lĂ©ments du Flat Design, la typographie tient un rĂŽle extrĂȘmement important.

Le ton de polices utilisĂ©es doit correspondre au schĂ©ma global du design – une police trĂšs ornĂ©e peut paraĂźtre Ă©trange face Ă  un design ultra simple. Les caractĂšres doivent Ă©galement ĂȘtre en gras et libellĂ©s simplement et efficacement, en vue d’avoir un ton cohĂ©rent visuellement et textuellement du rendu final.

Le plus souvent, on opte pour une police du type « sans serif » avec des variations et des tailles diffĂ©rentes pour la typographie principale d’un site sous Flat Design, Ă  laquelle on va ajouter un petit soupçon d’inattendu avec les nouvelles polices comme Ă©lĂ©ment dĂ©coratif. Attention cependant Ă  ne pas trop utiliser les polices Ă  caractĂšres spĂ©ciaux.

Les polices utilisĂ©es devront Ă©galement indiquer aux utilisateurs comme interagir avec l’interface.

Importance de la couleur

Flat-UI-Colors

La couleur tient une grande partie dans le Flat Design. Les palettes de couleurs des sites sous Flat Design sont le plus souvent plus claires, plus gaies, et plus coloriées que les autres sites.

Les palettes de couleurs contiennent souvent plusieurs teintes que d’habitude. Si les autres sites utilisent gĂ©nĂ©ralement 2 ou 3 couleurs tout au plus, sous Flat Design cette palette peut monter jusqu’à 6 voire 8 couleurs.

Les couleurs primaires et secondaires sont les plus utilisées, mais avec la montée en popularité de ce design, les couleurs retro (saumon, violet, vert, bleu, 
) gagnent de plus en plus de terrain.

Pour les couleurs les plus utilisés, vous pouvez vous renseigner sur http://en.wikipedia.org/wiki/Flat_UI_Design#Colors_used

flat-design

Le Flat Design possĂšde un atout majeur pour rendre un site facile d’utilisation et cela sans sacrifier le cĂŽtĂ© design. Cependant, le Flat Design n’est pas forcĂ©ment adaptable Ă  tous les types de projets, car au-delĂ  du look, il faut principalement penser Ă  l’expĂ©rience utilisateur lors du choix d’un concept graphique. En fait, l’objectif est et restera toujours le mĂȘme : proposer un design qui en jette visuellement et qui soit facile d’utilisation.

J’espĂšre que cet article vous aura mieux Ă©clairĂ© sur le Flat Design, et que vous saurez l’apprĂ©cier. Si vous voulez un site sous Flat Design, vous pouvez contacter Softibox ; dans le cas contraire ils pourront toujours vous proposer du bon RWD.

Alors, seriez vous flat ou pas flat?

flat_vs_realism

Pour vous renseigner sur le skeuomorphisme, je vous recommande l’article de Sylvain sur Blogoergosum

 

Sources :

  • http://www.gizmodo.com.au/2013/05/what-is-flat-design/
  • http://blog.lunaweb.fr/interface-flat-design/
Les commentaires sont fermés.
Le passage en HTTPS des sites internet, une migration qui se fait plus pressante

Actuellement la protection informatique des données personnelles est un élément ...

[Infographie] Comment booster l'engagement sur Facebook

Cette semaine, Softibox vous propose une infographie conseil sur la ...

Le CSS Grid Layout, un module puissant pour vos mises en page

MĂȘme si elle offre une grande souplesse en matiĂšre de ...

[Infographie] 12 éléments clés à afficher sur votre page d'accueil

Et pour bien démarrer  la rentrée de septembre, pour celles ...

La version Prestashop 1.7.2 disponible au téléchargement

Depuis le 4 juillet 2017, la version Prestashop 1.7.2 RC1 ...