Elements of Flat Design: Pros, Cons, Examples, and Tips

The best web design is invisible. If users notice the design instead of just using your site fluidly, the design is more in the way than it needs to be. But unless you’re a designer, it can be hard to notice and track changes in digital design best practices over time.

The reality is, the evolution of web design has given way to something called flat design, a ubiquitous design trend undergirding the world’s most popular digital products. In this day and age, most of the sites and apps you see on graphical user interfaces—like web browsers—take this simple, high-contrast, two-dimensional approach to design.

Keep reading to learn more about why this 2D approach has taken off, comb through flat design examples, and explore tips for incorporating this design trend into your own digital properties.

What is flat design?

Let’s define flat UI design (or flat user interface design) by what it isn’t first. Digital design in the early aughts and even into the 2010s employed a 3D effect, as if the elements were lifting off the page. Heavy shadows, raised buttons, gradients, and decorative adornments were all meant to mimic real life in a style known as skeuomorphic design. Sites like the one you see below now look dated and are emblematic of the internet’s infancy.

Traditional flat design principles don’t involve creating a three-dimensional effect. Instead, two-dimensional elements lay completely flat against their backgrounds. The layout creates definition through the use of crisp edges, negative space, simple typography, and abstract forms that might never occur in real life. While skeuomorphic design relies on users’ understanding of the physical world, flat design imagines one in which they already view the digital world as its own unique space.

Flat design creates an aesthetic appeal that recalls the graphic design of print, posters, and magazines, but is updated for digital products, where sans serif fonts and buttons have become ubiquitous. It takes cues from Swiss-style graphic design, also known as international typographic style, which emphasizes clarity, objectivity, and the written word.

Benefits of flat design

Flat design focuses on letting the design’s message take center stage. Clear is the new clever: In a crowded marketing space, it’s best to just get to the point. Large typography and white space improve readability, both for users and the search engines that help sites become discoverable.

The less obvious benefit? Flat elements usually contain less digital information and, therefore, decrease websites’ loading times. Also, simple elements scale easily across different screen sizes and tend to be easier to interpret on mobile devices.

Limitations of flat design

Of course, flat design is not always the perfect solution. While some users find flat design to be more user-friendly than skeuomorphic design, others report usability issues with flat design. The flat design trend can be particularly challenging for very old, very young, and learning-impaired or vision-impaired users, who rely on colorful hyperlinks and three-dimensional elements to guide them through a site. For users who are more internet-savvy, a minimalist approach helps them get to the point faster visually.

Flat design 2.0

Flat design 2.0, or semi-flat design, aims to find a middle ground between skeuomorphic and flat design by introducing subtle shadows and gradients to create flat yet clickable elements. Compared to user interfaces that are completely flat, these semi-flat designs make for more functional websites for some users. By incorporating just a few skeuomorphic design elements, they provide some of the visual cues that these users rely on to navigate an interface.

Better Booch’s website design uses gradients, colored backgrounds, and motions to create depth—an example of Flat design 2.0.

5 websites with flat design

• Goodboybob Coffee Roasters
• NOOCI
• Umanos
• Cowbird Coffee Roasters
• Malapata Art Gallery

The best way to learn how to incorporate flat design elements into your ecommerce site is to look at some flat design examples that you want to emulate. In Shopify’s template library, you’ll find a multitude of flat interfaces that take visual cues from this classic Swiss-style design. Familiarize yourself with flat design principles by checking out these stellar examples of flat design.

Goodboybob Coffee Roasters

With an easy-to-read sans-serif type scheme, high-contrast boxes, and lots of white space, Goodboybob’s site is a great example of flat design that uses Shopify’s Origami template.

NOOCI

NOOCI’s clever application of Shopify’s Silk template is a good example of flat design 2.0: the product cards have a slight drop shadow, and the top-down studio shot of the product’s ingredients creates a shadow that makes it seem like they’re sitting atop the page.

Umanos

Hair care and body care brand Umanos uses the Colors template, mimicking Swiss design with its bold typography and primary colors.

Cowbird Coffee Roasters

This application of Shopify’s Foodie template is a good example of flat design 2.0, thanks to the shading that appears on Cowbird Coffee Roasters’ product cards when users hover.

Malapata Art Gallery

Malapata Art Gallery’s flat design uses the North template, with a pastel background that makes the artworks pop off the page with the application of a drop shadow.

5 flat design tips

1. Employ standard UI patterns
2. Employ a clear visual hierarchy
3. Stick to the grid
4. Pay attention to contrast
5. Utilize subtle animation

Although the research is mixed on whether or not flat design is actually more difficult for users to interpret than older design trends, it’s still a good idea to employ these basic design best practices to ensure maximum usability—regardless of trendiness.

1. Employ standard UI patterns

At the end of the day, your website is a functional tool. Users have come to expect basic user interface (UI) components to be more or less the same across the internet landscape: a “heart” means “like,” a navigation menu is at the top of any given website, and a button is a long rectangle or pill shape.

Other examples include placing search boxes in the top right or top left corner of a website, and using an “X” button to communicate the ability to close a window. Employing these and other design patterns helps users understand what they’re looking at, even in the absence of a drop shadow or other dimensionality, and fosters a good user experience (UX).

2. Employ a clear visual hierarchy

Whether you’re using flat design or not, it’s best practice to make the most important information bigger, bolder, and darker. This helps users scan the page quickly. Similarly, standard practices like underlining hyperlinks or making them a color that’s distinct from the regular text can increase user efficiency.

3. Stick to the grid

Grid-based layouts can help users scan the page for what they’re looking for. Designers often distribute important information horizontally (across multiple “columns”) so that users don’t have to scan all the way down the page, which can slow down reading and comprehension. This method of organization can be helpful when working with flat designs because the ability to group similar bits of information is even more important in the absence of dimension.

4. Pay attention to contrast

Users with vision impairments, those on low-quality devices, and anyone using devices for long periods of time can benefit from adherence to best practices for color contrast. High contrast between colors is easier for users to read. Check the accessibility of your website’s color contrast with a tool like WebAIM.

For example, interiors brand Schoolhouse’s flat design website incorporates high-contrast bands of black against a white background.

5. Utilize subtle animations

Modern flat designs create dimensionality by using motion or light animation. Even something as simple as a product photo changing when the user hovers over it can indicate that an element is clickable. This makes your site more interactive and engaging for users.

For example, on chocolate brand Compartes’s website, hovering over a picture of a partially wrapped bar opens it completely, revealing broken shards of chocolate—like the third bar in the image below.