Skeuomorphism vs. flat design vs material design

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.

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.

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 Chevrolet began exploring new materials and technologies. Because there was an attachment to wood, Chevrolet 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 Chevrolet 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.

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

—

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.

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.

Nice post!
Actually, flat design will appear more simplistic on the background of material, besides, all these animations are aimed more on user interaction with mobile devices, rather than with the site. In addition, no one prohibits the use of these two approaches in a single product, if approach the work on the design more consciously and philosophically. As for skeuomorphism, it tried to bring elements of the interface in a more familiar, user-friendly way: how this or that object would look in the real world, but many people have different views of the surrounding things, so creation of a single style of such approach was nearly impossible…Some information to add https://erminesoft.com/flat-design-vs-material/

I disagree with your assessment that the electric kettle design is to make consumers comfortable with it. The “stove-like docking station” is for safety and convenience. Older elec. kettles used to have cords running directly from the vessel to the wall. They were more dangerous. The shape of the kettle also improves safety. A shape with most of the weight of the liquid at the bottom is not likely to topple over (as opposed to a cylinder or smaller-bottomed design). The wide bottom of the kettle also improves heat retention in the liquid and uses less materials.

I miss skeuomorphism on iOS, the depth and feel off make the experience more realistic. All of the app icons had detail and was nice to look at. The flat icon design doesn’t do any of that magic, it may look more minimalistic, but it made everything look bland. Skeuomorphism provided detail to the main buttons/clicks on apps, and with flat, there is no distinction. Material UI is a little better than flat, but not that same magic. I am planning on installing Skeuomorphism app kits to Android now as iOS has no plans to bring it back. Crazy how as soon as Steve Jobs passes away they fire the developer who did skeuomorphism the same year.

Well said Shiva!….I think that it is unfortunate that they scrapped out a very unique and major element that made IOS so successful and set it apart from other platforms. And whatever reasons they come up with to scrap it does not seem to add up. In terms of user friendliness, I think the best way to test a UI design is to test it with children. Notice which one they will pick and easily be able to navigate through it. I am convinced it will be “skeuomorphic” over Metro or Material. Whatever the case, I think that “skeuomorphic” design will be back and in a perfected way. I don’t know if IOS will be behind it, but if not IOS, someone ells will fill the void. The old saying ” A picture is worth a thousand words.” still stands true as a vital part extending to UI design if we are thinking in terms of user friendliness and not just trends.

Jack Goodway

Oct 25 2016

Skeuomorphism is tacky. The only plus point is that it can occassionally contain some visual wit.

Absent a border around plain text, how do Users know whether the text is a link or a label ?

Users’ focus and time should be on Content – not wondering where the navigation is.

Since 3-D design has been scrapped, interneting is no longer an invitation to explore. It has become a chore.

Who wants to navigate through a uniform, snowy landscape, absent colour and landmarks, rather than a countryside with richness in colour and hue ? (unless one’s purpose is winter sports ….)

More importantly how helpful would it be for all signposts to have white backgrounds, no border so blending into the background ?
No distinction between national, regional or local signage ?

John

Oct 25 2016

That is not a Ford Caprice; that is a 1966 Chevrolet Caprice. The Chevrolet crossed flags emblem on the fender just in front of the front wheels says 396 Turbo-Jet. A 396 is a Chevy powerplant. Ford’s big block would have been a 428.