Adapting Flat Design

With a new year comes a new and sometimes rehashed trend emerges within the design community and this year it is no different. One trend that is appearing in many places is flat design.

From long page designs to utilizing large photographs or illustrations in place of simple colored backgrounds the trends for 2013 are already flowing in and being used in heaping doses. Flat design is being used in iPhone Apps, Windows 8, Windows Phone, website designs and more.

Flat design focuses on less use of gradient, emphasis on usability, cleaner interface and subtle color pallets.

lorenzoverzini

Despite what you might believe the flat design trend isn’t new. In fact it was used years ago but within commercials, circa Apple’s infamous iPod ads, and that’s just one of the more notable uses. Microsoft can certainly be considered one of the first to begin using flat design within technological device, the Zune. Despite the Zune’s failure within the technological market Microsoft kept at it with bringing flat design into the Windows phones, even Google got into the action. Now flat design makes a cameo not only in websites but also the UI of your favorite mobile apps.

And while flat design is often purely visual, it does resonate with designer’s love of minimalist concepts, embodied by the famous Antoine de Saint-Exupery that “perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”. Sacha Greif

Why Flat Design?

Now some of you may be wondering why anyone would want to use flat design within their website, phone application or even graphic design project. We live in a world of progressive technological advancement so it is only understandable that we take 3D to a whole new level. After all isn’t that like us going from rubber tires to stone wheels? To calm any fears I can assure you that using flat design isn’t a step backwards. In fact it is a step forward no matter how controversial some may see flat design to be. Some even consider the remerging trend to be somewhat revolutionary but as it is still early in the year that can’t be determined so soon.

alpine

While there are some issues that have been taken with flat design use by web designers, issues with usability and discoverability to name a few, there are still upsides to the trend. Using flat designs is not only a refreshing break from a world that is so used to 3D objects in a flat space but it also alters the look of your final design. Flat design usage has the tendency to give your website and app layouts a sharp and clean look. Let’s not forget to mention that it is much quicker design a website with flat design than it is with 3D objects as there is no need to bother with CSS properties. Flat designs can also be seamlessly coupled with other design trends without giving you a cluttered result.

Flat Design and Almost Flat Design

Flat design tends to fall into two categories, both which can be seen in website and app UI. There is “true” flat design and almost flat design. What is the difference between the two? Well the difference is simply whether or not the image and elements are truly flat. An image or element that has true flat design implemented will be in simple terms “flat”. There will be no distinction between the element and the background to which it is composed upon.

metrotwit

Likewise elements that have been designed to be almost flat are exactly that, almost flat. These elements have been given subtle drop shadows and even possibly other attributes such as gradients and glowing effects. Though these techniques are added subtly they can be easily discerned from the background. Both have their own distinct look though subtle so it is up to the designer to decide what will work best. The only difference is that almost flat design adds some measure of depth to allow users know that the element is interactive and not just an illustration.

Simple Minimalism

One thing to be noted about the usage of flat design is that it simplifies your overall design and in most cases can and will give your design a minimalistic feel and layout. Having non-decorative elements not only free up space but allows for the users to easily navigate the site or app and focus their attention to what really matters.

scavengerhunt

With opting to use flat design, the designer is able to channel the creativity usually allotted to the designing of 3D and CSS infused elements into other important factors which include color, negative space, shape and typography. You might notice that designs that feature either flat or almost flat design often rely on color. These colors are often bright, complementary and used in sizable portions to call attention to themselves and if true flat design is being implemented they will be free of gradients and drop shadows. Geometric shapes, typically circles and squares, are used and they feature sharp, clean lines keeping things simple while negative space is utilized to the best of the designer’s ability to keep the look as minimal as possible.

kippt

Let’s not forget to mention it showcases the fact that flat design allows for better readability. Sans-serif type faces are often chosen over others to flow with the design as they tend to have clean, straight features.

Conclusion

While the flat design trend won’t pique everyone’s interest it is a technique that is steadily making the rounds and will surely be around for some time. Flat design may be a quick work around if you’re not a fan of more dynamic 3D-esque looks but like all things in design it has its flaws. One notable flaw is in the UX department which the Windows 8 has fallen victim to as the truly flat UI has made it impossible for users to be able discern whether or not an element is interactive or not. Despite such issues the flat design technique should be given the benefit of the doubt as it is, as noted before, a nice breath of fresh air the design community.

Advertisement