: 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.

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."

10% popularity Vote Up Vote Down