What’s the Fuss About Flat Design?

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.

fitbit united
jorge portrait
metro inky
friend float
etch true

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).

Icon Sets

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.

IconShock

Picture 2

This set has more than 3600 icons for a wide variety of uses, all freely available.

GraphicsFuel

This set of 20 icons has particularly vibrant colors and are sized 128 x 128 pixels.

This set of 20 icons has particularly vibrant colors and are sized 128 x 128 pixels.

Flat Designs Icon Set, Volumes 1, 2, 3, & 4

pixeden

Each volume has a set of 16 minimalist icons, for a total of 64

Pixel Fabric’s Flatilicious

Another set, this time including 48 icons.

Another set, this time including 48 icons.

Flat Design UI Kits

Graphic Burger’s Flat Design UI Components

In a layered PSD format, these vector shape components require a minimum of Photoshop CS5.

In a layered PSD format, these vector shape components require a minimum of Photoshop CS5.

Riki Tanone’s Freebie Flat UI Kit

Riki has some nice kits on Dribble, of which this is one.

Riki has some nice kits on Dribble, of which this is one.

Mike at Creative Mints UI Kit Metro

natural

Also located on Dribble, Mike’s kit has the look of Metro.

Alex Vanderzon’s Flat UI Buttons

alex

One of a number of collections by Alex, this set has some UI buttons in the new design.

HTML/CSS Components

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:

Line25’s How To Build A Trendy Flat Style Nav Menu in CSS

port

A very nice tutorial on building a flat design navigation completely in CSS.

Fan Extra’s How to Nail the Coveted Flat Design Look (9 Actionable Tips)

Not a tutorial, but the article makes some great points about how to work with the new approach.

Not a tutorial, but the article makes some great points about how to work with the new approach.

Flat UI Colors

A simple site/app for copying colors suited to flat design in RGB and HEX formats.

A simple site/app for copying colors suited to flat design in RGB and HEX formats.

DesignModo’s Flat Web Design Tutorial

The video tutorial is an 18-minute demonstration of setting up a grid, placing elements, color palettes and fonts. It uses many elements from their free Flat Design Kit.

The video tutorial is an 18-minute demonstration of setting up a grid, placing elements, color palettes and fonts. It uses many elements from their free Flat Design Kit.

Conclusion

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.