The Flat Design Trend

The Flat Design Trend

image2

Classic 2D Bauhaus Design

For the past few years, web design has followed various trends. Glossy buttons, gradients and drop shadows are just a few of the fads that have come through the digital design world.

Now, a new trend called flat design is gaining immense popularity with companies such as Microsoft and Apple, who are leading the charge in this movement.

The elements that form flat design add a sense of minimalism to an interface, adding sophistication and user friendliness which are two of the many reasons to consider incorporating this style into your website.

What is Flat Design?

Flat design refers to the simple use of elements like typography and colors. It removes overdone stylistic choices that create the illusion of three-dimensions such as drop shadows, gradients, textures or other tools that are used to add depth.

Returning to the Past?

If you want to create designs with more longevity, then consider a flat design.

In Switzerland during the 1940s and 1950s emerged a design trend called the Swiss Style, which was focused on the use of grids, san-serif fonts and clean hierarchy of content and layout.

The Swiss style can be traced back to the Bauhaus school in 1920’s Germany, which played a very important role in the history of graphic design. Many contemporary designs can be traced back to this origin.

Less is more

Conveying messages without explanation has been a practice since the beginning of time. Cave drawing and hieroglyphics used symbols to convey messages. If a designer has to explain a complicated concept, it most likely failed, which often makes simplicity an ultimate goal in design.

Online, by using icons users are able to reach outcomes faster than when they have to examine a photo. A colon next to a closed parenthesis symbolizing a smiley face is easier to portray than a real smiling face. The user can get lost in the detail of the image and may miss the message that you are trying to convey.

The Elements of Flat Design

Flat design uses strong colors and beautiful typography to convey messages. Colors are a very powerful tool to demonstrate emotion. A blue hue may be used to demonstrate tranquility while a red hue may stimulate a faster heartbeat.

With the implementation of flat design, however, precision has become a must. By removing the “visual fluff” from a site, every error is greatly enhanced and designers can no longer use drop shadows or gradients to hide their mistakes.

Type is Key

Typography is the key foundation of flat design. By removing unnecessary stylistic elements, having good typography is the only way to visually present the content. Fonts are used to exemplify the message of the site. When it comes to selecting the right fonts, the main rule is to make them bold, simple and irresistible. They’re the driving force behind the design, and as much care needs to go into them as the rest of your content.

Application in Real Life

metro1

How does Microsoft Metro compare to the early Bauhaus above?

Microsoft and Apple have adapted to the flat design trend.

Microsoft incorporated flat design into their Windows 8 interface. There are many applications designed by Apple that use a flat design to easily convey messages. By using bold colors and typography, these interfaces look cleaner than their three dimensional contemporaries. Yet they harness a world of design that is almost 100 years old.

The flat design trend might not be the universal answer for design, but it is the style that will define this part of history.

With designers using this trend to focus on the necessary and needed elements, it has given a greater stress on attention to detail and with creating dynamic content to attract users rather than flashy visuals. Plus, with messages being conveyed faster though the use of flat designs, providing this content quickly and efficiently should become a top priority for any successful brand.

By: Aaron Ward
  • Alfredo J. Rodriguez

    While I respect the aesthetic appeal of flat design, I wonder if the focus on minimalism has been taken too far. Designers and web builders at-large should focus on functionality and providing features for the users. A flat design is only useful in attracting users to the places you want them to go, defeating the purpose of limiting user options.

    • Joshua Bains

      Alfredo, I’m trying to understand your conclusion:

      “A flat design is only useful in attracting users to the places you want them to go…”

      1. Is realistic design more capable of attracting users to places I didn’t except them to go?

      “…defeating the purpose of limiting user options.”

      2. How does flat design limit user options?
      3. What is the purpose of limiting user options?

      • Alfredo J. Rodriguez

        Flat design is great for a user in the sense that it guides their eye to where you, the designer, wants them to go. But one of the main principles of flat design is minimalism, which if taken too far, can lead to choices that limit the features of a site. A really simple example is Blueprint making the decision to have a General SEO page, without adding the subpages like “Consulting” or “PPC”. My original comment warns against taking the minimalist concept too far.

    • I couldn’t have said it better myself. I personally think that the greatest example of flat design going too far and reducing functionality is the latest iOS 7+ design. This article highlights some of those design misses, especially the “poor response to touch.”

      http://www.zdnet.com/whats-right-and-wrong-with-ios-7-7000020889/

  • Guest

    One thing that I find interesting about the flat design trend, is that many of the Windows users that I have spoken have pretty much dismissed the design (specifically with Windows 8 and the mobile OS) in favor of the more familiar, but slightly complicated older models. Some users flat out don’t like the new trend because they have no idea where everything is.

    While minimalist designing may seem to be easier for the user, is it what the user wants? Does it beat familiarity? While it is a design trend now, will it last? Only time will tell.

  • Blair Sanders

    One thing that I find interesting about the flat design trend, is that many of the Windows users that I have spoken to have pretty much dismissed the design (specifically with Windows 8 and the mobile OS) in favor of the more familiar, but slightly complicated older models. Some users flat out don’t like the new trend because they have no idea where everything is.

    While minimalist designing may seem to be easier for the user, is it what the user wants? Does it beat familiarity? While it is a design trend now, will it last? Only time will tell.

    • Samantha Torres

      Blair, you make a good point. I think Microsoft fell a little short in that regard when they made such a drastic change to a product that so many consumers have already been conditioned to. If a site or app has an established use, the brand needs to carefully consider the importance of updating vs. not throwing their current user base.

      • Great points Blair and Sam. Windows 8 is considered a failure even if it has a cleaner interface. I think Microsoft should go back to a standard menu like Windows 7 and add flat elements like Apple does.

    • The greatest problem with Windows 8 isn’t the new “metro” design, it’s the choice of not going all the way with the new design language and leaving in the classic desktop interface in tandem with the new design. Neither were made to go together and ultimately made a situation where consumers were confused and frustrated with the experience.

      Can you imagine if the iPad was running iOS design side by side with the OSX desktop design?

  • Joshua Bains

    In an interesting post on Post Flat Design, there’s a cry for disposing of the extremes of both flat design and realistic design by marrying the two into a composite that takes the best of both. Like this animated Safari Icon, which began life as a flat image and ended up with drop shadow textures, it can help users navigate a page that would be difficult to decipher visually if hamstrung by purist flat world ideals.

    http://blog.collectiveray.com/post/82108622609/post-flat

  • Joshua Bains

    In an interesting post on Post Flat Design, there’s a cry for disposing of the extremes of both flat design and realistic design by marrying the two into a composite that takes the best of both. Like this animated Safari Icon, which began life as a flat image and ended up with drop shadow textures, it can help users navigate a page that would be difficult to decipher visually if hamstrung by purist flat world ideals.

    http://blog.collectiveray.com/post/82108622609/post-flat

    • I’m glad that you alluded to this new trend. This is a hybrid design approach that adds more emphasis to areas that you want the user to interact with. Apple is the lead innovator with this method. i.e. ios 8

  • John

    The psychology of it all is interesting, and I liked the historical elements. Good article man!

  • Chuniq Inpower

    I agree that flat design interfacing is much cleaner than 3-D visuals. It was very interesting to learn where this design style originates from, and of course, as much things change, they also stay the same! Colors on site design and other visual elements (logos, website, etc) are very important to use properly for the reasons you mentioned above (emotions, drive to action, etc.). Thanks for sharing!

  • Samantha Torres

    I am a fan of flat design for a couple reasons. First, as a consumer myself, sites and apps that have switched over to flat design are generally easier to navigate. Of course there are exceptions to that rule (Blair’s comment calls out Microsoft).

    Secondly, from a developer view, flat design is more efficient code as well as much simpler to adapt for mobile use.

    Lastly, when building a site with flat design, it forces a brand to ask the important question of what’s the ultimate goal for their consumers? It’s sad how often that question is missed as the site’s focal point in an effort to make something cool or cutting edge. With the switch to flat design, it’s bringing brand’s back to this main focus.

  • Naima

    Simplicity is always a good thing when designing a user-friendly website. It is good to know that some of our favorite stylistic designs like gradients and drop shadows brings the best looks, but are not as effective as flat designs.

  • Adam Baxter

    Flat design is really effective and easy to use, but I find it gets old fast. As tech gets better and better, I think we’ll see some really interesting changes. Maybe not a lot of change towards over-all design, but more towards interactivity.

  • Rebekah Faucette

    As someone who had a Myspace page that was full of 3D glitter graphics and overdone backgrounds, I think the popularity of flat design is the equivalent to a teenager trying to appear “grown-up.” Rebelling against the childish clothes of his or her youth in favor of wearing all black, minimalistic design is how the internet as a whole can show that it has matured beyond the elaborate pages of the past. Also, it fits nicely with the trend of favoring substance over style, giving the content of a page the chance to shine rather than trying to draw the eye to every corner of the page with goofy fonts or bright colors.

  • Consider that Swiss design didn’t need to concern itself with the user interacting with it. A year ago the Nielsen Norman Group stated that flat design was one of the biggest threats to tablet usability [1] and found that the implementation of it in iOS 7 was pretty problematic [2].

    1. http://www.nngroup.com/articles/tablet-usability/
    2. http://www.nngroup.com/articles/ios-7/

    This image is another pretty good example of some flat UX failings. Quick, which of the items in it are clickable? Consider that the contrast on my monitor is really low. When I first started using Windows 8, it took me weeks to discover that what I’d thought was a title was actually a button.

  • LilitM

    Design is like fashion and fashion changes. Like waives, every movement (I will call Flat Design a Digital Design Movement), has its rise and its fall. One inevitably follows the other. I do not think there is a better or worse, there is a different, something new and eye catching. Older designs were a different, something new, before as well. I like both and the mixture of the two. Each one them has its own place in design.