Design: Skeuomorphic vs. Flat vs. Skeuominimalism (Almost-flat)

March 18, 2013 § 3 Comments

(Originally posted on Quora at samihah.quora.com on March 17, 2013)

There’s recently been a lot of backlash against Skeuomorphism, partly because design has seen an oversaturation of skeuomorphic design to the point of ad nauseum, and partly because there’s value in design being as minimal as possible (some of this is related to the interconnectedness between engineering and design, in that heavy design elements can weigh down product performance). With this trend of moving away from skeuomorphic design, we’re seeing more designers adopt Flat design into their work. Perhaps the most famous example of flat design is Metro (design language) (yes, I know it’s no longer called Metro, but it’s what’s most familiar to people, so for the sake of this post, I’m calling it Metro). There’s another design language that’s been gaining momentum, and it’s a happy medium between skeuomorphism and flat design: Skeuominimalism (or more commonly known as, Almost-flat design). We’re seeing skeuominimalism in a lot of Google products – the Google Maps app for iOS being the most significant example.

Since a lot of non-designers and people interested in design are curious about the various design languages/styles, I’ll break down each of the three mentioned above.

Skeuomorphic Design:
Perhaps the most famous examples of skeuomorphic design come from Apple. They pioneered the adoption of skeuomorphism in design. Skeuomorph, is literally defined as, an object made to resemble another material or technique. In software product design, specifically iOS apps, we see this a lot. Take, for example, Calendar (iOS/Mac App) – it’s made to resemble a real calendar with tears at the top to resemble pages that have been torn. In a real calendar, there’s use for the tears in that, those are actual pieces of paper that have been torn from the app. In digital, there’s no purpose to it other than the aesthetic. When comparing Apple’s hardware design to their software design, it’s interesting to note how different in design philosophy the two seemingly are. Apple’s industrial design is all about being as minimal as possible with clean lines, and as little details as possible. Apple Human Interface Guidelines, and their overall software design philosophy, is filled with details from drop shadows, to gradients to make elements look more 3D and an overall focus on making objects appear more tactile (even if the medium is digital). If you need another example other than Apple for skeuomorphic design, check out LinkedIn’s iOS app. It feels like skeuomorphic design on steroids.

(Example of skeuomorphic design from a Dribbble designer)

Perhaps it’s because of my admiration of Dieter Rams and his 10 Principles of Good Design, or maybe it’s because I’m completely sick of seeing skeuomorphic design being overused, but skeuomorphic clearly violates the most basic of design principles: Good design is as little design as possible. But, great design shouldn’t be obvious and therefor, it’s important to look at what you’re designing for to see if it makes sense to adopt skeuomorphic design.
Flat Design:
Flat Design is often perceived as being on the opposite spectrum of design languages from skeuomorphic design. As previously mentioned, Microsoft’s Metro design language is the most famous example of flat design. Flat design champions clean design, and a focus on colors and typography. Because of the increased adoption of 2x/HiDPI screen resolutions (“retina” screens for you plebians – just kidding..), as well as increased performance and development speeds when design is clean and there aren’t many design elements that need to be loaded or created, we’re seeing more companies adopt Flat design philosophies. The increased adoption of HiDPI screens make it possible to focus on typography in UI design since these screen make thin fonts more readable.

(Example of Flat Design from a Dribbble user).

Skeuominimalism (aka, Almost-flat Design):
I’m not sure if Skeuominimalism is an actual word or if I made it up (edit: I did not make it up – just Googled it and it was introduced by Edward Sanchez) - but it’s essentially flat design with elements of skeuomorphic design. The focus on skeuominimalistic interfaces are on colors, shapes, and to an extent, typography. Shapes and colors are used to add dimension. The use of subtle drop-shadows are okay since it can create a level of dimension in design that’s not over-the-top or tacky. While Google has the most famous examples of skeuominimalistic design, my favorite examples come from LayerVault. Their website uses interaction, colors, and shapes to create dimension and a delightful user experience. The focus is on the content and their product goals instead of shiny UI. Even though the focus is on educating the audience on their product, they still maintain a level of elegance in their design without the UI being obtrusive and affecting the user experience. If you study the UI, you’ll see that rather than gradients and other fancy layer styles, they use colors and shapes to create depth but are still able to maintain a clean interface.

(Example of Skeuominimalism from Allan Grinshtein – isn’t it just breathtaking? I highly recommend going over to http://layervault.com and fully experiencing the UI with it’s beautiful UI and interactions).

While I’m more favorable towards skeuominimalism, that’s not to say that designers should completely drop skeuomorphic or flat design. There’s a time and place for everything. You should always design for your users and what makes sense for your product. So if it makes sense to use skeuomorphic design (example: social gaming, where the UI often should be more skeuomorphic so that it’s invisible and matches the feel of the game), then by all means, you should be using skeuomorphic. Don’t adopt flat design or skeuominimalism because it’s just now becoming “trendy.” Adopt a design language that makes sense for your product and the vision of the product.
TL;DR: Skeuomorphic=Apple, Flat Design=Microsoft, Skeuominimalism (Almost-flat Design)=Google. Do what makes sense for your product and users, and not just what’s trendy.

Tagged: , , , , , , , , ,

§ 3 Responses to Design: Skeuomorphic vs. Flat vs. Skeuominimalism (Almost-flat)

  • Nice Term Skeuominimalism ), never heard of it till several minutes ago. I’ve done a quick research over the internet, all the opinions are that Layervault.com uses a Flat Design not a Skeuominimalism. I enjoyed reading the article, and I’m sure will be hearing a lot this year about Flat Design , also about RWD http://winithemes.com/blog/responsive-web-design-an-emerging-design-trend-for-2013/ these 2 combined will help you make a successful site.

  • Samihah says:

    Thank you for the kind words! Layervault isn’t really flat design – well it is, but because they use colors and shapes to create depth, they’re closer to Google’s design philosophy of almost-flat (or, skeuominimalism) design. Take a look at Metro (Microsoft’s design), then compare it to Layervault. Metro is very much flat design and is probably the most well known example of flat design. Then take a look at Google’s design (specifically look at their iOS maps app), the design is flat, but there’s some depth created through shadows/colors/etc. Layervault follows Google’s design language much closer than Microsoft’s because of their focus on design being flat with depth – and this is what’s known as almost-flat/skeuominimalism design.

  • […] perhaps, skeuominimalism is more my speed – almost […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Design: Skeuomorphic vs. Flat vs. Skeuominimalism (Almost-flat) at Samihah Azim.

meta

Follow

Get every new post delivered to your Inbox.

Join 515 other followers

%d bloggers like this: