Tag Archives: flat vs skeuomorphic

What Is This Flat Design Trend Everyone’s Talking About?

Design trends come and go, but flat design has really taken the digital world by storm. It’s suddenly everywhere!

It makes sense – flat design is all about embracing the 2D screen to make the most of that canvas. Let’s look at a very popular current example – Microsoft’s Windows 8.

windows

Windows has captured some of the most important qualities of flat design: minimalist interface, solid blocks of saturated color, creative typography, strong lines, no shadows, and few or no gradients (besides the user-set background). Websites with a flat design look modern and bright, plus from a development side, they’re much easier to create than designs that rely on more background images and embellishments.

Hand in hand with the simple “look” of flat design is a whole philosophy of user interfaces. Namely, they should be hierarchically structured (the most important content is front and center) and the overall site navigation is as simple as possible.

Let’s look at what flat design isn’t, too. Contrasting the solid blocks of color in flat designs, skeuomorphic design is a more realistic approach to websites. This method employs bevels and shadows to create a more 3D look – especially on interactive elements like buttons. Here’s a good example of skeuomorphic design versus flat design from Apple:

ios6-7

On the left we have the current iOS 6 home screen, and on the right is a proposed version of the upcoming iOS 7 home screen. The icons on the current version have clearly visible bevels, shadows, and gradients to imply a 3D button.

By cropping out these extra 3D details, iOS 7 presents an interface that looks simpler and cleaner. Flat websites also tend to have faster loading times. Consider this: for those 3D effects, textures, and gradients, a designer has to use a background image. In flat design, a square can be filled in with color just through code, which is much faster for your browser to process.

As a last plus for flat design, it’s much more adaptable to mobile, since blocks of color can be easily re-proportioned to any size on a screen. Images are much harder to scale down effectively.

All this said, flat design is not necessarily better than skeuomorphic design. It largely depends on your audience. After all, the most important thing is that your viewers can easily navigate your interface and recognize a button as a button. Since gradients and shadows are common indicators of interactive elements (like buttons), a good flat designer has to compensate for that well-known call-to-action queue with an intuitive interface.

If you’ve got a simple, relatively small content driven website, though, you might consider jumping on the flat design trend!