The World Is Getting Flat – Are You?

The World Is Getting Flat – Are You?

Contrary to the popular belief, flat design has been around for decades and is not a new phenomenon. Tracing its roots back to 1920s, flat design was inspired by the Bauhaus movement and evolved into the “International Typographic” or Swiss style.

While Apple was obsessed with skeuomorphism and tried to imitate real world objects, Microsoft spearheaded the flat revolution. Microsoft managed to beat Apple and Google in adopting the flat design with the Metro look and proved that it was light years ahead of its competitors. Metro look adds a touch of simplicity to the user interface.

Google followed the paradigm shift and made changes in a very subtle manner implementing changes in its products. Android’s Ice Cream Sandwich made a big leap forward and embraced the flat design. And finally Apple’s new iOS 7 washed its hands off skeuomorphic design elements and embraced the flat design elements.

 

What is Flat Design?

Flat design relies more on typography and less on graphics and creates a visual feel of a smooth and even look. This design philosophy does not attempt to trick users or hide the fact that users are interacting with a flat screen. It tries to accentuate the two dimensional nature of screen rather than creating illusion of three dimension. Flat design removes beveled edges, heavy gradients, textures, shadows, and reflections and aims to create a user experience that capitalizes on the strengths of digital interfaces.

Whether you like or hate it, Flat design is here to stay. In this article, I will discuss the advantages of flat design and its best practices.

 

Here is why flat design has become the new buzzword

#1 Simple, minimalistic and striking

With the increasing use of mobile devices, simplicity continues to attract visitors to websites. Think about the fact, mobile users are pressed for time and have to deal with information overload. Flat design removes all elements of distraction to reduce clutter. It simply knocks off elements that do not add value to your site. Flat design sports simple images. After all, complex illustrations make it very difficult to comprehend information and act as barrier in taking action.

#2 Emphasis on content

Flat is not just about simplifying UI elements or minimalism. It is about getting emphasis back on content while eliminating the distractions from UI elements. Content is the force that drives users to take action and informed decisions ultimately improving usability.

#3 Efficiency and scalability 

With less clutter, distractions, and unnecessary bombardment of content, users can effortlessly navigate through the site and instantly reach the focal point. In short, users achieve their goals without too much of hassles and in a short time period. The ease of use makes your site robust, efficient and functional.

 

The flat design best practices such as color, typography, vibrant colors and less clutter make it very easy to embrace responsive design trends for optimum viewing on devices of different screen sizes.

[adsense]

 

Flat Design: Best practices

#1 No illusion of depth

Gone are the days of creating illusion of 3-D effects with design. Flat design adopts a honest approach and appreciates the fact that users are interacting with flat screen. Shadows, gradients, patterns, 3-D effects, and other design elements that represent real-world objects are replaced. It is more about making use of colors, typography, white space and a grid system for a consistent and coherent user experience.

 

#2 Typography

Don’t shy away from using using strong, bold fonts. Keep in mind to select typography that is in sync with your design strategy. However, it is equally important to consider readability and white space. So avoid jazzy fonts that distract or are too loud. Remember typography plays a pivotal role in guiding users where you want them to visit.

 

#3 Grid

Grid plays a crucial role in establishing a visual hierarchy when you are playing around with few elements. In fact, it transcends beyond just creating visual order. It allows you to draw user’s attention to important points with basic layout principles. You can consider using dense grid which support complex structure without looking cramped and messy.

 

#4 Color

Flat design makes strategic use of vibrant colors, often tactically using the best of different shades and hues from the same palette. It is important to test hues to ensure they behave in both versions light or dark. Keep on experimenting with your palette. The real challenge lies in the fact that you have a wide range for subtle and contrast elements. Keep the strongest hues for areas that need to draw attention.  Don’t go overboard with too many colors.  It is important to explore the power of contrast to attract attention of users. Think bold and think different.

 

Does it work for all?

You simply should not jump on the flat design bandwagon because it is the latest trend. It is important to assess your business goals, nature of your business, and the maturity level of your target audience. It might be an ideal choice for a designer, writer, or small businesses. But certainly not the choice for complex websites with layers of navigation. It is important that you don’t indulge in mindless chopping of information in the name of flat looks. Don’t toss usability.

 

Posted in Web Design
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Mark Spenser

Mark is working with PLAVEB – A leading web design and development company in Los Angeles, California providing custom web design, development and mobile solutions as per the client's needs.
  • Seth

    Its funny, but the user response from apple users in regard to the flat design was outrage and dissatisfaction. It looked terrible. When my iPad updated I wanted to undo it IMMEDIATELY. This look is already becoming dated and will pass quickly from contemporary GUI design. The metro look was well executed by Microsoft, but the other implementations were not as good, and finally, Microsoft’s trailing edge design parameters helped them with this rollout- people don’t expect much from them. Apple as a leading edge designer should have skipped the whole thing because A: it put them in the follower position, when they should be innovating, and B: Their execution was terrible.

    As we have seen, there is often outrage when companies that manage familiar GUI’s make sudden changes. Without beta design sites that allow user feedback and the easing of users into the new look, the new rollouts are often shocking. But, with a little time, we become accustomed to the new look and forget why we were angry. Not the case in Apple’s rollout. Every time I look at my iPad I am irritated, and it’s only getting worse. It’s a faddish, transitory look that is already past its zenith and I have noticed I use my iPad less. Flat looks can be quite nice, as the design examples you provided are quite stylish. But in the case of device user interfaces, I can’t get into it. It completely devalues the amazing graphical power of high-res screens. For the Kindle? great! That interface is terrible and could quite benefit from the flat, simple look microsoft brings with it’s flat panels. But for HD tablets, it’s going to look bad, cheap even, and extremely dated very soon.

  • Flat design will be out of fashion one day, maybe really soon and I really wonder what will be the next trend …. any ideas?

  • rich

    This is JUST the article I needed after a 5 year graphic design hiatus, and Seth’s comments are JUST the thing I needed to hear so that I know that I’m not going crazy, it’s definitely the world around me. My opinion is that fx and cool graphics should absolutely continue to be used as they demonstrate the skill of the designer and the power of the technology. Current designs are looking like NO effort has gone into them at all. LAZINESS. I can design “flat” in 10 minutes, so guess I’ll save a lot of time wasted obsessing about how deep my gradient goes, and whether that drop shadow should have 5% less opacity. I SO agree with Seth regarding ios7-this type of designing really is a backward step. When it comes to distraction, how about targeting all the excessive advertising placed in the most inconvenient locations, instead of good visual graphics? All the articles about well placed typography, *ironically* separated and jarred by unthoughtful advertising divs??? Strange world huh?

  • rich

    …but anyway, I’ve been told to learn how to design “more flat” so what ever pays them bills. Great article though!