Realism vs. Flat Design: The Design Debate

| Posted in Design

We all have been exposed to realism and flat design at one point in time, we may just not have realized it. With popular operating systems, such as Windows 8 and iOS 7 moving towards a flat design approach, it raises the question, “Why the transition?” Realism, often referred to as skeuomorphism, has thousands of definitions. One short, yet effective definition I found while digging around the Internet came from a fellow UI designer’s blog.

Realism: a purely visual style that tries to imitate real-world materials and textures.

Sacha Greif

In other words, realism recreates real world objects trough specific design techniques in order to simplify a user’s experience. Flat design, on the other hand, removes these real-world styles and strips interfaces and icons down to basic shapes and colors. Most of my experience has been in flat design (see my work for AdStation), although I have dabbled in realistic designs for various interfaces. After using both techniques, it’s safe to safe flat design is in and realism is out.

What Happened to Realism?

Back in the day, user interfaces relied on realism and skeuomorphism to give interfaces a richer experience. Moving a file from your desktop to a trash can made more sense than right-clicking and selecting “delete”. However, as users become more experienced and optimization becomes increasingly important, realism is losing its way in UI design. People no longer need a realistic camera button on their phone to take a picture and many find it distracting. Realism and skeuomorphism also take a toll on data. Take the camera icon I illustrated below. The realistic version is more than 10 times the size of the flat version.

175kb File Size vs. 17kb File Size

Why Flat Design is Better

As a designer, I have appreciation for both techniques. However, if I had to choose a winner, I would pick flat design. I will admit — using a flat design technique saves me hours of work, but this is not the reason I believe flat design is better. Stripping my designs and interfaces down to basic shapes and colors lets content drive the experience for users. Users of flat design are less distracted from embossed icons and leather-looking backgrounds. They are more interested in the pictures their friends post or the latest blog article added to their favorite website.

5 Illustrator Effects vs. 0 Illustrator Effects

Realism, Flat Design… What’s Next?

Like other industries, many people think design in technology will cycle back to realism and skeuomorphism in the near future. I, however, do not think this is the case. Design in technology will change, but simply improve upon what we already have created. Medium posted an article on transitional interfaces about a year ago and it has already started to catch on in many applications and websites. Transitional interfaces simply give users’ brains a clue of what is going on between interactions. It leverages the overlooked dimension of time in design.

1 Hour Design Time vs. 20 Minutes Design Time

There will be many fads in UI design that come and go — some will catch on and others will disappear. I’m excited to see what websites and applications will look like in 2040.

One More Note

Let me know what you think about the design debate. Are you team realism or do you prefer flat design? Check out Intacto’s Flat Design vs. Realism site. It does an awesome job of describing the pros, cons, and differences between the two.

If you are interested in any of the icons I illustrated for this entry, let me know and I will send you the Illustrator file.

Tags

Leave a Reply

Your email address will not be published. All fields are required.