By Jeff Kline

Blog

What Is Flat Design?

Tuesday, April 29, 2014

Flat design is modern simplicity at its finest.

Web Designer Depot describes flat design as “characterized by an overall minimalistic look, bright but muted colors, bold — often retro — typography and simple user interface elements such as buttons or icons.”

Flat design is a logical response to the rise of mobile computing—smaller screens call for simpler designs. In fact, Apple recently updated the iPhone interface to a significantly flatter design. Before, the iPhone interface consisted of skeuomorphic design—drop shadows, gradients and artificial textures were used to give graphics a three-dimensional look. In the software upgrade, these embellishments were stripped out, resulting in a more minimalistic user interface. Check out Mashable's side-by-side comparison of iPhone iOS 6 vs. iOS 7.

Flat Design Characteristics:

  • Two dimensional appearance
  • Overall minimalistic look
  • Heavy whitespace
  • No embellishments – no drop shadows, no embossed effects, no gradients, etc.
  • Crisp, clean lines—no feathered edges
  • Simple shapes
  • A lot of icons
  • Bold use of color
  • Increased use of simple typefaces
  • Minimal use of elaborate typefaces

Sometimes, designers will combine flat design with skeuomorphic design—a trend that is called “almost flat design.” A popular "almost flat design" technique is to add subtle embellishments (like textures or gradients) to flat icons.

Flat design is a beautiful and simplistic way to breathe new life into your website. It’s also the key to creating a modern, up-to-date look. If you redesign your website this year, you should absolutely incorporate some level of flat design.

To truly understand the effect flat design can have on a website visitor, you have to see it for yourself. So take a look at these stunning examples of flat web design.

 

Red Deer & District SPCA

Red Deer and District SPCA 

 

Create Pilates

Create Pilates 

 

UNICEF Tap Project

UNICEF Tap Project 

 

Greater Oklahoma City Chamber of Commerce

Greater OKC 

 

Standbuy

Standbuy 

 

Compass

Compass website - flat design 

 

Pace Law

Pace Law 

 

For more examples of flat web design, check out these sites:

 

Free Website Assessment

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing