{"id":6029,"date":"2016-10-01T10:45:46","date_gmt":"2016-10-01T08:45:46","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=6029"},"modified":"2016-10-01T13:04:40","modified_gmt":"2016-10-01T11:04:40","slug":"guide-flat-design-pour-votre-site-internet-application-mobile","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-graphique\/guide-flat-design-pour-votre-site-internet-application-mobile","title":{"rendered":"Le guide du Flat Design pour votre site internet ou application mobile"},"content":{"rendered":"

Le design plat, connu \u00e9galement sous son nom anglais de flat design<\/em> a d\u00fb attendre des d\u00e9cennies avant d\u2019avoir enfin son moment de gloire. Connu d\u00e9j\u00e0 dans les ann\u00e9es 1980, il n\u2019a gagn\u00e9 une v\u00e9ritable popularit\u00e9 qu\u2019en 2010, apr\u00e8s le lancement de Windows Phone 7 par Microsoft.<\/p>\n

<\/p>\n

Aujourd\u2019hui, le flat design<\/em> est devenu comme un hit de la chanson : m\u00eame si vous ne connaissez pas son titre, vous l\u2019avez forc\u00e9ment entendu. En effet, appr\u00e9ci\u00e9 depuis longtemps dans le d\u00e9veloppement mobile, le flat design<\/em> s\u2019est r\u00e9cemment r\u00e9pandu un peu partout sur la toile. La preuve\u00a0:<\/p>\n

\"Logo<\/a>
En haut, l\u2019ancien logo de Google ; en bas, le nouveau logo en flat design<\/figcaption><\/figure>\n

Le design plat est un style de design graphique minimaliste qui s\u2019articule autour de deux principes\u00a0: la simplicit\u00e9 et la lisibilit\u00e9. Bas\u00e9 sur l\u2019emploi de rectangles, cercles, triangles et autres formes g\u00e9om\u00e9triques, il se passe d\u2019\u00e9l\u00e9ments d\u00e9coratifs tels que contours, ombres et d\u00e9grad\u00e9s. Il garde \u00e9galement plus d\u2019 \u00ab\u00a0espaces vides\u00a0\u00bb entre les \u00e9l\u00e9ments et dans le texte.<\/p>\n

Il n\u2019est pas \u00e9tonnant que, bien avant de conqu\u00e9rir le web, ce style ait d\u00e9j\u00e0 \u00e9t\u00e9 tr\u00e8s populaire dans le d\u00e9veloppement mobile. L\u2019interface \u00e9pur\u00e9e facilite la navigation sur le petit \u00e9cran de smartphone, et le t\u00e9l\u00e9chargement se font rapidement gr\u00e2ce \u00e0 la simplicit\u00e9 des \u00e9l\u00e9ments.<\/p>\n

\"Flat<\/a><\/p>\n

Regardons maintenant de pr\u00e8s les cinq \u00e9l\u00e9ments essentiels du flat design<\/em>\u00a0:<\/p>\n

L\u2019absence de profondeur<\/h2>\n

Le flat design<\/em> surprend par sa simplicit\u00e9\u00a0: pas de profondeur, pas de relief, juste des blocs en 2D sur le fond unicolore. Il y a quelques ann\u00e9es \u00e0 peine, les utilisateurs auraient eu l\u2019impression que \u00ab\u00a0quelque chose manque\u00a0\u00bb dans un site web con\u00e7u selon les principes du design plat, tellement ils \u00e9taient habitu\u00e9s aux ombres, contours, biseaux et d\u00e9grad\u00e9s. Aujourd\u2019hui, la profondeur est tout simplement d\u00e9mod\u00e9e.<\/p>\n

\"skeuomorphisme-vs-flat-design\"<\/a><\/p>\n

Il faut n\u00e9anmoins apporter une petite nuance \u00e0 ce propos, car il existe un effet de profondeur qui est largement utilis\u00e9 dans le design plat : le style \u00ab\u00a0long-shadow\u00a0\u00bb. Il y trouve m\u00eame ses origines. Il s\u2019agit d’une ombre port\u00e9e, inclin\u00e9e id\u00e9alement de 45 degr\u00e9s et environ deux fois plus longue que l\u2019objet qui la projette.<\/p>\n

\"flat-design-ombre-portee\"<\/a><\/p>\n

Le flat design<\/em> est \u00e0 l\u2019oppos\u00e9 du skeuomorphisme dans lequel les \u00e9l\u00e9ments du design imitent la forme, la couleur et le comportement des objets r\u00e9els.<\/p>\n

Regardons des exemples pour mieux saisir les diff\u00e9rences\u00a0entre ces deux styles : l\u2019interface d\u2019iOS6 (et de ses versions ant\u00e9rieurs), con\u00e7ue dans l\u2019esprit du skeuomorphisme, utilise des images en 3D, des d\u00e9grad\u00e9s et des textures pour reproduire les caract\u00e9ristiques des objets physiques.<\/p>\n

\"application-kiosque-skeuomorphisme\"<\/a><\/p>\n

L\u2019application Kiosque<\/em>, par exemple, ressemble \u00e0 un v\u00e9ritable kiosque \u00e0 journaux en bois. \u00c0 partir d\u2019iOS 7, s\u2019imposent la simplicit\u00e9 et le minimalisme du design plat.<\/p>\n

\"iOS<\/a>
\u00c0 gauche, l\u2019interface d\u2019iOS6 ; \u00e0 droite, l\u2019interface d\u2019iOS7<\/figcaption><\/figure>\n

La simplicit\u00e9 des objets<\/h2>\n

Dans le design plat, tous les objets de l\u2019interface doivent \u00eatre simplifi\u00e9s le plus possible. On ne trace que des contours qui permettent de reconna\u00eetre l\u2019objet, sans s\u2019attarder sur les d\u00e9tails. Les symboles et les couleurs suffisent \u00e0 l\u2019utilisateur pour se rep\u00e9rer.<\/p>\n

<\/a>
Source : Freepik.com<\/figcaption><\/figure>\n

La typographie<\/h2>\n

La typographie joue un r\u00f4le particuli\u00e8rement important dans le flat design<\/em>. La lisibilit\u00e9 \u00e9tant sa plus grande priorit\u00e9, il faut utiliser les polices parfaitement nettes et claires et raccourcir les textes. Puisque les objets sont distribu\u00e9s sur l\u2019interface avec parcimonie, le texte, \u00e0 c\u00f4t\u00e9 de la couleur, doit parfois suffire \u00e0 lui seul pour \u00ab\u00a0donner du style\u00a0\u00bb \u00e0 la page. Si vous pensez qu\u2019il serait mieux de l\u2019entourer d\u2019\u00e9l\u00e9ments pour \u00ab\u00a0remplir le vide\u00a0\u00bb, il se peut que vous ayez tort.<\/p>\n

\"flat-design-landing-page\"<\/a><\/p>\n

Les couleurs<\/h2>\n

L\u2019une des caract\u00e9ristiques les plus remarquables du design plat, en dehors des formes simples, est l\u2019utilisation de la couleur. La palette id\u00e9ale pour ce style se compose des couleurs lumineuses, vives et vibrantes comme celles des bonbons.<\/p>\n

\"bonbons\"<\/a><\/p>\n

Les sch\u00e9mas de couleurs ne sont pas limit\u00e9s \u00e0 quelques couleurs particuli\u00e8res. Ils peuvent comprendre diff\u00e9rentes teintes et nuances, selon ce que vous voulez repr\u00e9senter. Encore une fois, oubliez les d\u00e9grad\u00e9s et choisissez les \u00ab\u00a0couleurs de bonbons\u00a0\u00bb pour inspirer la joie et l\u2019\u00e9nergie aux visiteurs de votre site\u2026 mais dans les limites du bon sens. \u00a0Pensez parfois \u00e0 d\u00e9-saturer l\u00e9g\u00e8rement les couleurs pour que votre flat design<\/em> n\u2019\u00e9blouisse pas les utilisateurs, notamment dans le choix de gros aplats de couleurs.<\/p>\n

Le vide<\/h2>\n

Le design plat est l\u2019art de d\u00e9sencombrer les pages de tous les \u00e9l\u00e9ments superflus. N\u2019ayez pas peur de laisser des espaces vides pour permettre \u00e0 l\u2019\u0153il de se reposer. Le texte et la couleur peuvent suffire \u00e0 eux seuls, et si vous souhaitez ajouter des visuels, optez pour une illustration ou une photographie simple.<\/p>\n

\"Flat<\/a><\/p>\n

\"Flat<\/a><\/p>\n

Malgr\u00e9 sa grande simplicit\u00e9, le flat design<\/em> laisse le champ libre \u00e0 la cr\u00e9ativit\u00e9. Sa richesse se trouve dans les jeux de formes et de couleurs. Si vous n\u2019avez pas d\u2019exp\u00e9rience en design graphique, pensez \u00e0 vous entra\u00eener d\u2019abord avec de petits \u00e9l\u00e9ments comme des ic\u00f4nes avant de passer aux animations plus complexes\u2026\u00a0 Vous pouvez aussi trouver un web designer<\/a> qui fera le travail \u00e0 votre place.<\/p>\n","protected":false},"excerpt":{"rendered":"

Le design plat, connu \u00e9galement sous son nom anglais de flat design a d\u00fb attendre des d\u00e9cennies avant d\u2019avoir enfin son moment de gloire. Connu d\u00e9j\u00e0 dans les ann\u00e9es 1980, il n\u2019a gagn\u00e9 une v\u00e9ritable popularit\u00e9 qu\u2019en 2010, apr\u00e8s le lancement de Windows Phone 7 par Microsoft.<\/p>\n","protected":false},"author":480,"featured_media":6045,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[11],"tags":[553,220,19],"coauthors":[748],"class_list":["post-6029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-graphique","tag-flat","tag-mobile","tag-web-design"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/480"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6029"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6029\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6045"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6029"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}