Skeuomorphic Design

Practically since the advent of the graphical user interface, design trends have been towards a three-dimensional look. Skeuomorphic design has been the order of the day, retaining the ornamental appearance of physical buttons, sliders and bars even when these have been replaced by pixels on a screen. Most GUIs have been replete with bevels, shading and highlights.

Enter Flat Design

All this looks set to change thanks to flat design. Characterised by a simple, pared-down style, flat design is one of the hottest topics on the Web today. Stripped of the in dimensional quality previously favoured by many interface designers, flat design uses simple shapes instead of ornamentation. In place of glistening gel buttons and sweeping gradients, flat design uses crisp blocks of solid colour. Flat design leans towards minimal typography: unadorned sans-serif fonts are the order of the day.

In the Wild

For the average consumer, one of the most visible examples of flat design has been the interface for Microsoft Windows 8. Windows 8 represented a complete 180-turn from the Windows Aero aesthetic: out went airy pastel gradients and in came blocks of bright, saturated colour. Out went bevels on buttons, scrollbars and toolbars; in came flat elements differentiated not by faux textures but by colour and shape, as can be seen on the Windows 8 website here: http://windows.microsoft.com/en-gb/windows-8/meet.

The interface for the latest version of Apple’s iOS mobile operating system, iOS 7, also makes extensive use of flat design. Previously, light and shadow effects were everywhere in iOS; even the speech bubbles used to frame text messages were given a glossy highlight and a corresponding shadow. Now they are flat and solid, in keeping with the rest of the new interface design, as shown on the iOS page on Apple’s website here: http://www.apple.com/uk/ios/.

Advantages and Drawbacks

While some are dubious, others celebrate the change both from a purely aesthetic perspective and from the viewpoint of practicality. Many arguments for skeuomorphic design centre on its intuitively — in theory, making GUI buttons look like buttons in the real world should help users navigate interfaces more easily. In practice, it’s not always clear which design elements are intended purely for ornamentation and which are functional.

Flat web design can also be more economical in terms of processing power and page load speeds. The resources used up in rendering those shiny buttons and eye-catching shadows can translate into slower response times and shorter battery life — a real concern for mobile device users.

On the Web

Flat design offers a number of advantages for Web designers. Pages using flat design are likely to load slightly faster than pages with lots of 3D decoration to render. This translates into higher traffic and lower bump rates, as users are infamously unwilling to wait around for a page to load. Search engines also factor page load times into page rankings, so flat design might potentially improve SEO in some cases.

Is Flat the Future?

While it’s great for some things, there are situations in which flat design might be less than ideal. If a website or application needs to evoke a particular atmosphere, flat design might be quite inappropriate; for instance, a website on fantasy and science fiction might benefit from luminous highlights or metallic textures on its interface elements. Similarly, flat design might undermine the impact of a graphical artist’s portfolio site. As with so many things in the world of design, context is the key.

Mathew Porter has been in the Online Marketing industry for over 8 years in various industry roles and has focussed his career on Web Design and Development.