{"id":2496,"date":"2014-07-22T13:16:02","date_gmt":"2014-07-22T13:16:02","guid":{"rendered":"http:\/\/www.ignitiononline.com\/?p=2496"},"modified":"2024-12-03T11:22:47","modified_gmt":"2024-12-03T11:22:47","slug":"skeuomorphic-realism-vs-flat-design","status":"publish","type":"post","link":"https:\/\/ignitiononline.com\/archive\/skeuomorphic-realism-vs-flat-design\/","title":{"rendered":"Skeuomorphic Realism vs. Flat Design"},"content":{"rendered":"

Skeuomorphism<\/strong><\/p>\n

Big word, right? Yet if you’ve been involved in the digital design world in the last decade, Skeuomorphism (pr. SKEW-OH-MORF-IS-UM) will have certainly featured prominently; perhaps even without you even realising it.<\/p>\n

So, what exactly does this strange long word mean?<\/p>\n

\"Oxford<\/a>

Oxford Dictionary definition of a skeuomorph<\/p><\/div>\n

When referred to in design terms it means making visuals and images look like a realistic imitation of real life objects, by using shadows, gradients, bevels and 3D-effects.<\/p>\n

A good example of Skeuomorphism can be seen in Apple’s original contacts app, which was made to resemble an actual address book in every way possible – textures such as leather, fabric and paper were recreated using colour, shadow, highlight, bevel and gradient.<\/p>\n

\"The<\/a>

The original iPad Contacts app \u2013 made to resemble a real address book.<\/p><\/div>\n

As you can see in the above example, much care has been taken in the design to imitate a real book; leather and paper textures are represented through the use of shading and illustration. The layout of the content also mimics reality, with tabs and alphabetical listing as it might be in a real address book. The search function and buttons are only a subtle digital addition to an otherwise realistic presentation.<\/p>\n

The key benefit of using Skeuomorphism in design is that it serves as a familiar visual reference point for the user, helping them to understand how to interact. This is especially useful in the digitalisation of real life concepts, such as a calendar or an address book. Therefore it is no surprise that the popularity of Skeuomorphism in design is synonymous with the rise of Smartphone and Tablet ownership era. Early devices such as these employed Skeuomorphism and Realism in their interface design to aid the user’s transition between real life objects and their digital counterparts. Rather than using a real paper notebook or calendar, users found it easy to make the digital switch, aided by the fact that the digital versions were visually familiar.<\/p>\n

However, it is now estimated that almost everyone who can\/ever will own a smartphone already owns one. We have collectively embraced the digital revolution, and our smartphones and tablets have become integral parts of our daily lives. We understand how to use our digital calendars and address books without needing them to resemble real life versions. So is it really any surprise that Skeuomorphism has supposedly fallen out of fashion?<\/p>\n

Skeuomorphism vs. Realism<\/strong><\/span><\/p>\n

Skeuomorphism is often incorrectly used to describe Realism, even by esteemed designers and developers, and the two seem to have merged into one design trend.<\/p>\n

The key difference is that Skeuomorphism is a concept, where the representation of a real life object is used to convey a familiar idea (such as a wastepaper basket being used to represent the \u201crecycling bin\u201d on your desktop), whereas Realism is a visual style that might use any realistic looking texture or effect as a stylistic design choice; not necessarily to represent that actual object. While the two are often used conjunctively, they can also be successfully used individually.<\/p>\n

\"This<\/a>

This website is an example of non-skeuomorphic Realism, because although the cardboard and paper textures appear realistic, they are not being used as a direct indication of the website content.<\/p><\/div>\n

So, when people say Skeuomorphism as a trend has declined, they are often in fact talking about Realism.<\/p>\n

While we don\u2019t need obvious skeuomorphic representations like we used to, skeuomorphic suggestions and representations are still evident throughout modern digital design. However, it is certainly true that Realism as a digital design trend has suffered a huge drop in popularity. Instead, a new trend has emerged and is rapidly increasing in popularity. Realism is out and \u201cFlat Design\u201d is in.<\/p>\n

Flat Design<\/strong><\/span><\/p>\n

Flat Design is the new, minimalistic digital design trend. Gone are bevels, gradients, shadows and any textural\/3D references to real objects; replaced instead with minimalistic layouts and images created from basic shapes and as few shades of colour as possible.<\/p>\n

\"An-example-of-a-flat-design-illustration.-Images-are-made-up-of-flat-shapes-and-colour-is-restricted-to-only-a-few-tones-and-shades.\"<\/a>

An example of a flat design illustration. Images are made up-of flat shapes and colour is restricted to only a few tones and shades.<\/p><\/div>\n

Flat Design was arguably first implemented on a wide commercial scale by Microsoft through Windows 8, Xbox One and Windows mobile interface designs \u2013 alongside another new popular design trend; the grid.<\/p>\n

\"An<\/a>

An example of a Windows 8 interface menu.<\/p><\/div>\n

Another important milestone in the popularisation of the Flat Design style was when Apple embraced it in the controversial 2013 iOS 7 update. This was the first time Apple, previously renowned for its fixation with Skeuomorphism and Realism, had made a major design change to its iOS interface.<\/p>\n

Once both Microsoft and Apple had embraced Flat Design, the trend was cemented. Many other companies and digital designers jumped on the bandwagon and Realism (as a design style) was generally pronounced dead and buried.<\/p>\n

\"Left<\/a>

Left iOS 6 (bevelled buttons and realistic icons) right iOS 7 (less use of bevel, gradients and shadows, resulting in a flatter appearance). Notice in particular the difference in the Newsstand.<\/p><\/div>\n

Many designers have a marmite relationship with Flat Design: they either love it, embracing its clean versatility, or hate it, dismissing it as generic and trite. Either way, a designer\u2019s job is to think \u201cbrand first, style second\u201d; the work should be led by content and not distracted by stylistic preferences. For example, if the brief is for an app with a clear and concise message, then minimalistic Flat Design is probably appropriate, but if the brief is to introduce a digital version of something already established in the real world, then a Skeuomorphic approach may be beneficial. We mustn\u2019t get so caught up in the aesthetic design that we forget principles of usability.<\/p>\n

Another advantage of the Flat Design style is that it works well with new HTML 5 features. The new HTML 5 \u201cCanvas\u201d element allows simple shape graphics to be drawn using only code \u2013 there are many advantages to using the canvas element over traditional embedded bitmap images, such as reduced page loading times and guaranteed clean edges, resulting in crisp, high quality graphics.<\/p>\n

Conclusion<\/strong><\/span><\/p>\n

It is important to note that the decline of Realism as a visual trend does not equal the abatement of Semiotics (the study of signs and symbols and their use or interpretation). Using the Flat Design visual style does not mean that images and icons can no longer be representative, either symbolically or literally. A library app may still use an icon of a book, an envelope may still represent mail, a music app may still be indicated through musical notes, and so on. Semiotics is still, and will always be, at the forefront of any good designer\u2019s mind.<\/p>\n

While Skeuomorphic Realism may have become outdated as a visual trend, we still continue to use Skeuomorphic suggestion in modern design. For example, white text fields in an online form would be an example of Skeuomorphism, because the user associates the white background with paper (something we write on). This helps the user to intuitively know how to interact with it (write in it). We must be careful to not entirely rid our designs of Skeuomorphism \u2013 for example, if a button is a completely flat box then a user might not know to press it. Even some slight shading around the edges (a Skeuomorphic suggestion of a real life 3D button) may make it easier to comprehend.<\/p>\n

Of course we must take this new design revolution with a pinch of salt. Like many other design styles, Flat Design will likely fade out of popularity in time, but perhaps, considering the visually dynamic world we live in today, it\u2019s a nice opportunity to strip away the clutter and go back to the basics.<\/p>\n

Design Styles at Ignition<\/span><\/b><\/p>\n

Here at Ignition, we have a flexible approach to design styles and trends, but first and foremost we consider the needs of the client and the end user. For many projects, our visual style is steered by the client\u2019s in-house brand guidelines, which we embrace in order to reinforce consistent corporate identity. We continue to ensure that content is brought to life and the user experience is effective, by making sure that navigational and interactive objects such as buttons and arrows are obviously clickable.<\/p>\n

We\u2019ve used Skeuomorphic techniques across a variety of platforms; one example being the simulation of ripped newspaper headlines for \u201cNew features\u201d pages in one of our e-learning module, another is a page-turning effect used in an interactive guide. These examples demonstrate both Skeuomorphism (because the design imitates a literal concept \u2013 such as turning a page) and Realism (because the design uses effects and textures that look like real paper). Both examples were used at a time when the users were transitioning into the digital world, to aid the user\u2019s comprehension of the new medium through visual familiarity.<\/p>\n

An example of our own in-house use of Flat Design can be seen in our previous post Look Back at 2013<\/strong><\/a> in the Infographic at the bottom.<\/p>\n

READ MORE:<\/strong><\/span><\/p>\n

http:\/\/www.webdesignerdepot.com\/2013\/12\/infographic-flat-design-vs-skeuomorphism\/<\/a><\/p>\n

http:\/\/www.jacksonwynne.com\/flat-design-and-skeuomorphism\/<\/a><\/p>\n

http:\/\/www.limeredstudio.com\/what-we-think\/trendspotting-the-one-where-i-talk-about-skeuomorphism-flat-design\/#.U6v5I_ldWs0<\/a><\/p>\n

http:\/\/www.limeredstudio.com\/what-we-think\/flat-web-design-finally\/#.U6wBbfldWs1<\/a><\/p>\n

http:\/\/sachagreif.com\/flat-pixels\/<\/a><\/p>\n

http:\/\/www.digitalbuzzblog.com\/infographic-2013-mobile-growth-statistics\/<\/a><\/p>\n

Ignition<\/strong>\u00a0has been delivering training, events and e-learning since 1979, operating in the automotive, technology, retail, hospitality and cosmetics sectors. For further information about Ignition\u2019s work please email\u00a0<\/span>info@ignitiononline.com<\/a>\u00a0or call +44 (0) 1279 201100.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Skeuomorphism Big word, right? Yet if you’ve been involved in the digital design world in the last decade, Skeuomorphism (pr. SKEW-OH-MORF-IS-UM) will have certainly featured prominently; perhaps even without you even realising it. So, what exactly does this strange long word mean? When referred to in design terms it means making visuals and images look […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"categories":[9,87,3,5,2,1],"tags":[89,98,318,92,93,100,316,99,97,315,94,91,319,77,90,95,96],"class_list":["post-2496","post","type-post","status-publish","format-standard","hentry","category-app","category-design","category-e-learning","category-general","category-training","category-uncategorized","tag-app-2","tag-apple","tag-design","tag-digital","tag-flat-design","tag-html","tag-ignition","tag-ios","tag-ios-7","tag-ipad","tag-microsoft","tag-skeuomorphic-realism","tag-skeuomorphism","tag-smartphone","tag-tablet","tag-windows-8","tag-xbox"],"acf":[],"_links":{"self":[{"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/posts\/2496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/comments?post=2496"}],"version-history":[{"count":27,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/posts\/2496\/revisions"}],"predecessor-version":[{"id":5315,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/posts\/2496\/revisions\/5315"}],"wp:attachment":[{"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/media?parent=2496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/categories?post=2496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ignitiononline.com\/archive\/wp-json\/wp\/v2\/tags?post=2496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}