Design and Development

Flat Design: Some Good, Some Bad…

By

Filed under: Design Inspiration, Web Development.

First off, I need to say that I am a proponent of flat/minimal design when done correctly. Websites that are loaded with 3d skueomorphics remind me of something from the by-gone severely bloated flash era.

Glossy Skeuomorphic Button

Glossy Button: gentleface.com

When creating things with a flat design aesthetic, we need to always remember to focus on our users – not on a popular design trend. So if that gradient or dropdown-shadow doesn’t help the usability factor, get rid of it… but don’t get rid of a subtle gradient or some animation just for the sake of flatness…

Flat design reminds me of the fashion industry a little. Every year a new fad comes out that everyone must wear to look cool and be popular. If you don’t wear what’s trendy – you are outta it man!

Flat Design has been raised almost to the popularity of a fashion trend like Ray Ban Wayfarer Sunglasses. It’s basically “hip” right now to have a flat website. According to new research, 1 out of every 10 designs uploaded right now to Dribbble are tagged as “flat-design”.

So what is all the hype about? Is Flat Design actually better, or is it just the latest web fad?

As you may well now, Flat Design is not really a new style – it was actually popularized by the Swiss in the 1800’s. Microsoft was really the first major company to port all their software over to the flat design style.

Google, while somewhat always being semi-flat has pushed this style further with their new apps – maps, google+, etc.

Now even Apple has followed suit with ios7 and potentially their next release of Mac OSX. In short many major companies from Evernote to Twitter to Rdio have redesigned their apps/programs in a flatter more minimal design.

I’m sure you’ll agree that while most of them are really clean and easy-to-use there are definitely some cases where the designer made the app unnecessarily hard to use because they were stuck in the “flat design mindset”.

So what exactly are the dangers of Flat Design that we as designers need to be sure not to get caught in?

Flat Design: The Bad

1. Be wary of trend following

Have you noticed how everyone and their brother are copying many of the different flat design trends around the web? One great example is the long-shadow trend currently taking Dribbble by storm.

Camera App Icon – Long-shadow

dribbble.com/shots/1174175-Photo-printing-icon

Ios7 inspired Icon – Long-shadow

dribbble.com/shots/1213491-iOS-7-declination

Cassette Tapes – Long-shadow

dribbble.com/shots/1151843-Cassette-Tape

Date App Icon – Long-shadow

dribbble.com/shots/1144218-Date-App-Icon

Let’s analyze the trend for a moment. First off, I thought we were done with gradient and drop-shadows? Oh, wait I forgot – that shadow is flat… or something like that.

Kidding aside, in the case of the calendar icon the long-shadow helps draw your attention to the date – so in this case you could argue that it is more usable.

But how about the cassette tape? That horrendously long shadow does nothing to help your user, it is simply used for trend’s sake. I for one would argue that it actually detracts from the beauty and simplicity of the overall design.

Ian Taylor rightly says that rather than just flattening our designs for trend’s sake, we need to focus on making things simpler and better. We want our work to be a joy to use.

“I don’t think comparing _exactly_ the same interface in a glossy vs. flat war is the way to do it. You have to approach visual problems differently when working with flat design elements, so a one-to-one translation from glossy to flat is doomed. I find that when working with a flat aesthetic, my solutions themselves have to get simpler. ”

Ian Storm Taylor

2. Lack of usability: Don’t make things difficult for users

From our earlier article on Flat Design, I want to quickly highlight one common usability error on flat websites.

“Where it can turn ugly is when a designer takes this style to an extreme and removes all user-guides and suggestions from an element. You can see this on some websites where it’s hard to tell what is a button, or a clickable link.

The worst example would be a button to buy a product, except there’s no way to tell it’s a button unless you actually start clicking around. When you hover or “press” the button, nothing happens – there is no visual indication that something is happening or will happen in response to your action.

This is very frustrating to users – it’s just all around bad usability.”

In reality, Flat Design can be harder to do correctly because of the lack of 3d space that was traditionally used to give contrast and affordance (indication of an item’s function).

In the case of buttons you no longer know what a button is by looking for a “bulging-blue object” like was traditionally used on websites.

Skeuomorphic Button

willmoyer.com/skeuomorphism/

If the designer does his job correctly, you will know a button is a button because of its shape, placement, color and icon.

The real problem is when other things on the page begin to look clickable because they are very similar to the buttons – people start clicking around and get very frustrated when nothing happens and they can’t easily do what they need to.

As designers, we should always be working hard to make our apps/products more usable for our customers and work on meeting their needs better.

Listen to what Wells Riley has to say about how we need to stop focusing so much on how something looks, and more how it solves problems and meets needs (help people do what they need to, and don’t get in their way).

Less Aesthetic, More Design

Talk about “Flat Design” has exploded over the last two or three weeks. It’s almost become as much of a meme as Skeuomorphism became a few months ago. There’s a critical piece of this discussion missing – that’s got to stop.

“Flat” and “Skeuomorphic” aesthetic, not design.

Aesthetic (how something looks) properties do not wholly describe the overall design of a thing. “Design” as a descriptor represents the process, intentions, and execution of an idea, and aesthetics makes up a very small part of that. To distill our discourse on design down to the aesthetic choices is seriously disturbing – it discredits the most important considerations we as designers must make in order to create good design.

Useful Design:

I’ve got a new metric we should use to evaluate our work. It’s not a new idea, but it happens to be the most practical metric by which to evaluate any product you’ll ever make, and the only one that really matters to your customers:

“Is my design useful?”

Think first about the problem you’ve set out to solve. Think about implementation. Think about utility. “Easy to use” and “beautiful” are awesome goals, but ultimately mean nothing if a product isn’t useful to begin with.

As UX begins to mature from just being a vague buzzword, more visual designers need to consider usability and utility concerns in their work. Before you post that shot to Dribbble, think about who will appreciate your hard work more – a handful of anonymous designers, or the customers you’re creating the design for?

Design is a form of problem solving. Let’s never forget that.

  Less Aesthetic More Design – Wells, Riley

3. Stale design from overuse

One of the problems that arises from the use of a more minimal design style is designs that are not carefully planned will become very stale and boring.

Flat design can be done very beautifully and in a way that is super user-friendly. But when someone tries to create an app and they simply copy ideas from another flat app, or don’t put enough planning and thought in the design, things will quickly go downhill.

Most of what I am referring to in terms of stale designs is overuse of colors like peachy red, light green and purple; as well as countless icons with the long shadow design that all begin to look the same after a while.

Your app is not going to win any usability awards if you simply run all your graphics through a flatten filter. And please, don’t just grab a red or green from another app you like and run with it – colors have meaning, and you need to think through what you want your app to communicate.

4. Flat design can easily go wrong

When you design something with a skeuomorphic background texture like wood, it is fairly simple to design a visually stunning app – just look at WhitePage as an example.

Whitepage: Example for Skeuomorphism

http://dribbble.com/shots/917118-Pages-Overview

However, if you took away all the wood textures, shadows and such, that app might look very stale and un-designed.

Flat design done correctly is actually a bit harder that a similar skeuomorphic design.

Remember in flat design you don’t have the liberty of using drop shadows or eye-popping gradients to add visual cues and interest. This means your core skills as a designer will really begin to show – or especially the lack thereof.

Things like grids, colors, typography and animations all become much more important in a flatter more minimal design.

So, if bevels, gradients and shadows are a matter of opinion, then what makes a good design? Whether you’re going to use a flat aesthetic or not, user interface is about the planning. I believe flat design simply makes it easier to recognize a great design, since there’s less clutter between the design and how it works.

The Flat Design Aesthetic – Shawn Adrian

The Good with Flat Design

1. Focus on content: Strip away the bloat

One of the best facets of flat design is the focus on stripping away everything that is unnecessary. Rather than seeing what we need to add to a design to really make it pop, we are beginning to think more about core usability and building things for usability rather than strictly for beauty.

Don’t think for a minute that I am against beauty – the problem is when beautiful design is overemphasized and how the product functions is more of an afterthought.

Shawn Adrian has a great quote on stripping away bloat until your design is perfected:

Form Follows Function, Embracing Flatness

That same 20th century minimalist movement in architecture yielded some great design quotes like “form follows function” and “less is more” that we still talk about today. Similarly, I love this quote from sculptor Michaelangelo when asked about how he created the iconic David statue.

“It is easy. You just chip away the stone that doesn’t look like David.“
~ Michaelangelo)

In user interface design, it’s often stripping away things that really brings an interface to life. The team at 37signals is notorious (and very successful) as a result of applying this principle to their products, like Basecamp. In the world of flat design, less really is more.

In order to achieve the flat design aesthetic, we designers must focus on what things do, rather than what they will look like. This is key, and the reason why wireframing is so important to the design process.

The Flat Design Aesthetic – Shawn Adrian

What Shawn is saying is that your core job as a designer is really to make sure your product/design is well-designed and helps your users quickly do what they need to do.

“My experience is that flat or “realistic” doesn’t matter. What matters is that hierarchy is evident at a quick scan and that users can find their way to the next actionable item easily.”

– Caroline Keem (writer)

I have noticed many blogs and content-driven sites that have been redesigning their site stripping away all the bloat, the unnecessary content (even getting rid of ads) so that people can quickly read the article they were looking for. This is a great trend!

Medium is a great example of stripping away bloat and creating an experience for their readers that makes reading articles on their site a joy.

2. Flat design has caused a storm in the design community

Unless you have been hiding under a rock, you probably have read at least a few of the 5000 or so articles that have been written on flat design, skeuomorphism and similar topics over the past 6 or 7 months.

In fact, you may even be sick and tired of this whole trend and wish things could settle down a bit and return to normal.

But whether or not the “flat design aesthetic” is hear to stay, I am glad for all the community discussion and buzz it has generated. I have never thought so much about design principles, aesthetics, trends and usability in my whole design career.

The flat design movement has really caused many designers to stand-up and issue a call for a more back-to-the-basics approach to design. It’s a call to focus more on usability, function, simplistic beauty and innovation.

Designers have begun once again to look to people like Deiter Reims for inspiration of good design. Some have read books like Mark Boulton’s “Designing for the Web” on core design priciples. We are even seeing quite a resurgence of animation design that was squelched for several years because of the unpopularity of flash.

All things considered, this flat vs. skeuo debate has been very helpful to me, and I believe to the design community as a whole – even if we do have to wander through countless long-shadow designs on Dribbble every day.

Conclusion

In conclusion, Sacha Grief has a great reminder to us as designers:

The Limits of Flat: This is not to say that the flat style is without its own problems. First of all, like any design trend, it will probably be abused by many designers jumping on the bandwagon without thinking their design choices through. But where the main victim of realism is merely good taste, taking minimalism too far can have serious consequences on usability.

As designers, will we be able to resist the appeal of minimalism and keep in mind that the needs of users should always come before our aesthetic pursuits? If the way we handled the previous realism trend is any indication, users might be in for a rough ride…

What we haven’t had as much practice at yet is designing flexible, beautifully typeset responsive sites that adapt to various resolutions and environments. And we’ve gotten even less practice at actually coding them.

Flat Pixels – Sacha Greif

So let’s focus on useful design – like simplifying things, making the important content standout to users, and making our app/product/website work on every device and operating system; rather than getting completely lost in the latest and greatest aesthetic trend that is sweeping the shores of the design community.

Lastly, hear are just 3 of the many, many articles I have read on this subject that you may find helpful.

Join the discussion below, we'd love to hear from you!

  1. Dave

    Flat design isn’t the only fad with modern websites, tons of empty space, giant pictures, and cartoonish schemes are all the rage now too. I’ve seen plenty of old ugly scrunched up websites, but stripping things away until it’s just giant blocks of parallax pictures and things that look ambiguously like buttons or links or fields or text that are pencil thin and you’re not sure where the useful things are or what these glyphics icons do, we’ve gone way overboard since Google started adopting flat design in Gmail then Microsoft adopted it then Apple, the best skueomorphic designer there ever was, kidnapped it and sent the web and everything else into over-simplify-ville. It’s gotten so simple, spaced-out, and childish that I’m as turned off by it as the old ugly blocky websites from 10 years ago (and a lot of modern flat designs now look like blocky dialogues from 80’s computer programs).

    Reply
    • Caleb Mellas

      Thanks for your thoughts Dave. On the whole, Flat Designs are simpler, lighter, and easier to make responsive for websites. This is one of the big reasons designers are building sites this way.

      Reply

Leave a comment

  • (will not be published)