Skip to the content

A five minute guide to Flat Design

A five minute guide to Flat Design

This is a post from Lead User Experience Architect Jessie Shen

Flat design has been a hot topic in the design industry since last year. With Apple’s iOS7 and Google both leading the trend, it’s time to find out more about it.

So what is flat design? Flat design looks to minimalism in terms of styling and focuses primarily on the content. It removes a lot of the more complicated design “noises”, i.e. textures, patterns, shadows, gradients and other shiny effects, to focus on simplicity and functionality. Instead flat website design relies on parallax scrolling and visual clarity to communicate with users.

Here are some key features and examples that will help you to recognise flat design.

It has a minimalistic nature

Being minimalistic doesn’t mean losing content or functionality. If anything, the simple straightforward design should mean users should be able to more quickly find the content they are looking for. Like the weather app below, a quick glance will tell users everything they need to know about the weather today – even the background colour is associated with the weather condition.

It uses bright colours

Focusing solely on content and functionalities does not have to mean boring or monotonous. In fact flat design encourages using bright bold colours in suitable places to enhance the user experience. Colour contrast can be used to differentiate between call-to-action buttons and background, so that users will be able to achieve what they want to without being distracted. 

It’s easy to scale

Last but not least, flat design is easily scalable. This is in line with another trending topic in the design industry – responsive design. More and more people are using their mobile phones and tablets to surf the internet nowadays. It is important for websites to maintain a consistent look/feel and user experience across all platforms. While realistic images and other design effects can be difficult to scale, flat design principles can easily adapt to smaller screens. 

Some more readings and examples