Flat User Interfaces

Can we call them flat faces? Probably not.

But, they are one of my favourite trends in 2013 so far. The flat user interface, or UI, can be identified by their bright colours and design simplicity. The user-friendly trend has been embraced by giants like Google and Microsoft.

 Microsoft and the Flat UI

Microsoft has upped the UI game with its newest installment of Windows, Windows 8. In bold contrast to the skeuomorphism of Apple, Microsoft’s UI design principles include an approach they refer to as ‘fierce reduction’ which takes into account the following design principles.

  • Clean
  • Light
  • Open
  • Fast
  • Alive in Motion
  • Celebrate Typography
  • Content, Not Chrome
  • Authentically Digital

Google and the flat user interface

Google updated its doc and email icons in 2012 to the flat UI style and in July 2012 they made a big push toward flat UI’s with the release of Google Now. Since then they have integrated the design technology across the board.

The style can be identified by solid blocks of color and solid shadow colors. A great example is this free PSD from designmodo of flat UI elements.

Flat user interfaces - new vector icons by Google
New vector icons from Google – flat user interfaces



This trend is great for web designers because it allows them to create simple icons and UI elements with CSS instead of using image. The use of CSS makes the site faster on all devices and smaller to download.

Flat user interfaces - toggle made using CSS
Toggle made using simple CSS – flat user interfaces


Elements like the toggle above can be easily made in css and clicked with simple jquery. Here is an example I made very quickly. Feel free to look at the code and see how I have made my version of the toggle. I love this new trend and hope more people use it in the future. With the likes of Microsoft and Google embracing it, flat UI’s should enjoy a lengthy lifespan. I plan to use this for my next personal project. Give it a try; I’m sure you will love it too. Get in touch with Media Heroes, and find out how you can use flat user interfaces for your next project.