For a large part of human history, it was generally accepted that the Earth was flat.
Not much changed about this notion until the third century BC, when Pythagoras and Aristotle postulated that the Earth is spherical, and in the 1500s, explorers like Magellan sailed the seas to test it. Today, the idea that the Earth is flat is archaic because we all know it’s round (well, most of us).
In design, the opposite is happening, and has been happening for quite some time. Open just about any app or website to see what I mean. Full-bodied, three-dimensional shapes are now considered archaic while flat, two-dimensional elements are evidence of modern design. This style of graphical user interfaces (GUIs) is called flat design, from which flat 2.0 emerged.
Before I talk about that, let’s take a stroll down memory lane.
Three-Dimensional Interface
We probably all remember this as our first experience with a computer. When early personal computers came to market, the interface was heavy on visual cues that created depth. These illusions were meant to teach users, who were completely new to this technology, what was interactive and show them the hierarchy of elements.
Characteristics
- Elements that seem “raised” are signifiers for pressing (or clicking)
- Elements that seem “hollow” are signifiers for entering information
Example
This window from Windows 95 applies highlights and shadows to create a dimensional button while inset shadows cause the input field to look sunken and empty, as if to be filled.
Problems
Because the effects were too harsh and found to be more distracting than helpful, they fell out of popularity as we progressed into the 21st century. And let’s be honest, they were an eyesore.
Skeuomorphism
What came after was still very heavy on visual effects, but this time, they were photorealistic as well. The intent behind skeuomorphic design was to transition users with the use of metaphor.
Characteristics
- Objects or elements in the design mimic what came before them
- Usually, the object uses ornamental design cues that were a necessary part of its predecessor
Example
Apple’s contacts app for the iPad (circa 2012), was made to look like a leather-bound address book, complete with tabs of first initials and a red ribbon bookmark, which was even grosgrain — talk about attention to detail! This metaphor was meant to help users transfer their knowledge about the object they previously used (a physical address book) to a digital one (an address book app).
Problems
Skeuomorphism was found to add little value to users’ understanding of interfaces and too heavy on visual graphics, which also slowed the app/site’s performance. This style fell out of popularity almost instantly once Apple released iOS 7.
Realism
Before we enter flat design, I want to make sure the difference between skeuomorphism and realism is clear, because the two are often used interchangeably.
Skeuomorphism
- Mimics real-world objects
- Goal: to ease understanding of the interface
Realism
- Mimics real-world objects
- Goal: purely for aesthetic appeal
Example
The Boiling Crab’s Website uses realism because its three-dimensional, wood-plank background does not add to the user’s understanding of the interface. It’s there to simply look nice.
Flat Design
Microsoft’s Metro Language and Apple’s iOS 7 undoubtedly contributed to the wild popularity of flat design. Influenced by the International Typographic Style (Swiss Style), flat design’s uncluttered, streamlined style is followed by virtually all digital interfaces today.
Characteristics
- Void of three-dimensional cues, such as shadows, gradients, gloss, embossing, and bevels
- Simple elements, shapes, and imagery
- Bold, bright colors
- Emphasis on typography, particularly sans serif
Examples
The influence of Windows’ Metro design language (top) is clear in a number of apps, such as The Homework App (bottom). Notice the UI similarities: tiled display, bright colors, flat iconography.
Everything on this fully flat website exists on a two-dimensional plane, from the buttons to the logo to the illustrated characters. No shadows or gradients here.
Problems
Flat design received a lot of backlash for one reason: It prioritizes trends and visual attractiveness over usability. The issue in particular is click uncertainty — users don’t know what they can interact with anymore. Links and non-links look the same, and buttons no longer look like buttons.
Toning down on excess graphics can help users focus on their tasks or the content, reduces their visual load, and might even speed up the app/site’s performance. However, scaling back too much can backfire on the experience.
So, as a response to flat design, flat 2.0 was born.
Flat 2.0
To put it briefly, flat 2.0 is a style that “seems flat, but isn’t quite completely flat.” Flat design is still evolving, and its latest iteration can boast subtle yet significant usability improvements.
Characteristics
- Mostly flat and minimal, but employs hints of shadows, highlights, and layering along the z-axis (or third dimension) to add subtle depth. It’s still void of gloss and gradients, though.
- Elements move and act according to the laws of physics to help users understand their function
- Large and oversized imagery, text, and buttons to make a lasting impression on the user; oversized buttons on mobile screens also increase the tap area and decrease user error
- Unobtrusive animations that have purpose, like providing feedback, and never get in the way of the user or the design
Examples
Google’s Material Design is a prominent example of flat 2.0. In the Google Docs app, the plus button (“add new”) has a subtle shadow that makes it appear to hover above the page. When you tap to expand the sidebar menu, the background dims to clearly convey that the planes are layered and the menu plane is in the foreground. The menu also has a slight shadow to further reinforce this idea of layers.
Here’s a comparison of flat (left) and flat 2.0 (right). Both illustrations are flat, but in flat 2.0, subtle shadows added to the body and highlights added to the eye give the artwork a bit more depth and dimension.
Conclusion
We’ve come a long way in UI design. Trends have risen in popularity and fallen due to their usability flaws, and become replaced by other trends. Flat 2.0 builds upon the principles that flat design established, such as reducing visual noise to allow content to speak loud and clear, yet it does not sacrifice the signifiers users rely on to successfully navigate. Unlike fully flat design, flat 2.0 doesn’t choose form over function — it strikes an elegant balance between form and function.
Remember this when designing your product’s interface.
So, what’s next? Will there be a flat 3.0? What do you think that will look like? Or will flat design just be a passing trend?
Thanks for reading!
Originally published on haiho.me
