More share buttons
Share on Pinterest
There are no images.

4 Flat Design Takeaways (and Why You Should Use Them)

By November 7, 2013Miscellany

Mack Web is now Genuinely. Learn more.

– –

The Apple IOS7

This fall when Apple released their IOS7, things were noticeably, well, flatter. I do mean this in a good way. If you’re keeping up with stylistic developments, you would recognize that the IOS7 is an example of flat design, a movement quickly becoming one of the hottest trends in web design this year. 

Flat design advocates for user interface considerations before design itself. In other words, creating a clean user interface that’s easy to use and understand. As a result, flat design tends to favor minimalism.

Which leaves you with the question: to jump on the flat design bandwagon or not? The choice seems simple. You could make the leap with enthusiasm or refuse to take any part in the trend since, well, it’s a trend, and that means it’s likely going to pass.

I’d like to offer up an alternative: utilize the principles of flat design that are not going to go out of style and which will improve the user experience on your website.

Because we’re nice, we’ve taken the liberty of pulling out the principles we recommend adopting. Here are 4 takeaways from flat design that are worth putting in place:


1. Simplify

The folks over at werkpress used flat design to create a simple user interface with clear calls to action.

Werkpress uses flat design to create a simple user interface with clear calls to action.

 

We are saturated with the amount of information we encounter on a daily basis over the web: emails, whitepapers, articles, podcasts, blogs, videos, tweets, photos (and the list goes on and on, doesn’t it?).

With the plethora of information getting thrown our way, a clean, beautiful, and easy-to-navigate website is like a breath of fresh air. Flat design ensures your website is free of extraneous (and distracting details), such as gradients, drop shadows, 3-D effects, and complex background images. No one wants their website to overwhelm or stress out users, so keep it simple.

LayerVault does a great job of keeping things simple on their website.

LayerVault does a great job of keeping things simple on their website.

 

Another plus? Simple designs are easier to view on smaller screen sizes. Using the “less is more” concept of flat design could be a step to make your site less cluttered, and easier for users to view on small screens (such as those found on the smartphones that increasingly run our lives) until you have the budget for a total re-design that uses a responsive layout.

‘Cause you don’t want your website looking like this:

The antithesis of flat design

Imagine trying to search for information, let alone navigate through this site if you are on a device with a small screen. So, I’ll say it again: keep it simple.


2. Use Color to Liven up Your Site

The flat design color palette employs bright and bold color.

The flat design color palette employs bright and bold color

 

Users should associate your website (and brand) with positive emotions. Think about it, what user is going to come back to a site that makes them stressed out or grumpy? (We will make an exception for Oscar the Grouch and  Grumpy Smurf. They’d probably like your website better if you employed a negative color palette). This is where the flat design color palette comes in.

Websites that incorporate colors from the flat design palette (pictured above) tend to give off an friendly, energetic, and happy vibe, like this one:

Wisitia and flat design color palette

If you’re selling a product or service, making your website inviting and cheerful can only benefit your brand.

The other benefit? Bright, contrasting colors can help your buttons and calls to action stand out from the rest of your content, making your most important website goals (such as the purchase of a product, or an e-news signup) extra visible on your website.

Take Prevent’s home page for example. The bright orange get started button (which links to a sign up page) pops from the rest of the design, making it one of the first things users will take notice of.

Example of Flat Color palette applied to buttons

IDesignModo has an in-depth article about selecting a flat design color palette for your website that’s worth reading. If you’re thinking of making color changes, we’d recommend reading this blog post first.


3. Use Typography

Another component of flat design that we think is a keeper, is a focus on typography. In his blog post on Flat Design: Trend or Revolution, Caleb Mellas brings up what we feel is one of the important reasons why typography should be a focus on your website:

[quote]Typography is one of those things that when done well really exemplifies the message of the site. Instead of drawing attention to the fonts, you are drawn to the content and
purpose of the article or app. [/quote]

-Caleb Mellas, from the blog post “Flat Design: Trend or Revolution”

You want users to read your web content, right? (There is only one right answer here, by the way). Making it easier for users to notice your web content, seems, well, like something you should really, really take from the flat design trend. If you’d like to investigate this further, we’d recommend Designmodo’s post about the best fonts to use for flat design.


4. Simplify Your Graphics

We touched on this briefly in the first takeaway, noting that design elements such as gradients, drop shadows, 3-D effects, and complex background images were being replaced with flat design elements that rely on bold, contrasting colors. By doing this, you’re also doing more than just following a trend, you’re improving your user experience by allowing for a faster load time. You don’t want users bailing from your site because complex graphics are slowing the site down. Keep your graphics simple, and your gonna  shear off unneeded wait time.

Now, if you don’t think load time is important, we’d recommend looking at the nifty infographic Kissmetrics put together on load time.

If you fear that simplifying graphics will make your site boring, think again. It’s still very possible to create simple graphics that are engaging and that bring personality to your site:

Minimalist graphics and flat design

Minimalist graphics and flat design - second example

 


Don’t Let Us Stop You

These are, of course, merely recommendations. You can use what we’ve highlighted here, embrace the principles of flat design in its entirety, or disregard the trend altogether. It’s up to you to pick and choose what works for you and your audience. As long as you’re making design decisions around user experience and the goals you’d like folks to accomplish on your site you’ll be fine.


Want to know more?

For the ultimate list of flat design principles, read  Smashing Magazine’s blog post: Flat and thin are in. The post has an excellent best practices section section that we’d highly recommend looking at if you’re wondering how to use flat design principles on your site.

During your online travels, if you happen to come across fantastic websites that employ flat design, shoot us a link! We’d love to see which sites caught your eye.

Author Nat Touchberry

More posts by Nat Touchberry

Leave a Reply