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 color and straightforward typography, and often a grid system for 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 means 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 in 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.
Showcase of Flat Design
To illustrate these concepts, let’s take a look at 10 websites that are using flat design in interesting ways. You’ll see some techniques that are common to many of these examples, but also some unique approaches to dealing with challenges of simplifying design yet retaining functionality. Note how seamlessly some developers of the sites have integrated responsive design – in particular, United Pixel Workers has an incredibly smooth re-flow of individual product choices when the window size changes.
Of course, the move toward a different way of designing websites also means that developers need to equip themselves with new tools and sources. To help you get started, here are some resources (most of which are free to download).
A staple that every developer needs plenty of, icon sets have undergone a complete transformation with flat design. Luckily, some really nice sets are free to download and ready to use as vector PSD files.
Flat Design UI Kits
The challenge of building flat design is to replicate functionality in a much simpler interface. The code can be leaner in some ways, but needs to cover a lot of ground. Here’s some help:
In .net’s Summer 2013 issue, the article “10 Design Concepts for Developers” eloquently sums up how design is not just the job of the designer:
“Design is the ‘how’ and ‘why’ people want to use the site; the speed at which the site loads, the interaction between hover, click and touch; and the pace at which you deliver new features and content. All of these concepts comprise design.”
This goes beyond the developer to every person on the team who plays a part in creating a better fit between the site and the user. It is all about the user experience in every sense, from the first thing that attracts them to the site all the way through to the moment they leave the site. No matter whether the design is flat or skeuomorphic (however one finally defines that term), the same end result is key. Developers as a group need to continue to work closely with all members of their team and make the most of their different skills and strengths.