Flat Design vs. Skeuomorphism: Pros and Cons

The battle between Flat design and Skeuomorphism rages on. It started in the mid 2000’s when Microsoft brought in flat design with their Metro Design implementation.

Screenshot-5

Apple had a major push to change their iOS7 and brought a lot of discussion about flat design in 2013. Apple didn’t completely do away with skeuomorphic icons, but they certainly took a flat design approach.

oldvsnew_iconsAt the moment there is a strong design trend moving away from skeuomorphism and towards flat design. The minimal simplicity of flat design appeals to modern design; however, the elements of skeuomorphism still have their place. First, let’s take a closer look at the two.

Why skeuomorphism?

Skeuomorphism, in a nutshell, is an object or design that derives its aesthetic design cues from the original physical object.

Skeuomorphism_youthedesigner

Here’s a fun interactive infographic by Edward Korcheq.

In the design world, this refers to graphics that emulate or borrow design cues from the physical world, such as a calculator on your phone, or the Safari Compass browser icon. Skeuomorphic design elements are often design elements without functionality.

FAC-safari-icon

 

Taking closer look at the Safari Browser icon, you can see dropshadows and gradients give it 3-Dimensionality. Elements from an actual compass, like the key ring or the bearings for direction are also present. However, these design elements have nothing to do with the functionality of the icon.

Skeuomorphic design is often found in graphic applications that have functionality, such as cameras or calculators. We have familiarity with these objects from the physical world; so, referencing their physical buttons or the audible “click” when using a phone camera can provide a more intuitive user experience.

The push away from skeuomorphism

From a graphic design and user stance, these skeuomorphic design elements don’t add much to design, but they provide a sense of realism. However, they cause more visual clutter and take up more space on the screen than standard interface elements. The actual functionality of a product, app or operating system can get lost or muddied in the layers of drop shadows, gradients and the bells and whistles of realism. The graphics can often take longer to render and download.

Why flat design?

Flat design is a philosophy that has been making its way around the design world in the last year. It embraces minimalism, solid colors and fills, and eschews complex gradients, drop shadows and any design elements relating to the past.

Benefits of flat design

Because flat design embraces simplicity, a website or mobile app without all the drop shadows, gradients and beveled edges can provide a much cleaner user experience. Graphics can often load and render faster, without all the extra dropshadows and gradients.

Flat design drives such a minimal aesthetic; design cues become much more important. It forces designers to seriously consider how the hierarchy of objects, color information, and buttons inform the overall user experience.

When a flat design concept works, you get a beautifully designed minimal piece of work that is boldly understated and elegant — one that guides the user effortlessly to the end product.

Screen Shot 2014-02-16 at 11.57.55 AM

Flat design failures

Flat design’s forced simplicity can also be its undoing. Flat design is great for concepts that need minimal visual cues. Designs that previously benefited from a button with a drop shadow will end up having those design cues removed — and that’s fine if the entire design concept is also reconsidered.

However, that doesn’t always happen. And sometimes there is nothing simpler that can quite replace those user-friendly design cues. In this situation, a design that renders them “neatly” hidden may force the user to actually work twice as hard to understand what the design is trying to communicate — jeopardizing the website’s success in conversion.

For example, when I got my new Nexus 5, it took me forever to figure out that the three connected dots were the icon I was meant to use to share on various platforms.

Screenshot_2014-02-16-12-07-39 Screenshot_2014-02-16-12-34-51

Flat design & skeuomorphism can have a happy marriage

There are benefits to both flat design and skeuomorphism, and a healthy use of the two can provide a clean and user-friendly experience.

As a design philosophy and process, I like starting with a flat design approach. With so much information on the web today, designers need to highlight and communicate what is most important in a design. That aspect of the design should be bold and clear, and not weighted down with frivolous design elements. Once that part is determined, the hierarchy of the rest of the design can flow and fall into place. At this point, skeuomorphic elements may be added, with consideration, to call specific attention to sections of a design.

Screen Shot 2014-02-16 at 12.00.37 PM

Note the subtle drop shadows behind the text and buttons in the image above. There is also a subtle flat shadow on the devices they are featuring.

Screen Shot 2014-04-08 at 11.57.56 AM

Flat Design and Skeuomorphism will continue to influence each other and both will likely always have their place in the design world.

You may also like

One comment

Leave a comment