8

I've been looking at Google's guidelines for this thing called "material design", and I've been following it some. However, I also see a lot of sites using flat design: Twitter, Codecademy, and Gitter — and that's just a few. Then there are the ones that make use of CSS3 gradients, shadows, etc. and detailed images to design a site that looks real (correct me if I'm wrong, but isn't this what skeuomorphism is?), like the home page for Twitter Bootstrap 2.

From what I understand, flat design reduces the load on mobile traffic.

What advantages (in terms of speed/UX/etc., especially) do they each offer over each other?

migrated from webdesign.stackexchange.com Oct 3 '14 at 22:50

  • I think this is an interesting question to bring up. My initial thoughts are that skeuomorphic designs might have a speed disadvantage if they rely heavily on images. I assume that's what you mean by flat designs reducing mobile traffic load. But as a counter-point, a skeuomorphic design could still be accomplished with the many features available in CSS3, so I fear the answer to whether or not one or the other is advantageous in regards to speed would be "sometimes yes, sometimes no" – JohnB Sep 27 '14 at 4:13
  • @JohnB Can't even access the site. I get a 'redirect loop' error in Chrome---best not to dive into an OT discussion here though. – Alonessix Sep 27 '14 at 16:46
11

Skeuomorphism is really the opposite of flat design. Google's "Material Design" is merely their branding name for their specific interpretations of flat design. It's still flat design though. "FLat Design" was coined by Apple when they released iOS7. It caught on because it was the first term used, it could just have easily been called "Material Design" if Google did it first though.

The practice of skeuomorphism is to add visual elements you would expect to see if the object was physically real rather than projected on a screen. An example would be shadows and highlights. They exist on everything in the real world but on nothing on the digital world. Adding these skeuomorphic elements is designed to make humans feel more familiar with the digital elements.

Flat design is the opposite of this. In "flat design" there's no consideration for "real world" physics and lighting. Digital elements are made however the designer wishes to make them with no concern on what "reality" would do to the element if the object were physical.

The bootstrap home page is not an example of skeuomorphism. It's an example of flat design in general. Although it could be argued that the inset rectangle in the middle with the inset "emboss" effect is also skeuomorphic. So perhaps a "hybrid" may be the best description.

In terms of advantages/disadvantages technically -- there are no solid reasonings to choose one over the other.

Often to pull off high quality, believable skeuomorphic effects images are needed. Images will naturally increase HTTP requests and browser loading. If you forego images in favor of skeuomorphic CSS, the CSS can be extremely complicated and large. While decreasing HTTP requests images would require, the additional size (kb) of a CSS file with skeuomorphic elements may outweigh the reduction in HTTP requests (from the users point of view).

Flat design is generally easily pulled off with basic CSS3. If an image is needed in a flat design the same image would most likely be needed in a skeuomorphic design as well. So they offset each other in terms of advantages/disadvantages. Flat Design CSS is customarily less complex and easier to edit, but it doesn't have to be. It's quite possible to create a flat design with very complex CSS properties. Most flat designs contain gradients -- just not "real world" gradients based upon what light would do if the object was real. Every one of Apple's iOS7-8 or Windows 8 icons uses gradients. Merely very subtle gradients as opposed to "make this look like it's protruding" gradients.

In the end, there's no hard reason flat design may be technically better or worse than skeuomorphism. It all comes down to a matter of preference on the part of the designer. Both skeuomorphism and flat design are merely design trends without any basis in technical reasoning.

it's akin to asking "Which is technically better a red web site or a blue website?" -- there's no answer other than "Whatever you prefer."

  • 1
    One note is that skeuomorphic effects made purely in CSS would cause a huge performance decrease past just loading the file because gradients, box shadows, etc. are very intensive – Zach Saucier Sep 27 '14 at 5:07
  • I do elude to that in the answer @ZachSaucier :) – Scott Sep 27 '14 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy