Jun 12, 2013

‘Flat Design’ – Everything You Need To Know

Charles Patterson
Jun 12th, 2013 - 3 mins read

‘Flat’ design has been trending amongst graphic and web designers for some time now but how did it come about and why?

Yesterday Apple announced the release of their brand new operating system iOS7 which has an entirely new look – they’ve gone ‘flat’ crazy!

What is ‘Flat’ Design?

Flat design is a style that focuses on aesthetics being very clear, sharp and minimalistic. Lacking any kind of texture or blurry drop shadow. It focuses more on the bare essentials. The steer away from skeumorphic design is due to that everyone is now familiar with using all of these complex peices of technology and the functionality they provide. We no longer have to hold peoples hand by over designing everything. Finally switches don’t have to actually look like switches anymore!!

Design Principles

Flat design has very similar design principles to print design. Now we have super high definition screens with four times the amount of pixels, we don’t have to pull the wool over anyone’s eyes anymore. Screens now look like a printed page. We can now focus more on typography, colours and layout which makes for a greater user experience.

Flat design is about stripping away the superfluous to concentrate on user functionality and utility. Think of it as Liberace’s washing machine; people no longer want the elaborate to perform the elementary. Users want apps to concentrate on delivering an experience driven by functionality and clarity that utilises the full extent of digital interfaces rather than one that focuses on mimicking the analogue world.

Our Favourite 10 Examples

Flat UI Pro

http://designmodo.com/flat/

When designmodo released their UI kit it blew everyone away and really set the bar, this is a great example of flat design at its best.

Flat UI Colours

http://flatuicolors.com

Designmodo also made this awesome little microsite full of really useful Flat colour palettes.

TriplAgent

http://triplagent.com

This is a great example of beautiful typography and colour leading the entire design.

Drop Box

https://dropbox.com/dbx

Check out the little boats animating along the screen! A great landing page by dropbox which is promoting their first developer conference.

lorenzo Verzini

http://lorenzoverzini.com

A beautiful muted 3 colour scheme from Italian designer Lorenzo Verzini proving that sometimes less is most definitely more.

Sagmeister Walsh

http://sagmeisterwalsh.com

Once you get over the initial vertigo inducing camera angle you can appreciate the beauty of this website. A live camera gives a birsdeye view of the office over icons that are literally painted onto the floor. Very smart.

Tynan Darcy

http://tynan-darcy.com

Simple crisp fonts and basic colours ensure this design is timelessly effective.

Currency Converter

http://simplesimple.co/currency/

Minimal design; maximum functionality. A highly intuitive app, that is easy for users whilst being lovely to look at.

Rezo Zero

http://www.rezo-zero.com/en

This site possesses a bright, dynamic colour scheme- which falls well short of garish- and striking typography combined with clever animation.

Justin Aguilar

http://justinaguilar.com

A one page website that is the portfolio of designer Justin Aguilar. Two much mixing of typography can leave a website looking messy and cluttered but this design of Novecento Wide and Source Sans Pro creates a page with a crisp, clean design.

Apple started off the craze of skeumorphic designs and I think they’ve now officially ended it. Apple are not exactly leading the flat design revolution; Microsoft Phones have always been flat. However the huge amounts of power and influence they exert in the design world means that their shift over to flat design, in my opinion, means it’s staying for good.


Charles Patterson
Jun 12th, 2013 - 3 mins read
  • I DETEST 3d shadowy “deep” design for desktop. But for mobile i actually like it, as the added dimensions can give users a better idea of how to operate the functionality, and is appropriate for the way the items are interacted with on mobile (directly by touch), where we interact remotely via a mouse on desktop so depth seems inappropriate there. having said that once these behaviour are learned there is no longer a need for the 3d (instructional) design. Which is i guess why apple waited to v7 before going this route. I still think the more elaborate design has a place in apps and sites introducing new interactions new UX etc

Join Our Newsletter
Get 5 must-read links on digital marketing each week, plus any posts from our blog.
No spam ever. Just great content.