Flat vs Skeuomorphic vs Material


Remember when Apple released iOS 7 back in 2013 and every inexperienced designer thought flat design was the greatest thing ever invented? What about the following months where a billion infographics trended about Flat Design vs. Skeuomorphism? I bet you saw plenty of people sharing images about how Android was using flat design years before iOS? If you’re into digital design you probably read into Google’s version of Material Design Principles, too? Now that every big product seems to have tried them all and landed on their favourite, along with every freelance client requesting flat design because “it’s modern and trendy”, let’s discuss where we should really be applying each design principle and why.

Flat Design

It’s modern, minimalist and easy. Before you learned about gradients, drop shadows, textures and the rest, you were probably whipping up badass flat designs in MS Paint. You may remember Microsoft adopting flat design for some of their software back in the early 2000s along with a lot of other companies, but Apple’s adoption of the style in 2013 really kickstarted the trend again. It allows for streamlined designs that convey information quickly and became a powerful style for the responsive revolution.

With this trend came content that felt premium and planned at every turn; gone were dodgy gradient headers that swallowed text, gone were the slow-loading websites with textured backgrounds, gone were the rollover shadows that made every button stutter when your cursor approached – it was clean, accessible and impressive. Until it wasn’t.

Every university student that didn’t have the time, energy or skills to design something specific began churning out the same white screen with Helvetica Neue text everywhere. Every mobile app, website and even poster began sporting the same colour schemes plucked off some website claiming to have the best “flat design palette”. Products began trying to differentiate groups of information purely with a change in background colour, lacking real relationships and hierachies. Flat design was being used in the wrong places, by people that didn’t understand why it was a poor choice.

Skeuomorphic Design

Before taking in what you’re actually looking at, your brain processes a white, lined, paper background. You have adjusted to the setting and already know to expect hand-drawn content over the top and don’t question it. Skeuomorphism allows users to understand a new product immediately because it uses previous structures and designs we are used too from the physical world, allowing our mind to make the link to something we already understand; it feels safe and familliar.

From a designer’s perspective it can also give an extra level of polish on any product because many users percieve “realistic” as “high quality”. Skeuomorphism can often require very little imagination in design, because it’s just a case of copying something that already exists in our lives and has done for years.

As internet speeds picked up in the early 2000s, websites with metallic-mesh or wooden-finish backgrounds were becoming more and more common. Download sizes were no longer a problem and textures, images and dropshadows were everywhere. As displays improved however, so did our need for higher-resolution imagery, bringing back the issue of download sizes in skeuomorphic-heavy designs. It went further than just the download sizes, though; development time was an important factor in an ever-changing digital world and all these textures and images took time to create and blend together. Flat design punched skeuomorphism right in the spleen and the style was seen as “old hat” by every trendy/hipster graduate.

Material Design

Smooth surfaces, distinct colours, legible texts, small filesizes and design clarity. When Apple showed off their new mobile operating system boasting a clean new flat design, Google quickly moved away from flat design and introduced their own take on material design; a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

Different objects, sections and hierarchies are established through coercive styles and effects. Drop shadows and lighting are applied to surfaces to set them apart; make buttons feel touchable and text legible. Material design takes the style of flat design, but applies the real-world “feel” of skeuomorphism, giving users a natural sense of what actions to take during their journey to achieve their goals whilst using a product.

When Google published their take on the material design spec, a flurry of start-ups and social apps coated their iconography and buttons in dropshadows and clashing colours to fit the trend, but without understanding of why. A slight mis-match of lighting affects through a single asset can lower the consistency of an entire product, which is often the case with today’s common use of block-colour icons and dynamic menus. The spec was created with mobile in mind; tempting users to touch and feel a product… a system that translates horribly when used purely to “look nice”.

So what do I use and when??

Print: Flat or Skeuomorphic design are the ideal methods for print. Whichever you choose depends entirely on what you are designing for, of course. If it’s a quick-and-casual design, I would reccomend using Flat Design. It takes a lot less effort to get it right, as well as being a very quick, clear way to present information. Skeuomorphism is suitable for more permanent print work, with more character and a longer-lasting premium feel. Avoid material design; print isn’t what it’s for.

Web: Flat design wins hands-down. The loading times, ease-of-use, simplistic beauty and ability to direct a user’s attention to the content you want them focusing on is a huge benefit. It is also the most straightforward when creating responsive content (which you should ALWAYS be). That isn’t to say the others don’t have their moment; in a digital age dominated by flat design, skeuomorphism can really make a site POP. It’s still incredibly hard to nail and with the majority of internet surfers being on their mobile, the download sizes that come with skeuomorphism are often tough to justify. Material design in web has a small-but-growing place; web apps.

Mobile: Material design is going to encourage users to touch things and make your UI far more understandable than flat design on a touch-screen. It’s a major benefit of material design; making objects feel like they’re a layer above their surroundings and therefore appealing to touch. Flat design on mobile is often tough to navigate because it doesn’t make interactive features jump out at users. Yet again; skeuomorphic has its place; but as companies “clean up” their products, it seems to be getting scrunched up and jammed into the mobile-gaming category, whilst other genres of mobile content move away from skeuomorphism.

Joe, do you hate skeuomorphic design?

Not at all! When executed nicely, I love it. Maybe my advice above is biased because I am terrible at skeuomorphism. I spent many years not knowing a lot about design and trying to use skeuomorphism without knowing and my work looked disgusting. I still appreciate a well-executed skeuomorphically designed product! I just can’t do it. I stick to flat design for web and material design for mobile. Unfortunately I often lack a choice when it comes to print; clients know what they want and rarely allow for experimentation. Of course these are all my own opinions, but take note of when a product feels good or bad and see if you think a different design principle would change that. This post has stemmed from how horrific I find iOS to navigate, how terrible my friend’s material design prints look, and how frustrated I get when my skeumorphism still looks like the bottom of a bin after hours of tweaking.

TLDR; flat design is for print and websites, material design is for touch-screens, skeuomorphic design is a wildcard.

Facebook Comments