The Flat Design Trend

light_bulbs3

Minimal – honest – digital – flat: whatever you choose to call it, this type of design is becoming a prominent trend in 2013. Popular because of its simple and minimalistic approach that translates well on small/mobile screens, flat design reflects a clean aesthetic without unnecessary clutter. This fresh take on web design could be the perfect solution for reaching your design goals.

What Is Flat Design?

Flat design is a style that cuts out extra design effects to reach a simple, 2-dimensional design scheme. This means that the faux-realistic techniques of skeumorphic design like drop shadows, beveled or feathered edges, embossing and gradients aren’t used. Viewed as a backlash against skeumorphic design made popular by Apple’s iOS, flat design goes against the idea of making elements look like real-life objects that come off the page – instead going for a crisp, techy look that is just that: flat.

FlatDesign-01

You can see the difference between skeumorphic and flat design in comparing the iPhone and Windows interfaces.

Flat design returns to a functional focus on design: how a website works, as opposed to what it will look like. Ornamental elements are seen as unnecessary clutter in flat design, as they serve no functional purpose. Besides a clean and simple visual language, web designers gravitate toward flat design’s scalability, especially as society continues to transition to smaller electronic devices. While effect-heavy design elements can become distorted on mobile devices, flat design easily translates to virtually any screen or device without needing specific mobile versions.

In any web design, communication is key. Iconography is a great way to quickly and effectively communicate a message visually, and often makes use of flat design. These icon design tips illustrate how icons can be used to efficiently communicate ideas with little written text.

FlatDesign-02

This cloud computing guide uses effective icons that grab attention and guide the eye with simple imagery.

How To Achieve Flat Design

Color: flat design schemes work best with vivid color. With no extra effects added to design elements, bright colors help important aspects pop.

Typography: the minimalistic method of flat design should be carried out in the typography that backs up your message. Use a sans serif with various weights to keep it simple yet interesting.

Copy: the same should be applied to text: use concise, few words that clearly send a message.

UI Elements: buttons and calls-to-action should be crisp and not over-designed, with an obvious function. This can be as easy as making them a different color, outlining them or adding copy.

Hierarchy: flat design still holds to the design principle of hierarchy. Encourage your viewers to take the desired action by placing important elements along the natural eye-scanning path on the page: across and down.

Successful Flat Design

LayerVault

FlatDesign-02

SpellTower

FlatDesign-03

Sun

FlatDesign-04

18 Dev

FlatDesign-05

If you choose to employ the technique of flat design in your work, remember to focus on detail, as the simplicity of this style reveals every imperfection. Take advantage of this trend to de-clutter your design and immediately draw viewers in.

Luke Clum is a graphic designer and web developer from Seattle. He loves videography and creating UI designs. Follow him on Twitter @lukeclum

Be first to comment