By Jeff Kline


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 






Compass website - flat design 


Pace Law

Pace Law 


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


Free Website Assessment


comments powered by Disqus
Back to top