Flat Design: What You Can Learn From This Trend

What Is Flat Design?

Flat design is simply a style of user-interface that uses no three-dimensional representation. Shadow, embossing, gradients and bevels – all common techniques for creating depth on a digital screen – are rejected in favor of a totally ‘flat’ surface. Still not sure how to define flat design? You’ll find some great examples here.

FlatDesign-01

Techniques and Approaches

Without the usual depth-creating embellishments, flat designs are often crisp and clean, using bold shapes and bright colors. Icons and logos are often important, providing the style, tone and color-scheme for the rest of the site.

FlatDesign-02

Flat designs are classically minimalist so text should be clear and cut back to the bare essentials. Use clean, modern fonts and provide plenty of space between chunks of text. And try to use key words to help your users navigate their way through your site. Remember that ‘buttons’ or ‘links’ on websites are often made identifiable with shadow while flat design requires that their function be indicated in other ways.

FlatDesign-03

Iconography

Flat design often relies upon creative and stylistic iconography for the site’s branding and navigation. Take a look at this Cloud guide from Xero where the icons guide the user’s eye. The layout is simple and easy to follow. Icons are used for organizational and navigation purposes as well as keeping the text nicely spaced. For more info, check out this great post on using icons successfully.

FlatDesign-04

Flat Design and Photography

Flat design works wonderfully with photographic images as it allows the photographs to take center stage. With no other three-dimensional representations on a page, photography can really shine. However, in flat designs that use a lot of bright colors, it’s worth thinking about how the components work together. If you want to use color images a more muted scheme might be a better accompaniment. Alternatively, keep your photos black and white for a stylish contrast. And while this may seem like an obvious choice, if you’re having a difficult time finding the right imagery for your site, make sure to explore different stock photography resources.

FlatDesign-05

How Can Flat Design Work For You?

When designing a site, it’s crucial to consider why a certain aesthetic is right for a certain brand or business. Flat design is a key trend for 2013 but that doesn’t make it the right tool for every project. It is clean, crisp and (often) colorful, which makes it perfect for young, fresh-looking designs or a friendly, easy-to-use aesthetic. Do your research and see where you think flat design has been implemented most effectively and where other web styles may have worked better to see if it’s the best fit for your next project.

Author Bio
Luke Clum is a web developer and UI designer from Seattle. He loves exploring different web frameworks and is an avid hiker and climber. Follow him on Twitter @lukeclum

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply