Flat Design: Everything You Should Know

While Microsoft and Apple may be at odds on many fronts one area in which both tech giants can agree is on the use of flat UI for their smartphone. Since 2010 the Windows Phone has featured a flat design and since iOS7 came out in 2013 the iPhone has also featured this design trend. Browse some of the more trendy websites out there as well and you are bound to see a number of other examples that feature this trend because people really like using it.

But just what is flat design? Wikipedia defines it as a "minimalistic aesthetic principle," but that does little to really tell us what it is. Instead, let's take a minute to look at some of the common characteristics found in flat design to see if we can't build a better understanding of it.

Minimal approach

Wikipedia mentioned minimalism in their definition but it helps to delve into this aspect a bit more since it is really the cornerstone of this style. To begin with, the bells and whistles that so many sites make use of: animated navigation elements, jQuery sliders that display slideshows and any of the other attention grabbing elements are simply left out of flat design. Need a visual element, try an icon from Font Awesome or a simple photograph. The minimalistic approach also leaves out the need for embellishments like drop shadows, bevels and gradients. These 3D tricks have no place on a flat web site.

Much of this aspect of the flat trend became popular due to the rise in smartphones. When Apple dropped their skeuomorphic design in favor of a flat look many believed that it was due to flat design working better with the smaller screens of the smartphone and tablet.

Use of color and typography

Since flat design is void of all the attention grabbers it needs to rely on something else to make a site pop, and it does so with vibrant colors that are often much brighter than those used on other sites.

Typography is also harnessed by flat design to help create the right tone. Fonts, of course, are simplistic; usually a basic sans-serif type family that looks good when bold and provides a nice contrast to the color scheme. Not only should the font family selected represent the minimalistic simplicity of flat design, but the wording of the content should also be efficient. There is no need for flowery, excessive language in flat design; it is frowned upon.

Basic user interface

One of the last trademarks of flat design is its use of simple shapes for interface elements like buttons and navigation. You can see from some of the templates and icon kits included on this page how basic, but useful these elements can be.

Again, this trend comes from appeasing the mobile users who have trouble using a complicated user interface on such a small screen.

Why people love flat design

Flat design is visually pleasing when done right. It is possible to completely botch a website using this trend, but for people who stick to the template or use a good color palette this shouldn't be much a problem. But looks aren't everything, especially when looking at why flat sites are so popular.

So many users love flat design because of two things: familiarity and functionality. When site looks just like the interface on their smartphone people feel comfortable. They don't worry about getting lost or exploring into new spaces. But most importantly flat design is functional. It is so simple that it is hard for things to break on the page, it works across multiple browsers and devices and it makes things easy to use. Also, it puts the focus back on content. The bells and whistles that so many sites have used in the past serve as nothing but a distraction to the visitor. Now, the visitor can take back their experience because this design trend lets them stay focused on what they actually came to the site for.

Related posts:

• Flat Design Easily Explained for Everybody
• Flat Design: 20 Awesome Free Flat Design Examples
• Awesome Flat Template Designs
• 15 Flat Template Designs