November 1, 2014

Flat vs. Skeuomorphism

The other day I was browsing through (Behance & Awwwards) different design themes & approaches used by different designers. I was amazed by the number of web designs following the flat design approach. I know flat designs are in trend and designers generally follow what’s in the trend. However, it seems that nobody is sure whether it is a short lived trend or will it stay. As a designer you may already know a lot about these two approaches, however the key is to learn what, why, where, when. It is important to know the philosophy so that you can boldly mix it with your experiences rather blindly following a trend. This post helps you to learn the art, so that you (as a designer) can blend it in your expertise or ask your (as a client) designer to incorporate these things accordingly.

 

What is Skeuomorphism?

If you are a designer you must have heard it gazillions of times that skeuomorphism is generating a real life experience of an object into a digital world. Easier said than done, right? The success story of Skeuomorphism came into limelight with the advent of Apple’s iPhone. Back in 2007, the first iPhone was all about glittering metal body and apps (designs) that tried to create a real life experience. Remember the Compass, Calculator, and Notes? These apps tried to emulate their real life counterparts in iOS.

 

Flat vs. Skeuomorphism Design

iCal’s Skeuomorphic Design (Image Source: Morrick.me)

 

Since then, skeuomorphism never looked back. Every single designer on earth followed it and applied it in every possible way. Our website designs turned along. Buttons, banners, borders, images and every single element of the website design went skeuomorphism.

 

What is Flat Design?

For  a definition, flat design is a design in which we apply minimum texture and design on our design elements. For me, Microsoft’s design team really changed the whole scenario. Sam Moreau who led the Microsoft’s UX team, that  created Windows 8 UX. That design team initially pushed the case forward for the flat designs. Then Apple changed the phenomena with the iOS 7 launch. The iOS 7 took an 180 degree turn in its design approach by dropping Steve Jobs’s legacy of promoting “skeuomorphism”. We have all read in articles and blog posts about famous iCal’s leather stitches design came directly from Steve Job’s private jet. This is how Steve Job has promoted skeuomorphism right from his personal experiences. So when we see a change in this trend, it means Tim Cook has decided to run Apple in his own style. The new flat design in iOS 7 and subsequent change in its website design was considered a breath of fresh air by Apple’s fans. It is one of many risks taken by apple that paid off well, actually it has paid so well that it went viral.

 

Flat vs. Skeuomorphism Design

Flat Design Calendar (Image Source: Free Image)

 

Why it happened?

At first, it all seems an artistic representation of designs, which in fact is true to some extent. But the designs are far more what they appear to the naked eyes. There are several reasons for this shift in trend. The biggest of them all is the technological change. We have mobile devices all around us. A recent study has suggested that the mobile sales were accounted for 17% of the total online sales on last year’s Cyber Monday. This surge demands website designs which loads quickly and make sense to the users. Flat designs exactly does that. On the other hand, flat designs are quite handy when it comes to the responsive web designs. With a clean and clear design, people exactly know where to tap on their 5” mobile screens.

 

Where & When to make changes?

So what changes should we apply to our existing website design elements to meet the demands of modern day websites. Well, there are a lot of things which we need to consider. You may already know few elements,  but the important things is to learn when and where it should appear in your design.

 

Flat vs. Skeuomorphism Infographics

Flat vs. Real (Image Source: Cygnis Media)

Icons

The most important design element in the website design is their icons. Icons are the most important aspect because they serve the maturity and branding purpose of the website design. It is important to learn what sort of message you like to convey through your icons. Turning your icons flat requires minimalism. Minimalism is a practice in to eliminate unnecessary design styles. For me, any unnecessary interface elements that aren’t supporting the overall message (design) of the page should be minimal, or removed if possible.

It is advisable to use negative space, margins and paddings  wisely. They provide the overall feeling of the flat design. It should be kept in mind that applying minimalism in individual elements like shadows, lighting, and unnecessary gradients will change the design in its entirety.

It is recommended that when following a flat design, all your elements should look flat, without any fake impressions created through bevelling and other effects.

 

Flat vs. Skeuomorphism Icons

Flat Icons (Image Source: Behance)

 

Colors

The most improved phase of this flat design approach is the color. Designers have taken this flat design approach as an opportunity to play with the colors. They are using brighter colors in higher frequency. There are still designers using shades of grey for flatter looks, however brighter colors are very popular among designers and clients.

 

Flat vs. Skeuomorphism Colors

Flat Colors (image Source: Tutsplus)

 

Typography

Content is king, once again. After Google’s update for its search algorithm “Penguin” the importance of relevant content has been realized more than ever. Typography is one of the most important designs elements. As we have discussed earlier that flat design is all about removing unnecessary embellishments from the design, thus leaving typography in a more commanding position in flat design approach. A mix of large fonts and long scrolling pages can create a wonderful user experience. Thanks to Facebook and parallax scrolling, people are loving this type of web designs.

 

Wrap Up

Flat designs are not going anywhere, not any time soon. We will see more and more flat designs in the year 2014. Every designer should understand the W’s of flat design approach so that they can use it accordingly for their projects.

 

Author Bio:

Saad Anwar, A tech savvy marketing executive with a big appetite for learning. Currently honing skills and expertise in Web Designing and Development CompanyCygnis Media. Cygnis Media is a reputable company in Web, iPhone and Facebook application development services.

 

Article Tags

Related Posts

Design and Developed by