The latest design craze to hit the world wide web is flat design, the sophisticated cousin of minimalism. In stark contrast to ubiquitous skeuomorphism style (made famous by the user interface on Apple products), flat design does away with the hyper-realistic representation of objects, instead focusing on clean lines and flat areas of colour.

The recent uptake of the trend coincides with Apple’s release of iOS 7. The new interface is striking in its simplicity; with understated graphics, utilising flat surfaces and cleaner edges. The trend sees a focus shift towards a more tech-savvy digital user and unnecessary graphical elements have been stripped out. This is clearly evident when comparing the iOS 6 and iOS 7 iPhone interfaces.

This design philosophy has made me consider the various stages of UI design over the decades. I began my web career during the web 2.0 era, when deep drop shadows and super shiny bubble buttons were a must! Here we explore where digital design started and where it seems to be heading.

ios7-vs-ios6-icons

In the beginning (1995 – early 2000’s)

For those of you who can remember the early days of the Internet, it was a bleak landscape of simple text-based sites built in the first generation of HTML. Web and software developers dedicated a great deal of time to making menus, buttons and links look overtly ‘clickable’, in order to to coax users to move from page to page. Website navigation was a new frontier for the early adopters and user experience was not given a great deal of thought. Remember the obsession with hit counters on every page?

old-websites

Web 2.0 (2003 – 2010)

There is no doubt that the flat design trend rebels against the web 2.0 style of design that became popular in the early 2000’s. Think lengthy drop shadows, shiny bubbles, oversized buttons and glares. As designers felt a growing need to educate web users on how to navigate web content, these design trends allowed web users to familiarize themselves with the internet. The oversized graphics trained us to ‘click here’ and ‘learn more’ all the while serving up a feast for our eyes as colour, gradients and graphics tantalised our senses.

web-2.0-examples

Skeuomorphic design (2010 – 2012)

Arguably one of the most inventive names given to a style of design is skeuomorphism. This is the practice of incorporating the visual characteristics of an object into a digital design. It involves taking the functional aspects and qualities of an object and recreating them in an ornamental way, with the intention to evoke a feeling of familiarity with an app, widget, tool etc. Texture, light and colours unite to create a sense of depth and realism. Designers are slowly moving away from skeuomorphism design, which has become very popular over the past few years.

One of the most common examples is Apple’s dashboard design; planks of wood, metal and plastic surfaces have been integrated to mimic real life objects.

skeuomorphism

Flat design (2012 – now)

Flat design is the latest style to hit the digital design world. This style is characterised by the elimination of graphical elements that have no significant value or purpose within a user interface. Simplicity is key: decorative elements such as gradients, textures and reliefs are avoided. The style utilises open space, bright colours, sharp edges and two-dimensional illustrations with a strong focus on usability. Omitting complex graphics means that users have less distraction and can focus on content.

Microsoft was an early adopter, applying flat design to their Windows 8 interface. Skeptics suggest this was a reaction to Apple’s skeuomorphic iOS interface; expanses of colour are paired with simplistic iconography. The outcome was a design that is both easy on the eye and simple to navigate.

A significant upside to the flat design style is how uniquely adaptable it is from a usability perspective. By discarding unnecessary styling, page load time is significantly reduced and code is cleaner meaning sites adapt effortlessly across multiple platforms. The style lends itself beautifully to all types of applications; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable.

flat-UI

My thoughts

I believe that the flat design movement is in part a result of web users becoming more sophisticated in their approach to accessing information on the web. Over the years, users have familiarised themselves with digital devices, and no longer rely on oversized ‘click here’ buttons with big bevels and drop shadows. UI designers are now experts in creating designs that entice web users, encouraging interactivity and engagement.

Go back to Design