What Is Flat Web Design?

By Purplebox Digital

History of Flat Design

flat web design infographic

Flat design is a minimalist UI design genre which is currently used in graphical user interfaces for apps and websites. The style is aimed to create a 2D (or flat) image by not using any stylistic elements like shadows or gradients. A flat design user interface appears streamlined, efficient and easy to read. This leads to the primary advantage of flat design: fast load times and easy resizing. Flat design was first coined during the 1950’s after the rise of Modern art and the International Typographic style.

The earliest incidence of it being widely used in the digital world can be attributed to Microsoft on the Zune mp3 player. The Zune featured a minimal flat UI with clean and simple typography, monochromatic colours and simple flat icons. Flat design continued to grow throughout the late 2000’s until in 2010 Microsoft released the Windows phone which featured a flat grid and simple design. Following on from this success Microsoft released Windows 8 which had a very similar user interface. This was the first use of flat design on an operating system and has helped spread the design throughout the online world.

How to use Flat Design

The simplest way you can introduce flat design to your company is to use a pre-designed package of parts known as a user interface package or UI package for short. The number of flat-style UI kits currently available is massive and some of them are even available for free. One of our favourite is the Featherweight UI which has lots of free icons for use on your website.

Downloading the icons kit is just the start – You also need to pick a typography, social icons, buttons – everything on your website has to follow the same flat theme. Flat websites are minimal and require sans serif fonts with the right combination of colours. If your website has too many colours, the wrong font or even a photograph it can easily destroy the flat design you are going for. If you are struggling with fitting all your flat elements together then you can always ask an expert.

Flat Design Colour Schemes

Due to flat web design being minimal it relies on colours more than its skeuomorphism counter parts. When it comes to deciding on the colour palette for your flat design website it’s important to ensure you get it right. It’s common for designers to choose bold and bright colours which are fully saturated. These are often contrasted by the dark greys of blacks of text. Palettes have expanded from the monochromatic palettes of old and throughout all of 2015 designers started to use three, four or even more colours. Flat design has thrown all the old rules regarding colour pairing out of the window but it works because the colour is matched through tone or saturation. Colour wheels don’t apply in flat design and so it can be difficult to create your own palette. Thankfully you don’t have to because there are now tools on the internet which pick a flat design colour scheme for you.

flat web design colour scheme

Flat Web Design Examples

Olympic Story

olympic story website

The Olympic story is a great example of how you can mix flat web design with modern elements like a video introduction. It’s quick to load, sleek, easy to use and clearly gets the message across. It’s use of winter related colours and flat icons along with a simple typography make this website stylish yet effective.

Kick Drop

kick drop website

Kick drop shop is a simple website which allows users to buy code for their website. The simplicity of this website makes it perfect for a flat web design theme. The flat design makes the shop easy to use and it functions well across all devices and resolutions. It’s a good example of how you can use flat design in ecommerce.


ripple website

Ripple is an app designed for the iPhone which allows users to chat with people nearby. It’s a simple idea which is well represented by its simple website. The flat web design elements match those used in iOS and the colour scheme is highly saturated and bright colours with a mixture of black and white text.

Flat Design in the Future

In 2015 Google released their new logo as a flat design and we predict that 2016 will be another great year for flat web design. The stylish yet simple elements of flat design will help it to avoid becoming dated and with responsive web design now more important than ever before the easy scaling of flat icons make it perfect for apps and websites alike. It’s quick to grasp and makes for a beautifully simple user interface which is not taxing on bandwidth or server space and it’s not hard to see why this year is one of the best years to move your business into the world of modern flat design.


Think your website could do with a design update?

Contact Us Today


Get In Touch