Flat Design: From slug to sleek in 5 steps

Hello dotters,

Today I want to talk about Flat Design, and Flat UX as they are becoming more and more popular across the web. Designing modern Flat websites is a daunting task  but rewarding when done right. Scared about going flat? no worries, I have 5 simple steps that will help you ease into it.

  1. It’s all about colors: The beauty and uniqueness of flat design websites comes from the complexity of the color combinations. Your imagination is the limit here. To be truly successful be daring. Neon colors, pastel colors, monochromatic schemes, whatever you heart dictates follow. When in doubt look at Windows 8, they’ve mastered the art of color combination when they went flat.

  1. No fancy effects: Your design has to be flat. No sense of three-dimensionality whatsoever. Which means no bevel, no gradients, no fancy tricks. Actually, the key here is to make your effects so smooth butter would be jealous. So you can keep the tricks, just don’t be Mayweather-flashy with it.

I like to fly in comfort. #rocklive

A post shared by Floyd Mayweather (@floydmayweather) on

  1. Square is the new round: Yes you read right. Square is the new round when it comes to flat. That means your I-know-how-to-use-CSS-to-make-rounded-corner buttons tricks have to go. Simple, minimalistic design solutions are in order. But hey, when everyone goes left, you could go right and keep those rounded corners. Go ahead, experiment. Amaze us.

Hundreds

  1. Typography: Flat design works best for products and brands because it takes away all distraction and focuses on the content. Most Flat design use creative typography, to display the message. Everything revolves around the content/product. From navigational items to call to action, you won’t be able to hide behind arial here. Go big or go home.

Web Design: Flat Layouts

  1. Mobile interface/Scalability: Mobile, application interface and fluid designs constitute Flat’s real forte. Again the simplistic approach of Flat allows room to focus on interactivity and information architecture. Simply put, no need to pinch and zoom to find links. Bold colors and a nice interface is all that suffice to create a great experience.

Tasky

Now that you know what to look for when planning a flat design project, I took the liberty to answer a couple of questions you might ask yourself. (Nice huh?)

Why is it relevant?

Flat design is not a revolution, but a trend spreading like wildfire. I think it’s actually moving the web design community forward. It is sleek, non intrusive and to the point. With Flat design, users can focus on content without any distraction. It works well with product/services sites as well as any important event your in life.

Web Design: Flat Layouts

Do you need it?

Probably the most important question of them all. Well it depends on what you’re trying to convey with your brand. Anybody familiar and keen with minimalist design would love this. It’s simplicity when done right, adds several layers of interaction and engagement.

If your site has been up for a few years and you were thinking of a redesign, then this might be your chance to try something new and experiment with Flat. If you’re a startup short on funds (i can relate) then this is probably for you. It’s simple, cheaper, fast and easy to develop.

Should you try it?

Many resources are available for Flat UI online. I just started playing with it and I invite you to do the same. I will do a write up when I finish my first site with it. In the meantime, share your thoughts and/or post your works in the comments below.

Cheers.

Advertisements

Share your opinion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s