skeuomorphism vs flat design

To Skeu or not to Skeu

vick  – By Vikrant Nalkur

Website: http://agencyinsider.org/

The design cr’ follow link UX

These days, UX has oft been written upon, by tech blogs and journals – rightly underscoring its importance, as brands discern its use as a successful discriminator in the face of ever-increasing competition. Understandably, UX remains a conspicuous part of the larger discourse surrounding brand and services management. For many, UX comes to mind in the context of ‘technical’ devices like smart phones, computers, software, and websites. But all of us have dozens, even hundreds of daily ‘user experiences’ when we drive our car, stop at a red light, go through the checkout line at the grocery store, cook a meal in the microwave… the list goes on.[1]

Innocuous as it may sound, ‘User Experience’ is in fact, a remarkable convergence of multiple elements that can be broadly segregated into four buckets – Content, Design, Functionality & Interaction

ux chakraWhile technology helps sew these factors into a robust, user-centric product or service, the approach to these factors are engendered by the singular objective of understanding who it is that we want to address. For eg. – A B2C brand selling sugar candy may use light humor as its content ‘flavor’, choose warm hues in its color palette, utilize jocular fonts and leverage simple mouseover events to interact with its users – who, in this case are mostly kids or their parents. The same rules will be turned around their head – say in a more serious, B2B scenario.

 

go site Scenario topamax buy fast B2C B2B
Content Flavor •Light
•Sprightly
•Articulate
•Formal
Design •Fluid, sculpted layout
•Warm colors
•Informal/Jocular fonts
•User-centered design
•Minimalist layout
•Pastels, gray, white
•Clean, conventional fonts
•Process-centered design
Functionality •Easy searchability
•Behavior-driven personalization
•Social Network Integration
•Trade credit
•Scheduled or recurring orders
•Purchasing approvals, limits and quotas
Interaction •Emotion-driven
•Impulsive
•Cold, hard & logical
•Slow & steady

 

Thus every element of this ‘UX chakra[2] is decided upon, by precisely tracking, segmenting, triangulating and deconstructing each user group. Investigating the components of UX further, it is observed that Visual design inarguably is among the most tactile of all elements. Visual design in fact, is the first to mold a user’s impression about an experience judged to be either good or bad[3].

Recently, a raging debate has taken over the visual design world – that of the pre-eminence of flat design over skeuomorphic design.

 

Skeuomorphism & flat design – What is what?

Skeuomorphism – It describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings.

The concept of skeuomorphism directly borrows from the larger movement of Realism – a purely visual style that tries to imitate real-world materials, textures with life-like controls.[6]

Skeuomorphism is signified by realistic textures, luminosity and ostentatious effects.
skeuomorphism and flat design icon exmaples

Flat Design – On the other hand, flat design embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors. Just as skeuomorphism borrows from realism, flat design borrows from the minimalist school of thought. ‘Simplicity’ is central to the philosophy of flat design.

 

Skeuomorphism & flat design: The origin of species

Skeuomorphism

skeuomorphic pageflipThe first industry-scale application of skeuomorphic design was seen around 2007 when it was brought forth by Apple Inc. in its iPhone devices. The iPhone brought with it, a realistic user interface with flipping pages and switching knobs, much to their users’ delight. It was the first time that such visual richness was seen in a mainstream operating system. Before the iPhone though, user interface was seen to be cold, insipid & pixel-ridden. The only hitherto immersive, life-like experience was seen in the field of game design, which in itself was a very niche consumer segment.

Apple’s adaptation of skeuomorphism was a direct consequence of Steve Jobs’ infatuation with realism. Realism was adopted extensively by all apps from the iOS stable. While Safari browser borrowed from the idea of ‘navigation’ – by modeling it logo on a magnetic compass, the ‘iCal’ calendar application sported a leather stitching based on Jobs’ own private jet’s chairs!

The popular visual design thought would soon make a stark departure from the chromes and bevels of skeuomorphism to a more minimalist, typography-oriented flat design.

 

Flat Design
The advent of flat design came about from the year 2013. While one could have expected design agencies or innovation labs as the bearers of the Next Big Design, flat design in fact, and to the surprise of many, was spurred by global tech-giant Microsoft.

Whether to better differentiate themselves from Apple or because they genuinely thought this was a better design philosophy, Microsoft embraced a completely different aesthetic for their Metro-style user interface. Gone were the shadows, highlights, gradients, and textures of iOS apps. Instead, Metro offered flat squares of color with big typography.[7]

From 2013, websites and apps alike, increasingly sported monochromic tiles, with clean spaces, streamlined items, two-dimensional icons and visually appealing typography as the industry increasingly tended towards minimalism.

 

The rise & rise of Flat Design

The rise of flat design can be attributed as much to the shortcomings of Skeuomorphism as we can to the general shift in technology & design thought over the years.

 

Skeuomorphism: Shortcomings

In spite of the fact that ‘the devil is in the details’, a medium’s technical constraints will always influence the art it can produce. Skeuomorphism with all its realism and detailed renderings, has its set of shortcomings.

-Excessive use of textural elements can become cluttered and distracting. This is very important from a designer’s PoV, as even a couple of nips here and tucks there, can transfrom a clean layout into kitsch – with each individual element screaming for attention.

-By its very nature, skeuomorphs elicit a higher level of cognitive effort from its users. Prolonged use may thus result in visual fatigue for the user.

-Then there’s also the problem of getting skeuomorphism wrong: making something look like a physical object, but not work like it, also known as the “uncanny valley” of user interface design[8]

 

Flat design: The edge

-The single largest attributing factor to the proliferation of flat design is the advent of Responsive web design (RWD) – a design idea which believes that instead of creating multiple designs for different devices, a single design should adapt to multiple screens. This is turn was spurred due to the Mobile-first approach used industry-wide.

-Flat design makes content easier to digest by stripping away erroneous design elements

-It is effective in communicating site navigation and usability

-It provides an efficient way in communicating calls-to-action and providing information to visitors

antoine de saint exupery quote on minimalism

In Conclusion

In conclusion, we come back to the question – ‘To skeu or not to skeu’.

Although the answer to this cannot be reduced to a binary of yes or no, we can broadly say that skeuomorphism is on a downward trend and it is swiftly being replaced by flat design. Having said that, skeuomorphism cannot be and should not be simply written off as it still finds relevance in a wide range of applications.

Websites and apps in the domain of food or lifestyle tend to go for skeumorphic than flat design. This is because skeuomorphs replicate visual reality to a far closer degree and tend to elicit a more conducive user response as compared to flat design.

For eg: The visualization of the Panera Bread website is heavily skeuomorphic – complete with steaming cups of soup and freshly baked bread right from the oven. Panera Bread can ill-afford to display the same ‘products’ with a flat design as it would hardly do any justice to the brand and its offering.

Disclaimer: All company names, trade names, trademarks, trade dress, designs/logos, copyrights, images, content and products referenced in this blog are the property of their respective owners.

[1] http://usabilitygeek.com/user-experience/

[2] http://usabilitygeek.com/wp-content/uploads/2013/07/user-experience-areas.jpg

[3] https://www.researchgate.net/post/What_is_the_best_way_to_measure_user_experience

[4] http://www.aiga.org/guide-whatisgraphicdesign/

[5] https://en.wikipedia.org/wiki/Graphic_design

[6] http://sachagreif.com/flat-pixels/

[7] http://sachagreif.com/flat-pixels/

[8] http://www.getfinch.com/2010/08/avoiding_the_uncanny_valley_of_interface_design/

Spread the word!
Facebooktwitterlinkedin
Find us at -
Facebooktwitteryoutube

8 thoughts on “To Skeu or not to Skeu

    1. B2B, by its very nature is highly process-oriented. Consequently, the design employed should be minimalistic, business-centric with optimized screens/steps as they’ve proved to be the best for Business-IT alignment.
      Feel free to access the below resources on this topic –
      http://www.pradeephenry.com/process-centered-design.html
      https://econsultancy.com/blog/63120-flat-web-design-and-skeuomorphism-the-pros-and-cons/
      https://www.nngroup.com/articles/characteristics-minimalism/

  1. Good article. I have increasingly found customers adopting flat design. Design trends keep changing and many times take a uturn.

    1. Thanks Madalyn.
      In fact, there are recent developments which indicate the popularity of flat design seems to have plateaued and brands are looking at hybrid skeuo-flat design renditions to cut the ‘flat’-clutter!

Leave a Reply

Your email address will not be published. Required fields are marked *