{"id":126357,"date":"2024-09-20T11:11:02","date_gmt":"2024-09-20T11:11:02","guid":{"rendered":"https:\/\/entertainment.runfyers.com\/index.php\/2024\/09\/20\/microsofts-new-fluent-illustrations-are-more-3d-and-playful\/"},"modified":"2024-09-20T11:11:02","modified_gmt":"2024-09-20T11:11:02","slug":"microsofts-new-fluent-illustrations-are-more-3d-and-playful","status":"publish","type":"post","link":"https:\/\/entertainment.runfyers.com\/index.php\/2024\/09\/20\/microsofts-new-fluent-illustrations-are-more-3d-and-playful\/","title":{"rendered":"Microsoft\u2019s new Fluent illustrations are more 3D and playful"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">Microsoft is overhauling the illustrations it uses throughout its products and services to make them less flat and more playful and interesting. The previous iteration of illustrations was heavily vector-based, with a flat illustration style that can be found throughout apps like Microsoft Teams, Skype, Office, and even parts of Windows. Now, Microsoft is shifting towards 3D designs that bring back skeuomorphism, together with more colorful and playful designs.<\/p>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">\u201cOur studies showed that while our illustrations could be described as colorful, inclusive, and genial on a surface level, they were received within consumer culture as uninteresting and emotionless,\u201d explains the Microsoft Design team <a href=\"https:\/\/microsoft.design\/articles\/embracing-vibrant-universality-in-fluent-illustrations\" target=\"_blank\" rel=\"noopener\">in a blog post<\/a> outlining the new illustrations. \u201cThe flat vectorized style that was once hugely popular across the industry was now communicating sub-optimally and potentially evoking ideas and themes that were misaligned with our company values.\u201d<\/p>\n<\/div>\n<div>\n<div class=\"my-9\">\n<p><figcaption class=\"duet--article--dangerously-set-cms-markup inline text-gray-13 dark:text-gray-e9 [&amp;&gt;a:hover]:text-black [&amp;&gt;a:hover]:shadow-underline-black dark:[&amp;&gt;a:hover]:text-gray-e9 dark:[&amp;&gt;a:hover]:shadow-underline-gray-63 [&amp;&gt;a]:shadow-underline-gray-13 dark:[&amp;&gt;a]:shadow-underline-gray-63\"><em>Microsoft\u2019s previous illustrations were a lot more flatter and desaturated.<\/em><\/figcaption><cite class=\"duet--article--dangerously-set-cms-markup inline not-italic text-gray-63 dark:text-gray-bd [&amp;&gt;a:hover]:text-gray-63 [&amp;&gt;a:hover]:shadow-underline-black dark:[&amp;&gt;a:hover]:text-gray-bd dark:[&amp;&gt;a:hover]:shadow-underline-gray [&amp;&gt;a]:shadow-underline-gray-63 dark:[&amp;&gt;a]:text-gray-bd dark:[&amp;&gt;a]:shadow-underline-gray\">Image: Microsoft<\/cite><\/p>\n<\/div>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">Microsoft has now overhauled its illustrations with a style that is \u201cdesigned to simplify and unify our products with a distinct Microsoft aesthetic.\u201d The result is the integration of a lot more shapes and symbols from Microsoft\u2019s Fluent design language, with a more saturated color palette.<\/p>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">The 3D illustrations are a lot more expressive and playful than the flat and desaturated style that Microsoft has been using in recent years, with a focus on soft contours and more curves, shapes, and elements that mirror the natural world. <\/p>\n<\/div>\n<div>\n<div class=\"my-9\">\n<p><figcaption class=\"duet--article--dangerously-set-cms-markup inline text-gray-13 dark:text-gray-e9 [&amp;&gt;a:hover]:text-black [&amp;&gt;a:hover]:shadow-underline-black dark:[&amp;&gt;a:hover]:text-gray-e9 dark:[&amp;&gt;a:hover]:shadow-underline-gray-63 [&amp;&gt;a]:shadow-underline-gray-13 dark:[&amp;&gt;a]:shadow-underline-gray-63\"><em>Microsoft\u2019s new Fluent illustrations.<\/em><\/figcaption><cite class=\"duet--article--dangerously-set-cms-markup inline not-italic text-gray-63 dark:text-gray-bd [&amp;&gt;a:hover]:text-gray-63 [&amp;&gt;a:hover]:shadow-underline-black dark:[&amp;&gt;a:hover]:text-gray-bd dark:[&amp;&gt;a:hover]:shadow-underline-gray [&amp;&gt;a]:shadow-underline-gray-63 dark:[&amp;&gt;a]:text-gray-bd dark:[&amp;&gt;a]:shadow-underline-gray\">Image: Microsoft<\/cite><\/p>\n<\/div>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">Microsoft\u2019s new illustrations should also better complement accompanying text. \u201cOur previous illustrations often duplicated accompanying written copy, creating unnecessary mental strain and occasional confusion,\u201d says Microsoft\u2019s design team. \u201cBeing more intentional with how our illustrations harmonized with other elements within the user\u2019s experience could help alleviate this.\u201d<\/p>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">Microsoft is now using more general-purpose illustrations across different apps, so there are fewer bespoke illustrations that used to make its products look and feel different. \u201cWe also leveraged our Fluent iconography to repeat, reuse, and re-purpose a series of connected objects,\u201d says Microsoft.<\/p>\n<\/div>\n<div>\n<p class=\"duet--article--dangerously-set-cms-markup duet--article--standard-paragraph mb-20 font-fkroman text-18 leading-160 -tracking-1 selection:bg-franklin-20 dark:text-white dark:selection:bg-blurple [&amp;_a:hover]:shadow-highlight-franklin dark:[&amp;_a:hover]:shadow-highlight-blurple [&amp;_a]:shadow-underline-black dark:[&amp;_a]:shadow-underline-white\">The challenge for Microsoft now will be updating its illustrations across all of its products and services in the months ahead. Microsoft continues to evolve its iconography, illustrations, and overall Fluent design system regularly, so expect to see even these latest illustrations refined again in the future.<\/p>\n<\/div>\n<p><br \/>\n<br \/><a href=\"https:\/\/www.theverge.com\/2024\/9\/20\/24249735\/microsoft-fluent-design-illustrations-3d-overhaul\" target=\"_blank\" rel=\"noopener\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microsoft is overhauling the illustrations it uses throughout its products and services to make them less flat and more playful and interesting. The previous iteration of illustrations was heavily vector-based, with a flat illustration style that can be found throughout apps like Microsoft Teams, Skype, Office, and even parts of Windows. Now, Microsoft is shifting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":126358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":{"0":"post-126357","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tech"},"_links":{"self":[{"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/posts\/126357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/comments?post=126357"}],"version-history":[{"count":0,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/posts\/126357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/media\/126358"}],"wp:attachment":[{"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/media?parent=126357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/categories?post=126357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entertainment.runfyers.com\/index.php\/wp-json\/wp\/v2\/tags?post=126357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}