Flat Design - Great for Lazy Designers

Flat design is all the rage these days. Gone are the days of candy buttons, gaudy gradients, and elements that give the illusion that they’re jumping off the page at you. Designers and developers love to argue over whether this style is just a passing fad or here to stay. My take is that it’s both. Flat design has always been around and it’s worked well for countless sites. At the same time, there are a lot of newbies on the scene who are taking the most superficial elements of this design style and ruining it for the rest of us. Those are the designers that are making it a passing fad. Web design has its trends but in the end flat design will become less pronounced and find its place among the different styles a designer can utilize. In the meantime however, there’s a frighteningly large number of new, mostly self-taught, designers out there abusing flat design. Good design is not the coat of paint we use to polish off a site. With that said, let’s talk about flat design – the good, the bad, and some things in between.

What is design

Design can often be a nebulous idea. For many, especially us developers, new designers, and the self-taught among us, it ends up being thought of as the “prettiness” we add to a site. As a generalist who often wavers between different specialties, I often have a hard time nailing down a good definition of design. Rather than give you the Google definition I’m going to describe it as I understand it. The best way to do that, I believe, is to first go over what design isn’t.

Design is not the colors you use. Well, at least not completely. Design is about the “why” of things. When it comes to choosing colors, the colors themselves are unimportant. Instead it’s the reason why you choose the colors that is. Design is about asking the right questions.

  • Who are my users?
    • Are they tech savvy? Will they understand the iconography I’ve chosen? Do they have a good grasp of how to know whether something is clickable or not? Are they familiar with a URL and navigating a website without becoming easily lost?
    • How old are they? This goes along with question number one. Older audiences are often less tech savvy but not necessarily. There’s a difference between designing for middle aged (40+) blue collar types and people of the same age who work as executives. The first group may need a bit more hand holding while the second group is likely to be more familiar with browsing the web through their work.
  • What is the purpose of a user’s visit? Design should always have a purpose. You can ornament, prettify, and add flourish to your design all day long – and it may be beautiful – but if it isn’t helping users accomplish their goals you’ve failed as a designer. This is the one area where the idea of beauty not being the same as design is very pronounced.

There’s plenty more to ask yourself when starting a design but those are the basics I always start with and that designers need to keep in mind. Knowing the who and the what of the completed site goes a long way toward helping you succeed at design.

Back up your choices

Remember back around five years ago when XHTML was dying and there was a big push for a more semantic web in anticipation of HTML5? I remember being very careful with my markup and it’s a habit that stuck with me. If you’re a designer that can code a little, semantic markup is an idea that will help you tremendously. Now, any time I design a site I first take a look at my content and don’t even think about the design until I know how my content is going to be described in markup. In some cases (more than you’d think) I should be able to design around the already written markup. I know that often times a developer will work off of a mockup and need to write markup so that their styles have something to hook into and that’s alright. The point here is to understand content hierarchy and the organization of content site-wide. No one can keep an entire site’s worth of content structured and organized in their head but it’s not difficult to keep a general idea in your head as you create your mocks in Photoshop.

With content in mind, you can now begin to create a design that makes sense. When you’re done you should be able to present your design to a group consisting of developers, other designers, and the project stakeholders including the clients themselves and field questions. Designers hate criticism from non-designers and rightly so. Laypeople are… well, they’re ignorant when it comes to design. They will destroy a beautiful design without fail almost every time if you let them get their way. Because of this, you need to be able to back up every single design decision you’ve made throughout the site.

When your client says “I don’t like the color of that button” you should be able to defend your choice by explaining that good design is not about personal preference and ask for a reason other than their own color preferences for changing something. By the same token, you need to be able to not only explain why personal preference should not be a factor in a design critique but give solid reasoning for your choices as well. So instead of “that color really pops against the background” you could maybe say “In the context of a button, green is almost universally understood to be a color indicating that the user can move forward by interacting with it. Furthermore, countless studies and our own testing have shown that green submit buttons convert better than any other color. We believe the reason for this is because users see it as an element that will help them reach their goal while your suggestion, red, indicates that interacting with the button will lead them to a dead end. Oh, and the shade we picked compliments your brand’s color palette really well”. It’s wordy but it’s an example, the point being that you need to be able to give solid reasoning for why just about every element on your page looks the way it does from buttons to backgrounds to links, buckets, different types of text, and beyond.

Flat is lazy

Disclaimer! I’m talking about instances when flat design are implemented badly here. I believe flat design is great and can be done right. The problem is that it’s done wrong more often than not.

I’ve seen a lot of designers, including experienced ones, go the flat route and completely forget the What’s and Why’s of design. It’s as if suddenly we have a new template for how to make sites look modern and edgy that requires little to no thought from the designer.

Flat design makes differentiation very difficult. Take buttons as an example. Because flat design relies primarily on shapes and colors for its effect buttons are very difficult to do right. A user only needs to discover a button once for them to understand how to interact with them site-wide but what about every other boxy element with text and a colored background? Are they all buttons? No, some of them are callouts or buckets. Suddenly you’re frustrating visitors as the purpose and utlitiy of elements are becoming unclear. Of course you can use hover states and such to make sure a user gets some indication they can interact with an element but this requires they hover over every box-type element on the screen on every page.

What we often end up with in flat design are websites that consist solely of one large box with many smaller boxes inside of it. The boxes always have pretty pastel or neon colors. They look cool on first glance but becoming tiring once you try to accomplish anything. Not only are they just plain boring to look at but there’s little differentiation between elements on screen. It ends up looking like a really sleek and updated version of a table layout from 1995.

A designer who isn’t a total amateur will see these problems and start asking him or herself how they can spice up the design. The answer becomes graphics! Flat graphics! Unskilled designers will go the lazy route, which again is something flat design makes very easy and tempting, and throw in some icons from Font Awesome. If they’re a little more advanced they’ll create their own icons in different sizes. They’ll be flat as well though. Nothing but shapes. When done badly the icons end up being oversimplified and become meaningless. Luckily, any designer worth his salt will know that mystery meat navigation is always a huge no-no and include text along with any graphic that is meant to be interacted with. When a designer is a little more advanced they’ll go with a style of flat graphics that incorporate more than a single color and look like a cross between an illustration and a shape. This is great and can work well depending on your audience and brand personality but for some reason flat designers will often choose to use iconography and flat graphics exclusively. This is a huge mistake. Photography is a useful tool in design and it shouldn’t be sacrificed for the sake of completely and total flatness. Page after page feature large areas of empty space filled only by a solid color becomes boring fast and is, in most cases, a totally inneficient use of space.

As designers we’re always trying to strike a healthy balance between form and function but flat design tends to tip that balance way too far in the direction of form. I like flat design. I’ve been making use of it in a lot of my designs for the past six months or so. But I don’t go completely flat because it always causes issues for usability and, quite frankly, I think it looks incredibly stale and boring. A better route would be to incorporate certain elements of flat design in your work. Rather than focusing on going fully flat, focus instead on the use of color and shape. You can bend a square to look like a flat shadow thus giving it some prominence on a page (very useful for sidebar navigation or some buttons). Don’t remove your gradients, just tone them down. A 2% – 5% difference in a color’s shade in a gradient makes it look flat but still sticks out ever so subtly. Use real images! If you’re trying to sell something please remember that your customers aren’t going to buy your product because of how flat your website is. They’re going to buy because of the very well understood rules of marketing which go hand-in-hand with good design. Sometimes you need a picture of a persno to draw someone’s eye to an important piece of information. Do not let the purpose of your design get lost in your pursuit of perfect adherence to the principles of some design trend.

Ancient civilizations have written countless texts on the importance of balance and moderation. From Plato to Buddah and even Chairman Mao – they knew too much of a good thing is bad. So be cool and quit overdoing it with the flat design, okay? It’s starting to look boring and you’re looking lazy.

Design, Web design, Web development

« It isn't the Climb, It's the Plateau Symlinks on OS X - Just a reminder »