May 23, 2023

The History of Flat Design

Abstract interpretation of a desktop browser

There was a time when skeuomorphism dominated our screens. It helped us acclimate to new devices and technologies, with apparent visual cues that informed us of an app’s specific uses and functions. But the more accustomed we grew to our computers and smartphones, the less we needed the design style’s affordances.

As skeuomorphism faded away, flat design took center stage. Its signature simple aesthetic and two-dimensional elements lend themselves to some of the most versatile design applications on digital products we’ve seen in recent years. Almost every operating system, browser, website, and app on the internet today uses elements of flat design.

In 2011, we built an app for Jetsetter, a content hub that offers its community insider access to exclusive hotel and travel experiences. It was one of our first client projects to use the flat style, and it’s rumored to have inspired Apple’s iOS7 interface. We briefly chatted about flat design in our Guide to Graphic Design Styles, but since it’s still in its renaissance, it’s worthy of a deeper dive.

Read on to discover flat design’s history, key design principles, and modern-day applications.

What is Flat Design?

“Flat design” is a deserving moniker. Considered a champion for the two-dimensional, it forgoes exaggerated gradients and drop shadows in favor of clean shapes and typography. The flat style places uncomplicated designs within a greater negative space, and its palettes tend to be more deliberate, using colors and contrast to simulate depth. Since the focus is on content, the style’s imagery is represented through illustrations, iconography, and pictograms. The flat style is often linked to minimalism, but it borrows heavily from the uncluttered approach of Swiss design, which emphasizes simplicity, practicality, and usability. Flat design is naturally discreet and unassuming, scaling back visual elements to keep the user experience as intuitive and seamless as possible.

The origins of Flat Design

Flat design first emerged in the early 2010s. Adapting to the times, it marked a cultural shift; as access to technology widened, people’s ability to operate it followed suit. We now live in a world of digital natives, with an entire generation instinctively interacting with digital products without the need for explicit instructions. 

While also a reaction to the skeuomorphic visuals of the mid-2000s, the flat style’s leaner techniques were originally created for responsive design. The minimal visual elements help content adapt to different screen sizes more efficiently, helping reduce load times without losing visual quality.

Of course, Big Human’s first foray into flat design was with Jetsetter in 2011, but it took industry heavyweights like Microsoft and Apple to push the style into the mainstream. Microsoft was an early adopter, releasing Windows 8 with a flat interface in 2012. One year later, Apple joined the conversation with iOS7 — and flat design has reigned supreme since.

Flat Design Principles

The flat style may be unobtrusive, but that doesn’t mean it’s unimaginative. Its directness requires designers to be more inventive and think of creative solutions. Flat design principles prioritize usability while using color and iconography to guide users through aesthetically pleasing interfaces.

2D shapes, elements, and iconography

The flat style eliminates the extra flourishes skeuomorphism is known for. Instead, it opts for 2D art to depict objects and their functions, supplementing the information and content on a page. 

Complementary color palettes

Whether they’re bold and bright or soft and subdued, flat color palettes play with variations in hues to add depth to designs and send users visual cues.

Clean typography

Just like Swiss design, flat design typically uses simple sans-serif typefaces. Since they’re easy to read and quick to load, sans-serif typefaces help create streamlined user experiences.

Examples of Flat Design

The search for flat design examples won’t take you long. Its enduring popularity means it continues to be used on almost every website, app, and operating system today. Before you enter a cursory Google search, take a look at the Big Human website; we pair the flat and Swiss styles in our own brand. We’ve also incorporated flat design in our work with Whistle, Quinn, Gemini, and more. For non-Big Human examples, just scroll through some of your favorite apps, like Instagram, Tiktok, and Spotify.

The flat style is still the default for interface design, but keep your eyes peeled; more and more companies, especially ones in the cryptocurrency industry, are looking for new ways to innovate and change their styles.

Curious about other design styles? Take a look at the Big Human Guide to Graphic Design Styles.

What are the benefits of flat design?

What is modern flat design?

Why is flat design so popular?

What is a flat image in graphic design?

Are there cons to a flat UI design?

up next
Illustration of a duck on a light background and an icon of a duck on a blue background
May 16, 2023

Product Design

Iconography vs Illustrations — And How to Use Them

Illustrations of the Notes, Settings, Clock, and Calendar apps on early iPhones
May 10, 2023

Product Design

Skeuomorphism in UX Design: Guide and History