Skeuomorphism vs. flat design vs material design

workerbee

It’s design vocabulary time! We know you’ve heard these two terms floating around: skeuomorphism and flat design. What do they mean? They’re two contemporary designs trends that each have their own unique style and set of traits. Skeuomorphism creates a sense of familiarity by emulating materials, while flat design stays true to its medium, often feeling minimal and utilitarian.

These opposing styles create a major fork in the road for designers (especially those in UI design), and many projects begin with the question of which world to jump into. Luckily, we’re here to help answer that question with an in-depth look at each design style. We’ll also explore Google’s all-new design language, Material Design, which combines the aesthetic of both skeuomorphism and flat design.

Skeuomorphism

The term “skeuomorph” comes from the Greek: “skéuos” (meaning container or tool) and “morphḗ” (meaning shape). So, what does it mean to contain a shape? Let’s look to the culture that the term skeuomorph came from.

sk1

Notice the repetitive cubes which ornament the seams of this Greek structure. These cubes (known as dentils) were placed there to create the illusion of wooden rafters that were used to support the roof in old buildings.

Because buildings in Greece were made out of wood before marble, we can speculate that architects may have been trying to contain or emulate a shape that was familiar. Imitating wood in marble structures may have helped invite people to use a new technology.

sk2

Between ancient Greece and today, skeuomorphism has popped up in many places. In the 1950s, wood-bodied station wagons became too expensive to produce, and Ford began exploring new materials and technologies. Because there was an attachment to wood, Ford installed fake wood paneling to ease buyers into the newer materials taking hold in vehicle manufacturing.

by Bonavita
by Lightlife

With electric tea kettles, a form similar to the original stovetop counterpart is used—like a wide base, stove-like docking station, and gooseneck spout. This all helps ease consumers into a new technology by way of nostalgia! The tofu dog is made in the shape of the classic hot dog to appeal to those who are comfortable with hot dogs. (Imagine if this vegetarian product was housed in a spherical shape or otherwise. No thanks!)

Through these examples, we can arrive at a basic definition: Skeuomorphism is design that emulates familiar materials to invoke a sense of familiarity or comfort in consumers.

Controversy and authenticity

Skeuomorphism is highly controversial. Detractors say that it can often feel fake or inauthentic. Why replace a reliable stovetop kettle for one with a cheap plastic disc? It’s also often used to make cheaply made products look more expensive. That Ford Caprice might have been difficult for some folks to enjoy without feeling like they were faking it! In the case of the tofu dog, some vegetarians would argue they shouldn’t be made to fit in with carnivores (whose values they question).

While skeuomorphism has certainly aided many technological transitions, there are always two sides to the story.

Skeuomorphism in UI design

The shift from analog to digital is one of the biggest technological transitions our culture has ever encountered. Compared to previous technologies, computers, phones and tablets are incredibly complex machines. We’ve condensed countless machines and their functions to small, backlit screens filled with pixels. 

Designing intuitive interfaces for such an expansive and abstract technology is a tall order. How would you make this realm of complex and powerful tech inviting to the average consumer? As you may have guessed, many UI designers have relied on familiarity, or skeuomorphs.

iOS6
Creative Dash

In Apple’s iOS, the phone icon is shaped like a classic telephone receiver (despite cell phones looking nothing like that), and the email icon looks like a paper envelope (an object email doesn’t use). Similar to tofu dogs, we know that objects we are engaging with are not of the form which is displayed. But those familiar shapes help iOS users find a function that is similar to that of the analog counterparts. Additionally, the icons in iOS are slightly shiny and beveled to look like real buttons, which helps users know they can press those shapes on a flat screen the same way they might press an actual button.

Creative Dash takes the button skeuomorph to the extreme in their hyper-realistic cinnamon bun. This example is so over the top that it is almost sarcastic, perhaps poking fun at how many UI designers try to make icons look like high-quality leather or expensive clocks.

DianDrago (via 99designs)
D. Jiang (via 99designs)

The Top Secret Case logo displays skeuomorphic metal textures and drop shadows. This designer has taken a simple vector design and given it an attitude which might feel familiar or appealing to people who want to feel tough or strong.

Lastly, the D. Jiang app design creates the textural appearance of a wooden game board. All of the buttons have fake wood grain texture and visual depth to evoke a classic or vintage feeling.

sk9

Flat design

Flat design takes influence from Swiss style design, which began in Russia, the Netherlands and Germany in the 1920s, then gained popularity through its development in Switzerland. Swiss style has an emphasis on readability, cleanliness, and minimalism. Designs from this movement are utilitarian, make efficient use of space, and are flat.

Swiss style design resonated through many schools, most famously the Bauhaus school. One notable designer from this movement is Josef Muller-Brockman, who revolutionized grid systems. His work utilized space in the most efficient way possible—a highly relevant concept with regards to UI design.

Flat in UI design

In both Windows 8 (2012) and iOS 7 (2013), we see a bold transition to flat design. In Windows 8, 3D buttons are replaced with simple rectangles and squares in a fluid layout, not unlike those of Josef Muller-Brockmann. Each 2D block has a single value, saturation and hue, without gradients. Similarly, iOS 7 also flattened out. The once shiny, beveled buttons lost their depth, icons no longer have drop shadows, and shapes use gradients very minimally. Both of these designs fit well within the definition of flat design.

Windows 8
iOS7

 

Outside the Window app
Analytics app

Similar to Windows, Outside the Window also makes use of flat and colored rectangles. However, the app takes concepts from Swiss design and minimalism one step further by presenting rectangles without any separation. In fact, the only elements that take this design beyond strict geometry are the flat icons. This flat UI design embraces the digital interface and makes it look, well, digital!

This simple Analytics app embodies the essence of flat design with no drop shadows, real-world materials or visual effects. The colors are all solid and flat, and the charts are nothing more than simple geometric shapes. This app is completely in touch with its digital medium. Let’s not forget that it feels intuitive too, which begs the question: is skeuomorphism necessary in our daily digital practices?

Material

google_materialdesign14

In 2014, Google launched Material, a project that aims to “develop a single underlying system that allows for a unified experience across platforms and device sizes.” Inspired by paper and ink, Google invented an imaginary design “material” and created guidelines to use it. Because of its paper roots, you could call it skeuomorphic. However, it also fits firmly into the world of flat design due to intelligent layout, limited shadows and animation.

material_design-svg

As a design language, Material Design has a set of strict visual guidelines. For example:

  • No two pieces of Material can overlap.
  • All Material elements are opaque.
  • No Material elements can fold or bend.

The rules don’t end there. They also include guidelines for how a user can interact with an application. Google is trying to provide a toolkit for app developers to create the most utilitarian and intuitive apps possible. Sounds kind of like Swiss style thinking, no?

Despite the paper influence and subtle shadows, Google Material is very much created in the spirit of flat design. Maybe it’s both skeuomorphic and flat? Perhaps. Regardless, it’ll certainly be interesting to see where app developers take this toolkit. If you have an Android phone, use Google’s apps, or are just a fan of UI design, we recommend keeping up-to-date on this design wave.

Do you think Material Design is skeuomorphic or flat? Comment below!

The author

workerbee
workerbee

workerbee is a self taught designer from the east coast with a relentless curiosity in all realms of life. 99designs profile: workerbee.

Related articles

33 famous graphic design companies from around the globe

33 famous graphic design companies from around the globe

In the competitive industry of graphic design, it can be difficult to establish a name brand. Nonetheless, there are a couple dozen design firms around the world that have managed to cut through the clutter and gain international prestige. Their roster of clients, impressive portfolio of work, prominence in local markets and international reach have made…

The amazing stylistic history of comic books

The amazing stylistic history of comic books

In a time when audiences were racing in droves to catch the latest talkie and hand-drawn animation was just finding its legs, a new medium brought kids (and adults, let’s be honest) back to reading. Comic books began as a dime-store novelty, and since then, they have gone through countless transformations, artistic explorations, public excises,…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%