« HE:labs

Flat Design

Postado por Cacau Azevedo em 10/11/2014

Blowing the noise away and bringing to the user an amazing experience.

I’ve been designing websites for longer than some co-workers have experienced the ability of talk. Given that information, if you are old enough, you can figure out I’ve survived the 'Under Construction' Animated GIFs Age, the Bevel and Emboss Effect Age, the Flash Animated Age, and the craziest trends. Regardless of who created and spread the concept, our days are filled with websites and apps designed upon a Flat Concept. If you have established in you mind - and you should! - that design is much more about function than art or looks or fashion, it makes a lot of sense being right in the middle of a Flat Design Age.

Get rid of distractions!

Going Flat is, most of all, an exercise of getting rid of possible distractions for the user experience you aim to create. Reduce the noise in you message. Users are bombed with information everywhere, all the time. Given that, it helps a lot getting one’s attention if your message is clean, simple and minimalistic.

A user shouldn’t take more than a few seconds to understand what you’re saying. Open spaces, airiness and flat color areas helps bringing comfort to the experience and creating the perfect focus zones. Short text tags, flat illustrations and a well designed iconography helps users understand straight away what a focus zone is about. PS: please, try to create you own icons. It’s worthy, I promise! A bit of Adobe Illustrator and this article can help you.

Keep in mind

It’s not about how good your site / app looks. It’s about how well it works for your audience.

And you still have technical pluses:

Lightweight illustrations

Flat design illustrations tend to be lightweight if compared to 3D style stuff

Icons are good for you, more than bacon!

Also lightweight, they are scalable and work well for retina displays

A creative exercise

I brought to my routine as a designer a very interesting creative exercise, you should try at some point. As soon as I get all the information about a product, I go on Pinterest and spend 30-60 minutes looking for inspirational photographs related to the theme. Photographs collected, I pick a couple of favourite ones, go on Photoshop and spend another hour trying to get rid of all superficial layers on information. Textures? Off. Shadows? Off. Until all that lays in front of me is a flat color palette I can apply to my design. The best part is, the sub-products of this exercise can still be helpful:

  • you can use the photographs as a support element to some focus zones and mix it with short text and icons
  • some distorted steps of the picture can turn into awesome textures (try and mix it with geometric patterns... it will blow your mind, kid!)

Online Tools

If you are short of time or inspiration, there’s a few tools you can have a go:

- Pinterest

It's some sort of mantra, or pray, for me today. I open it religiously in the morning, and spend at least 15 minutes absorbing colours, spaces and shapes.

- Fontastic

It helps you creating and managing your own icon fonts easily.

- Flat UI Colors

Suggests trendy flat colors in different formats, such as Hex and RGBA.

- Flat UI Color Picker

Gives you a good palette of flat colors, grouped by color.


Sabia que nosso blog agora está no Medium? Confira Aqui!