{"id":25761,"date":"2022-02-01T01:00:00","date_gmt":"2022-02-01T00:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=25761"},"modified":"2022-11-03T09:17:21","modified_gmt":"2022-11-03T08:17:21","slug":"ombres-flous-bonnes-pratiques","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/","title":{"rendered":"Ombres et flous\u00a0: 6 bonnes pratiques UX"},"content":{"rendered":"

L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s couramment utilis\u00e9s, \u00e0 plus ou moins bon escient. Voici 6 bonnes pratiques UX \u00e0 mettre en \u0153uvre avec vos ombres et flous afin de servir au mieux l’exp\u00e9rience utilisateur.<\/p>\n

 <\/p>\n

1. Accentuez vos call to action avec une ombre port\u00e9e<\/h2>\n

Les ombres port\u00e9es, que l\u2019on pourrait \u00e9galement appeler \u201combres ext\u00e9rieures\u201d, sont sans aucune doute les plus utilis\u00e9es par les webdesigners dans leurs interfaces utilisateur. L\u2019ombre est port\u00e9e, dans le sens ou elle pr\u00e9sente un d\u00e9calage par rapport \u00e0 l’objet. Ici, l\u2019ombre peut \u00eatre d\u00e9plac\u00e9e dans toutes les directions et pr\u00e9senter un effet de floutage plus ou moins marqu\u00e9.<\/p>\n

S\u2019il ne faut pas en abuser, ce qui a longtemps \u00e9t\u00e9 le cas, l\u2019ombre port\u00e9e est un atout UX \u00e0 ne pas n\u00e9gliger. En effet, la surench\u00e8re de flat design<\/a> n\u2019est pas la r\u00e9ponse \u00e0 tout. Ainsi, l\u2019ombre port\u00e9e est par exemple parfaite pour faire ressortir vos boutons d\u2019appels \u00e0 l’action. De fait, l\u2019ombre ext\u00e9rieure am\u00e9liore l’exp\u00e9rience utilisateur en mettant l\u2019accent sur les \u00e9l\u00e9ments avec lesquels il peut interagir.<\/p>\n

 <\/p>\n

2. Utilisez des ombres naturelles pour plus d\u2019impact<\/h2>\n

\"ombres<\/p>\n

Ne vous y trompez pas, celle qui offre le plus grand impact sur un design n\u2019est autre que l\u2019ombre d’apparence naturelle. Cet effet naturel est permis par des ombres douces, obtenues \u00e0 partir d\u2019un d\u00e9riv\u00e9 de la couleur principale de l\u2019\u00e9l\u00e9ment mis en valeur. Une ombre naturelle varie souvent en nuances et en tons.<\/p>\n

\u00c9vitez donc absolument les ombres form\u00e9es \u00e0 partir d\u2019une teinte noire pure. Cette derni\u00e8re cr\u00e9e un rapport de contraste trop important qui manque totalement de naturel.<\/p>\n

 <\/p>\n

3. Utilisez les ombres int\u00e9rieures avec parcimonie<\/h2>\n

\"ombre<\/p>\n

Bien que plus rares, les ombres int\u00e9rieures ne sont pas tr\u00e8s diff\u00e9rentes des ombres port\u00e9es sur le plan technique. En effet, leurs param\u00e8tres sont tr\u00e8s similaires, bien qu\u2019ici l\u2019ombre apparaisse \u00e0 l’int\u00e9rieur de l’objet et non \u00e0 l’ext\u00e9rieur de celui-ci.<\/p>\n

Le manque de popularit\u00e9 de l\u2019ombre int\u00e9rieure, notamment dans les interfaces utilisateur, n\u2019est toutefois pas le fruit du hasard. En effet, l\u00e0 o\u00f9 les ombres ext\u00e9rieures apportent de la profondeur aux \u00e9l\u00e9ments qu\u2019elles mettent en valeur, les ombres int\u00e9rieures sugg\u00e8rent un objet trou\u00e9. L\u2019\u00e9l\u00e9ment semble donc inactif pour l’utilisateur qui tend naturellement \u00e0 interagir avec les reliefs et non pas avec les creux.<\/p>\n

Ce style d\u2019ombrage est le plus souvent utilis\u00e9 pour les entr\u00e9es de formulaire<\/a> (cases \u00e0 cocher, boutons radio, entr\u00e9es de texte…) ou dans les formes extrud\u00e9es du Neumorphisme. <\/p><\/blockquote>\n

Notons que l\u2019ombre int\u00e9rieure permet de donner aux \u00e9l\u00e9ments un aspect plus r\u00e9aliste que l\u2019ombre ext\u00e9rieure. Malgr\u00e9 ce dernier avantage, mieux vaut l\u2019utiliser mod\u00e9r\u00e9ment et avec prudence.<\/p>\n

 <\/p>\n

4. Bien ma\u00eetriser le Neumorphisme avant de l\u2019utiliser<\/h2>\n

\"neumorphisme\"<\/p>\n

Le Neumorphisme s\u2019impose aujourd\u2019hui comme l\u2019une des \u00e9volutions possibles au flat design<\/a>. Il s’agit l\u00e0 d\u2019un empilement d’ombres utilisant un v\u00e9ritable relief afin de faire ressortir les \u00e9l\u00e9ments.<\/p>\n

Ce style d\u2019ombrage a le grand avantage de la fra\u00eecheur, id\u00e9al pour obtenir une interface diff\u00e9renciante.<\/p>\n

Attention : Attention toutefois, car le manque de contraste entre les \u00e9l\u00e9ments et le fond peut \u00eatre responsable de probl\u00e8mes de visibilit\u00e9. Veillez \u00e0 bien hi\u00e9rarchiser vos \u00e9l\u00e9ments importants (typo, relief, contraste, etc.) afin d\u2019\u00e9viter \u00e0 vos visiteurs de s’ab\u00eemer les yeux sur vos interfaces.<\/p><\/blockquote>\n

Sachez aussi que la diff\u00e9rence perceptible entre l’\u00e9tat standard de vos \u00e9l\u00e9ments et l’\u00e9tat \u201cs\u00e9lectionn\u00e9\u201d est tr\u00e8s l\u00e9g\u00e8re avec le Neumorphisme. M\u00eame les utilisateurs avec une bonne vue peuvent ne pas la percevoir.<\/p>\n

 <\/p>\n

5. Utilisez le flou gaussien pour valoriser les \u00e9l\u00e9ments de vos interfaces utilisateur<\/h2>\n

Le flou gaussien est un atout UX et UI int\u00e9ressant pour les effets de transition<\/a> entre les \u00e9crans. On l\u2019utilise \u00e9galement dans le but de brouiller un arri\u00e8re-plan, afin d\u2019apporter de la profondeur \u00e0 l’\u00e9l\u00e9ment mis en avant.<\/p>\n

\"flou<\/p>\n

Le flou gaussien est aussi tr\u00e8s utile pour cr\u00e9er des ombres qui sortent des standards. Plac\u00e9 sous un objet, il offre un rendu plus r\u00e9aliste qu\u2019une simple ombre port\u00e9e. On peut toutefois difficilement l’utiliser de mani\u00e8re r\u00e9currente dans une interface utilisateur. Son utilisation reste donc tr\u00e8s ponctuelle.<\/p>\n

\"flou<\/p>\n

Apprenez \u00e0 flouter une partie d’une image avec Photoshop en suivant notre tutoriel d\u00e9taill\u00e9<\/a>.<\/p><\/blockquote>\n

 <\/p>\n

6. \u00c9vitez le flou de mouvement et le flou de zoom dans vos interfaces utilisateur<\/h2>\n

Certes, le flou est tr\u00e8s utile pour apporter un effet de mouvement<\/a> \u00e0 un objet, sans pour autant que celui-ci bouge r\u00e9ellement. Selon l\u2019angle de votre flou, l\u2019objet donne le sentiment de se d\u00e9placer dans un sens ou dans un autre.<\/p>\n

Il existe \u00e9galement le flou de zoom, caract\u00e9ris\u00e9 par un objet qui se floute de l’int\u00e9rieur vers l’ext\u00e9rieur.<\/p>\n

Si ces deux techniques sont souvent utilis\u00e9es en photographie<\/a> pour leur qualit\u00e9 cin\u00e9tique abstraite, elles sont \u00e0 \u00e9viter absolument dans vos conceptions web, ayant un effet tr\u00e8s d\u00e9sagr\u00e9able sur \u00e9cran.<\/p>\n

 <\/p>\n

Besoin de donner du relief \u00e0 votre design web ? Publiez votre annonce sur Graphiste.com<\/a> et recevez gratuitement les devis de webdesigners freelances.<\/p>\n","protected":false},"excerpt":{"rendered":"

L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s couramment utilis\u00e9s, \u00e0 plus ou moins bon escient. Voici 6 bonnes pratiques UX \u00e0 mettre en \u0153uvre avec vos ombres et flous afin de servir au mieux l’exp\u00e9rience utilisateur. […]<\/p>\n","protected":false},"author":54,"featured_media":25768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[55],"class_list":["post-25761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-inspiration"],"acf":[],"yoast_head":"\nOmbres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ombres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-01T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-03T08:17:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solenne Ricard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solenne Ricard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\"},\"author\":{\"name\":\"Solenne Ricard\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4\"},\"headline\":\"Ombres et flous\u00a0: 6 bonnes pratiques UX\",\"datePublished\":\"2022-02-01T00:00:00+00:00\",\"dateModified\":\"2022-11-03T08:17:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\"},\"wordCount\":956,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg\",\"keywords\":[\"Inspirez-vous\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\",\"url\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\",\"name\":\"Ombres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg\",\"datePublished\":\"2022-02-01T00:00:00+00:00\",\"dateModified\":\"2022-11-03T08:17:21+00:00\",\"description\":\"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"ombres et flous\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ombres et flous\u00a0: 6 bonnes pratiques UX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4\",\"name\":\"Solenne Ricard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g\",\"caption\":\"Solenne Ricard\"},\"description\":\"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/solennericard\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/solenne-ricard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ombres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog","description":"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/","og_locale":"fr_FR","og_type":"article","og_title":"Ombres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog","og_description":"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s","og_url":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-02-01T00:00:00+00:00","article_modified_time":"2022-11-03T08:17:21+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg","type":"image\/jpeg"}],"author":"Solenne Ricard","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Solenne Ricard","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/"},"author":{"name":"Solenne Ricard","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4"},"headline":"Ombres et flous\u00a0: 6 bonnes pratiques UX","datePublished":"2022-02-01T00:00:00+00:00","dateModified":"2022-11-03T08:17:21+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/"},"wordCount":956,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg","keywords":["Inspirez-vous"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/","url":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/","name":"Ombres et flous\u00a0: 6 bonnes pratiques UX - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg","datePublished":"2022-02-01T00:00:00+00:00","dateModified":"2022-11-03T08:17:21+00:00","description":"L\u2019utilisation d\u2019ombres et de flous est une pratique de base de l\u2019UI et de l\u2019UX design (l\u2019un n\u2019allant pas sans l\u2019autre). Ces deux effets sont tr\u00e8s","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/03\/ombres-flous-1.jpg","width":850,"height":423,"caption":"ombres et flous"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/ombres-flous-bonnes-pratiques\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Ombres et flous\u00a0: 6 bonnes pratiques UX"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/d32851799b2f02a17a0e64f98fe5def4","name":"Solenne Ricard","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/89317884380ee1cf794e2e807f66c0d7d6ccf7fe2779b34a087382d27c0f12ee?s=96&d=mm&r=g","caption":"Solenne Ricard"},"description":"Dipl\u00f4m\u00e9e d'une licence d'Histoire de l'Art, Solenne propose un point de vue expert sur le graphisme et les outils cr\u00e9atifs.","sameAs":["https:\/\/www.linkedin.com\/in\/solennericard\/"],"url":"https:\/\/graphiste.com\/blog\/author\/solenne-ricard\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/25761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=25761"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/25761\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/25768"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=25761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=25761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=25761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}