Flat design is a distinctive style of web design that uses flatness and simplicity as the main defining features. Elegant and attractive it relies on the basic appeal of typography, soft colours, use of simple non-skeuomorphic icons and intelligent layout of features. A modern look for the modern web and perfect for the cross over between mobile and desktop as the web moves into its third decade.

It does away with many of the styling elements that were the hallmarks of the previous rich design age, such as shadows, gradients, embossed detail, bevels, deep texturing in order to create a simple yet intense 2D UI (user interface). The emphasis is put on the overall content of each page rather than individual elements of it making for a more holistic approach.

Vital Active - screenshot

How long has flat design been around for?

Microsoft were the first big company to embrace flat design when in 2006 they released their Zune music player and then following this the Windows 7 phone in 2007. Their Windows 8 operating system was characterised by the use of sans serif typography and the iconic square structural coloured blocks. Although nearly ten years old now it still looks modern. This user interface known as Metro for both of these took a flat approach and kicked off the movement as we know it now.

The next major landmark in the journey for flat design came in 2013 when Apple updated their iOS for the iPhone in the autumn of that year and overnight completely changed their skeumorphically designed iPhone icons to flat versions. Gone were the perfect 3D replicas of a compass for the Safari browser and the waste paper bin for the trash bin and in their place were the now familiar flat alternatives.

Why has it become so popular?

For the last few years web designers have been designing for mobile users as well as desktop users, flat design fits this new age. The reduced complexity allows sites to load more quickly and improves navigation and usability plus it works well with responsive sites that change layout depending on the screen size. Simplicity is at the heart of the design concept along with efficiency and for web designers both of these factors are treasured in an ever more complex web environment.

Another reason is that with people choosing to use their mobiles to go online whilst on the move – walking or crammed onto a train or bus – the designs that work best when accessed via mobile are the simple ones. White space, clear instructions, easy to see calls to action with big icons are what people need and all of these are standard for flat design.

Would all this have happened without the arrival of mobile?

Quite possibly as evolution is a crucial element of the design world with styles changing and trends coming and going. One of these is the drift between complex and more simple approaches. The same phenomenon can be seen in other fields of design fields for instance fashion, cars and homes.

Prior to the flat design revolution the trend in web design had been towards building sites rich in 3D effect and complexity with the drive to get as far from the clunky websites of the 1990s. The movement towards the more simple style is therefore on the one hand an inevitable change but given extra impetus by the arrival of mobile.

The roots of flat design were planted almost a hundred years ago in the 1920s with the birth of Minimalism and Swiss Design. The latter of the two was particularly influential majoring as it did on the use of white space, sans sefif fonts, grid systems, typography and elemental approaches to layout and page use. Although this is some 80 years before flat design made its appearance there is common agreement that it owes much to this ground breaking pair of design movements.

Bill Amberg - sceenshot

What role does colour play in flat design?

Colour and the use of it is a major part of the flat movement. Blending a range of shades of one particular colour and contrasting colours against one another are both commonly used. Soft shades and mixed colours are flat hallmarks. The use of colour to enhance and control emotional reaction has been used in design for a long time and now in the colourful world of flat designed websites you can see this all over the place.

Combining typography and colours in a simple blend works well and makes for a striking form of communication when done well.

Has it crossed over into graphic design and branding?

Absolutely. If you look at some of the major brand logos such as Netflix, Google, Pepsi and of course Microsoft you can see the effect of flat design on them straight away. With the redesigning of their websites comes the transformation of their branding. Logos have obviously been around far longer than websites but if you’re site is flat then it stands to reason that the logo needs to be flat too as this is the defining image people have of companies.

Google changed their logo last year to a flat version. Although the colourful logo had been modified over the years, the new version is a complete change to a simple sans serif font yet still with the characteristic individual letter colours. Interestingly the move to the new logo really comes into its own when seen as a shortcut icon on a mobile or tablet screen for it is simply the letter G made up of sections of the various colours. Minimalist and instantly recognisable.

Are all websites built nowadays using the flat design approach?

No. Ultimately it is a choice for the designer and the client to make. Flat suits some brands and not others although the aim of creating faster loading, fresher looking sites that are effective on mobile is pretty much the go-to approach for web designers. Flat can help deliver this.

The two websites I’ve included in this blog to display their flat designs (see screenshots above) are both Teapot Creative built sites. Responsive, stylish, colourful, visually interesting and easy to navigate. Have a closer look at the websites here – billamberg.com & vitalactive.com.

Is it here to stay or is it just a trend?

2013 was the year that along with Apple’s dropping of the skeuomorphic icons flat design became the talk of the web design world. Three years down the line and its still going strong all be it with subtle changes and developments. There is no consensus amongst the web design community but it would seem that for as long as the web needs fast loading, easily navigable sites that are user friendly no matter how large your screen is then flat or some future version of it will stick around.

For more examples of our web design work both using WordPress and PrestaShop then visit the Teapot Creative portfolio.

Save

  • SBA 2016 Winner
  • chamber