As you’re researching web design agencies, reviewing website designs you like, and reviewing modern web design trends, you may have noticed an unfamiliar phrase coming up a lot: flat design.

What is flat design, exactly? Well, on this page, we’ll do our best to explain not only what flat design is, but how it might apply to the design of your website.

Flat Design vs Skeuomorphic Design

Generally speaking, in the world of design, there are two types of design: flat and skeuomorphic.

Skeuomorphic design is the type of design that makes things look more real, or resemble what they are in real life. For example, a 3D rendering of wood paneling and shelves on an iPhone desktop wallpaper would be skeuomorphism in action. So would any type of design where the icons look like real life objects. If you have a light bulb icon, it probably has rounded edges, lighting, and some level of transparency and a “glass” effect.

Flat design, on the other hand, is exactly what it sounds like. Flat design can be seen in action on the Windows 8 UI, or on the latest versions of Google’s Android interface. The icons are single-dimensional, typically one color, and do not have any 3D effects. A light bulb icon, in flat design, would probably be all white or black, like a silhouette.

Examples of Flat Design

Here are a few examples of flat design in action:

these icons

these icons


the Windows 8 "Metro" user interface

the Windows 8 “Metro” user interface


this sign... yep, flat design is common in real life!

this sign… yep, flat design is common in real life!

Flat Design on Websites

Flat design as a component of web design calls for simplicity, minimalistic elements, and an easy-to-navigate website. Flat design usually combines bold colors with simple icons and text to make websites simple, beautiful, and easy for users to understand and use.

It’s important to understand that flat design doesn’t require the entire website to be flat. Typically, flat design in action on the web only applies to menus, navigational items, and items like buttons and forms. Photos are typically used to offset the flat elements.

Here are three examples of major websites using flat design:

fitbit-flat

Fitbit


SumAll

SumAll


MailChimp

MailChimp

Hopefully this page has given you a greater understanding of flat design, and how it is used on the web and when designing websites.