arrow-right arrow_up_thick arrow_up_thick_round arrow_up_thin arrow_up_thin_round bars bars_cut cross facebook instagram jackson-wynne-logotype lens lens_minus lens_plus linkedin phonetic rss triangle_down triangle_right triangle_up twitter

Flat Design and Skeuomorphism

Flat design existed long before it became a buzz word. It's just finally been packaged. When talking about "flat design" we're talking about design that is simplified and leaning more toward minimal in aesthetic. Besides being a mouthful, skeuomorphism is defined as "a physical ornament or design on an object made to resemble another material or technique." You could call it an imitation, or a representation.

skeumorphism-iphone-lumia-flat-designFor comparison the iPhone 5 versus Nokia Lumia - Skeuomorphic vs. "Flat Design" respectively

Most noticed in Apple's popular skeuomorphic treatments such as the calendar, video, camera, passbook and newsstand icons. The shiny, glossy nature is one aspect - but the literal representation of an object is a recurring theme throughout the interface and the applications themselves.

With design trends you'll often see cycles of really popular treatments make the rounds. Just log on to Dribbble. With flat design this year you'll see a lot more interfaces that are simplified. Maybe out of necessity for mobile application interface, flat design serves a purpose to create an easily recognizable experience taking a back seat to the content.

Specifically for this purpose we'll focus on interface design.

The case for flat design

Perhaps the only issue I have with this newly popularized term is it's name - flat design. It puts limitations on what clean, minimal design can do. It feels a bit derogatory to a design style that's been around for a really long time. Flat design can go a really long way, especially in web interface:

flat-design-web-example-1024x547Besides being an excellent example of flat design user interface, this is a slick website - Snowbird, worth a look

The term flat design could be misleading, but it's simple to use for categorization so I can see how it caught on. A "flat design" might have quite a bit of depth in hierarchy, subtlety and treatment. It doesn't mean everything has to be flat either, it can be used with photos, illustrations, objects and so on.

On the surface it seems quite simple visually, but don't be fooled. Creating a simple interface is deceivingly difficult. Unifying an entire interface with icon set, graphics and subtle treatments can be just as much work as rendering a perfect representation of say, a pool table for a game interface. At times it could definitely take more effort developing a whole language, versus an imitation.

flat-design-webAnother good example of flat design in web with colour blocking, icons and clean layout with a simple focus

I really like the idea of flat design. It feels more timeless than a flashy graphic with a shorter shelf life. But a shorter shelf life might be part of the brand strategy, especially in the fast paced app world.

Whether it's print, web or an application - a flat design treatment can go a long way.

The case for skeuomorphism

It can work really well when it's done properly, and it makes sense.

apple-ibooks1iBooks from Apple is a simple concept of a digital book shelf that works, albeit a little forced

Skeuomorphic features might engage familiarity of an experience using a real world translation.

It can add immense detail and value to build a complete experience that reflects on the brand. Especially in gaming and applications where an imitation works as part of the experience.

Too much can be off-putting and get campy really quickly. It's a fine balance. The right interface sets the tone and mood of a user experience and when done right, is appreciated but not fighting for your attention.

800px-1986ChryslerLeBaronTownCountryStationWagonSometimes it can be damn ugly - something out there for everyone I guess

Overuse of any style can become overwhelming. If it distracts from the goal of your product or service, it's not working as well as it could.

So which is better?

I don't think that's an easy answer. One is not necessarily better than the other.

Depending on the circumstance one might be more preferable. The argument against skeuomorphism is that using metaphors and physical objects take up valuable real estate. The argument possibly against flat design could be that if you take it too far, it can feel too plain or oversimplified.

Flat design doesn't have to be boring. Working with layout, colour, space, shape, pattern, texture, photography, illustration all act as a foundation to allow focus on the content.

Brand first, style second

I like to think every interface has a purpose that is in line with the overall goals of an experience.

When it comes to creative bias, ultimately the design decision should be in line with your project goals. If it works, run with it. Maybe it will work great today, but you'll need to revisit it in the near future.

The question you have to ask is whether or not it's a right fit for the job, without personal preference interfering. Is one design direction the right fit in your project? What's your overall strategy? These questions have to be answered before you begin any design in the early planning stages.

Don't go chasing design trends, stick to the fundamentals and strategies that you're used to.

Leave a comment
Jack Shepherd
Written By

Jack Shepherd

Co-founder, Partner and Design Director at Jackson Wynne @jacksheps