Over the last few years we have seen a transition within the design industry towards flat design. Essentially flat design is a style evolution that was first introduced into the world of technology back in 2002. It was with the release of Microsoft products and services such Windows Media Player and the Zune MP3 player that we first saw aspects of flat design. This included a focus on lowercase typography and a simpler palette of colours. However this is far from the features of flat design that we see today, in which aspects of a design are stripped down to its basics and focuses more on choice of colour, typography combinations and general usability. We didn’t see the trend become widely popular until 2010 with the release of Windows 7 and then the adoption of other technology companies such as Apple in its iOS and Macintosh products, as well as Google in its Android and Web products.
So what elements constitute flat design and how much do we actually notice it? Flat can more easily be defined by what it doesn’t have rather than what it does. First and foremost it is the removal of the flashy gradients, the fading drop shadows, the textures as well as the bevelled and bulged buttons. These are a hangover from the start of the millennium when the trend was to use as many flashing colours, gradients and buttons as possible as an attempt to retain customer interest. Now the majority website items and objects are free from such distractions and now have become flat against the page. Frequently this can be a step in the right direction, as it focuses both designer’s decisions as well as the intended audience to focus on the most important aspect of any website page – the content. However, there can be a downside to this way of minimalist thinking, most notably where it is taken to the extreme, and the usability of the site is sacrificed for the aesthetics. This is most frequently seen with links and buttons to navigate around the website becoming void of any interactivity.
As with everything related to flat design, the colours used have to be carefully considered in order to compliment the other elements of your design. Colours can be very powerful, and can mean the difference between an engaging and successful design and something that is aesthetically unappealing.
As well as selecting an effective palette of colours, typography has become crucial to flat design. Typography is a very important aspect of good design that can really help underpin and explain the rational of a design. Rather than drawing attention to the choice of the font itself, it is important to draw attention to the content it is trying to explain.
So what are the perceived advantages of using flat design with web projects? One reason for its popularity is the compatibility it brings. As we see more and more companies adopt the idea, the easier it is to interconnect the spaces of web and mobile. This is because the grid-based layouts and simple graphics are easily arranged and sized for mobile, rather than reimagining the whole design. Previous designs with high detail and fixed sized imagery often don’t work well when reduced for mobile devices.
Flat designs tend to use layouts consisting of geometric shapes. These intuitively tend to be easier to scan, read and understand.
A Usabilla survey asked 100 web professionals what they thought about flat design, an overwhelming 68% believe that flat design is here to stay, with 27% not sure and 9% convinced it is just another trend. They also had the opinion that flat design put more focus on the content of the website, and therefore more focus directed on the overall customer experience.
One of the inherent problems people seem to find with flat design is the overall usability, mainly with finding the clickable links within each page. For example the same survey also showed that for the websites the professionals were asked to test, people identified a high number of what they thought were links, compared to what were actually links. On the windows phone website, for example, people identified 50 different clickable areas, however only 35 were actually clickable, a full 30% wrongly clicked.
It then needs to become a balance between creating an aesthetically inviting website, with content that is easy to understand, but also one that is easy to intuitively navigate.
Animation and video has been continually improving and optimising in order to provide a better user experience. Not that long ago, all animation and effects on a website were created by using FLASH technology. This was a revolutionary type of technology but it was very heavy and increased the loading times for websites. This has since been replaced with lighter embedded animations using HTML5 and CSS. It has now reached the stage where animations and videos are not simply used to showcase a website’s aesthetics; the animations are embedded into the overall user experience to help users navigate around the website and will help to provide a better understanding of the information displayed. By incorporating this into flat design, it creates a contemporary and intuitive way of viewing a website.