Flat design is a phrase that web developers will begin to hear more and more if they are not already familiar with it. Purporting to be a revolution in web design, the proliferation of flat design on the web is ultimately an extension of the recent changes seen reflected in the Windows 8 design and the almost-natural progression of elements of the iPhone interface.
But change is nothing new for the web, especially as far as design is concerned. So let’s take a look at some of the basic components that are common to flat design, and discover how they differ from the Web 2.0 approach.
We’ve come a long way from the days of Geocities-type websites, where sometimes it seemed as if the function of the site was to overwhelm the visitor with the sound and fury of animated icons, blinking text, wildly colored buttons, and incredibly ugly font choices. And along the way, web developers have adapted, becoming experts at finding ways to code intricate and complex designs that could accomplish almost any functionality dreamed up by the design team.
Much of flat design has its roots in the mobile phone experience, where new ways of interacting with visuals (e.g., swiping, pinching) have led to new expectations for other digital interfaces. Analysts of trends in web design talk about flat design as being the opposite of the previously “skeuomorphic” approach, focused on adding realistic, familiar, identifying aspects to object representations (think of the Notepad icon with its fan of pages and coiled top). Disagreements on definitions of the two terms is widespread, but the trend itself is clear.
Apple built its current enormous market penetration with the clever use of aspects of skeuomorphism, but their move to a flatter design with iOS 7, together with Microsoft’s two-dimensional Windows 8 design, have combined to push this trend beyond mobile and onto the desktop and tablet. What makes it all work is the attention to function and usability that have come with the idea of the design – and that is what makes this incredibly important and significant for web developers.
Flat design, above all, is clear and intentional, a complex structure replaced with lots of colors and straightforward typography, and often a grid system for the organization. It’s a reflection of the fact that screens are two-dimensional and – yes – flat (there’s that word again). The connection between mobile, where the available space makes it imperative that intent be clear and unambiguous, and this trend online is undeniable
But flat design also has an underlying advantage for the developer. Its clarity and focus on fewer design elements mean less to build. But don’t be fooled into thinking it’s easier – the finished interface has to function even more flawlessly than before, precisely because there is likely to be less redundancy to fall back on. The focus is on the content of the site and helping visitors achieve their intent. In such an environment, visual cues take on renewed importance.
And flat design doesn’t shy from using those visual cues in such a way that intent is extremely clear and up-front. There may be less to develop, as the design gets to the point directly, without the intricate detail and rich graphics common to Web 2.0. But what you develop must work – and work better and more intuitively than ever before. The choices a developer makes become even more important in streamlining and speeding up access and function.
Another interesting aspect of flat design is that its spare nature makes it perfectly paired with the move toward responsive design. The use of large white spaces and less complex navigation and structure allows the design to degrade gracefully to smaller size devices like smartphones and tablets, without losing functionality, usability, or intent. Color can be used more as a means of identifying similar elements than for intensifying the design.
