Flat design is great for mediocre designers like me

http://whoo.ps/2013/05/12/flat-design-is-great-for-mediocre-designers-like-me

by libovness • 13 years ago

168 67 13 years ago

qompiler• 13 years ago

Yet picking the right colors still seems to be a big challenge for some people. I have seen application use combination of highly saturated red, brown and green.

flyosity• 13 years ago

I wrote the tweets featured in the article and thought I'd chime in with a few more thoughts...

I think flat design is inclusive design, that is, it's not hoity-toity, impossible-to-execute, beautifully 3D-rendered and textured expensive design. It's simple and clean, sparse and understandable. In the most simple application of "flat design" trends, it's essentially one step up from a wireframe: pick a color scheme on some color scheme website, download a 200-pack of glyph icons and BAM you've moved from an abstract wireframe to something a little more sophisticated and approachable. Friendly colors, nice spacing, good typography, and you've got something.

Yes, I am saying it is quicker to execute a "flat" design than it is to execute a skeuomorphic, highly-stylized, deeply-textured design. A product manager or developer without a lot of design experience could probably use some flat design trends and one nice font and put something together that doesn't look like horse shit. I don't think that same product manager could spend an equal amount of time trying to mimic a beautifully-crafted and textured interface and have anywhere near the same luck. Using flat design trends gets you to some sort of product design quicker than if you're spending 20 minutes crafting a 5-color gradient to emulate the perfect lighting of a semi-glossy aluminum rod for your button texture.

No, I am not saying that by simply using "flat" design trends you are able to bypass all processes and thinking surrounding good whitespace, grouping, contrast, alignment, typography, usability, etc., but because "flat" design elements are graphically simpler it lets the content of the design show through and not be muddled by textures or skeuomorphic execution flaws, so your design message is clearer and cleaner by default.

Non-designers or "mediocre designers" seem to be flocking to these flat design trends the same way they flock to the excellent Bootstrap framework: because it's a simple way to jumpstart a product design out of a blank canvas or browser window into something that, even when starting out, looks pretty decent.

lucisferre• 13 years ago

I suspect a lot of people will start to attribute bad designs to flat design because of its lower barrier to entry. There are likely to be a lot more people who are less than mediocre, in both visual and interaction design skills, applying it to poorly crafted and planned out sites and apps, and sadly the thing that will stand out the most is that they used a flat design, not that they simply designed poorly.

libovness3• 13 years ago

I'm the author of the blog post so I'll weigh in too :-)

I agree with you @lucisferre, and for this reason I think the flat design trend will become obsolescent at a faster rate than most design trends usually do.

I also think that animation is going to become "the next big thing" and will be the primary differentiator between "meh" and "wow" apps.

brudgers2• 13 years ago

Your post is remarkably clear despite your inability to choose a typeface or set kerning. Using standardized symbols is the way we communicate.

Flat design is a dogma, but nearly so dependent upon revelation and faith. A five colored gradient emulating perfect lighting of a semi-glossy aluminum rod is carving saints into the tympanium - semiotics for the initiated and confirmation of one's devotion to sacred values. The word "perfect" gives the language game away.

ben336• 13 years ago

Its not his site, he just wrote the tweets.

jameswyse2• 13 years ago

Ugh kerning, this xkcd comic says it better than I ever could: http://xkcd.com/1015/

peterwoo• 13 years ago

This is difficult to understand.

subpixel• 13 years ago

What I appreciate about so-called flat design is that's low-key by nature, and by not calling attention to itself (no bezels, few gradients, border colors, etc.) it can - when used correctly - get out of the way and let the user focus on content. E.g. https://dispatch.io

An example of the opposite is so-called good design, where skilled designers set out to make a visual statement and, in the process, obfuscate the content. E.g. this site, where every article is more than half-buried by a ginormous image: http://www.fastcodesign.com

jarjoura• 13 years ago

What is dispatch.io? I don't want to give them access to my Google account without any idea of what that site is.

adsr• 13 years ago

I agree, but an application is not all content, it's also a machine, and the interface needs to be intuitive to use and separate it self from the content.

If depth, texture and so on can be used to convey functionality, but isn't in the name of fashion, then it's form over function IMO.

workbench• 13 years ago

99% of "design" blog articles on the web are embarrassing, and this "flat design" nonsense is really making it show.

Definitely something to be said about a proper design education vs loud mouthed Photoshop tutorial monkeys ramblings.

duopixel2• 13 years ago

What really happens when you have flat design is that you can't hide your mediocrity behind layers of eye candy.

Assume that you give both a carpenter craftsman and an amateur instructions to build a table. You only want solid blocks of wood, nothing fancy. Would you be able to tell them apart?

It's all in the fundamentals, I doubt a mediocre designer can develop a coherent visual system on flat design.

arvidjanson• 13 years ago

But, you do realise that you just proved the authors point right? Sure, you would obviously be able to tell the difference, but I'm pretty sure that the difference would be a lot smaller than if you had requested table with ornaments and wooden inlays.

libovness3• 13 years ago

exactly ;-)

duopixel2• 13 years ago

The difference is smaller, yes. However, when you make simple things of poor craftmanship (in design, code or anything) you can't fool anybody. That's a good thing too.

tptacek2• 13 years ago

Since people who pay money for software overwhelmingly don't care about design quality (look at the most important systems they interact with every day --- VB.NET line-of-business applications, dumb terminal text interfaces, Powerschool --- to see why that is), anything that makes it simpler for application developers to get an app out the door without feeling like they have to wait until it's blessed by someone with an MFA is an unalloyed good thing.

I haven't played with flat design yet (my crutch for bad design is Bootstrap), but this is as compelling an argument for it as anything else I've read.

glhaynes• 13 years ago

In the examples you list, the people who actually interact with the software aren't likely to be the ones who are making the purchasing decisions, though. My guess is that this is one of the main reasons why "enterprise" software UI is so bad.

So, there may not be a good argument for software developers to produce good design for these customers (awful design has gotten them this far, after all!) but it doesn't mean that design quality isn't still super-important in some other areas, too — namely those where the purchaser is actually the user.

tptacek2• 13 years ago

I think Patrick Mckenzie could tell you a thing or two about how important web design was to closing direct-to-consumer sales for a web application.

And that's consumers. Most people don't build applications for end consumers; they build tools for businesses. Businesses pay to have their problems solved. They're human beings and will swoon over beautiful pixels like anybody else, but if your application effectively solves their problem, that's what they're going to care about. If you're entering a crowded market, design might be a negative/positive differentiator... but, then, don't enter crowded markets; there's a universe of business problems nobody has effectively solved with software yet.

ethnt• 13 years ago

PowerSchool if anything is an underutilization of data. It would be easy to show trends in grades, what grades a student would need to pass, etc.

Though, I will admit, it looks pretty horrid.

commieneko• 13 years ago

No. Flat design is like singing a solo, live.

angkec2• 13 years ago

Mediocre designer here. Yes I had to use Bootstrap and glyph icons because my 2-man workshop has to publish software. We use flat design of course, since we really don't know what else is suitable. Any designers care to point out a path that we can make ourselves go past the stage of following what's easy and trendy? Some books to recommend or online courses would be great.

dokuda2• 13 years ago

I recommend http://hackdesign.org/

They have collections of resources and articles curated by web designers and front-end developers focusing on user interfaces and design theories.

These aren't tutorials, but materials for you to read, learn, and apply to your designs and interfaces.

asciimo• 13 years ago

Thank you! This is some quality stuff. I just signed up for the weekly lessons.

angkec2• 13 years ago

Thanks so much for the tip! Greatly appreciated.

gte910h• 13 years ago

Forrst is continually talking about all this stuff: http://forrst.com

I'm an iOS dev, and I hang out there to get better at design. I'm often in a better place to effect change, and it's always nice to know how to help a designer fix one or two things specific to mobile they may not know.

deno• 13 years ago

Why am I not subscribed to Forrst? Oh, right. They’re missing an RSS feed.

Let’s fix that: http://pipes.yahoo.com/pipes/pipe.info?_id=4fa38ba24cb2d5459...

notdan• 13 years ago

I would recommend the book Design for Hackers.

gdubs• 13 years ago

Simple is hard. If someone can't tell the difference between a beautifully rendered minimalistic design and something generic that just happens to lack eye-candy effects, that doesn't lead to the conclusion that flat is easier to accomplish; it just means that person can't tell the difference between good design and bad design. A trained eye will pay attention to proportion, balance, color relationship, (a)symmetry, etc.

From Bauhaus to Braun, Frank Lloyd Wright to I.M. Pei, architects, artists, graphic designers and engineers have been studying and applying these concepts. Lost on many, but still perfectly valid.

ericb3• 13 years ago

Flat design is the wood-paneled car of the design world. Design goes through trends. In 10 years, I don't know what websites will look like, but I doubt flat will be it.

Flat design is bad because it gives up visual cues that convey information in return for conformance to a monotonous style. Sure, it is simple to design in, but trading off visual cues is user-unfriendly, and the future is in more user-friendliness. Style does matter. Flat sites offer a limited design space to explore before they seem repetitive.

KirinDave2• 13 years ago

"Flat design is bad because it gives up visual cues that convey information in return for conformance to a monotonous style."

So make a flat design that doesn't give up these visual cues? All these complaints are just farts in the wind, and I only single your post out because it was pithy. Not only is the term "flat design" horrendously vague and difficult to pin down, but the very idea that there is some kind of absolute scale by which to judge design–clearly implicit in your judgement–should raise a few eyebrows.

Ultimately what matters is communicating to the user how to interact with the product in question. Everything else is marketing and will be subject to trends. But you could make a delightful and useful skeuomorphic interface or a delightful and useful flat interface or any one of a million variations on those spectrums and many others.

ericb3• 13 years ago

The cues are a result of depth. You have given them up, by-definition when you use a flat design.

edit: To enumerate some of the affordances you lose and problems:

-What is a button? What can I interact with? A raised button used to be a good cue.

-Is that toggle on or off (depressed or no)?

-What is clickable?

-What is important? Closer things used to be more important.

-Is this a "thing" or a word? Shadows used to hint at this.

-Is this a banner or a button?

-What did I click? I don't even know!

Non-flat designs work because they use real world metaphors to build a natural vocabularly that is almost universally understood by our common experiences living in a 3D world. Now, perhaps you can re-define this naturally shared design vocabulary in the flat world. But the point is, you are redefining something which people intuitively already know, and when you have to teach users your interface, that is never as friendly as when they know how to use it intuitively.

dgabriel• 13 years ago

I'll take flat design over liquid buttons and shoddy, poorly thought-out skeuomorphism any day. You may hate it, but it's going to be ubiquitous for a while.

r00fus• 13 years ago

Not sure I agree with your analogy, though I agree with the gist.

I'd say flat design is like Ikea furniture - functional, sparse, nothing ornate, relying on basic colors and shape for differentiation. Very mix-and-match.

I agree with the author - flat design is like having a good UI framework that's widely used (say Microsoft's WFC in the 90's and iOS in late '00s) - low barrier to entry, and the differentiators can be applied once a core success is won. The platform will re-invent, or a new platform will show up, and your UI will look stale after a while, but you do get a couple of years to worry about functionality first.

ericb3• 13 years ago

In thinking about it--my analogy could be better chosen, especially since skeuomorphism (which many, hold is the opposite of flat design) is embodied in wood-paneling. The idea was that totally flat things will look dated at some point. My point was that it will look "dated" but that irony is not lost on me.

I don't personally think Skeuomorphism is the opposite of flat design, I think of it more as "realism" as the opposite pole. Skeuomorphsim is less about perspective and distance and more about textural materials or design artifacts.

BaconJuice• 13 years ago

Hi, great read. Just FYI your link to the "The Noun Project" is broken.

libovness3• 13 years ago

Fixed, thanks!

AbraKdabra• 13 years ago

OK, this is the perfect thread to write a rant about flat design that I'm keeping to myself since a while.

I hate (maybe hate is not the word, but I think you get it) all these webs/apps with this type of design (not every web, there are great designs out there), think about the last couple of years, we were struggling with javascript to make round corners, all these type of fancy effects, shadows, etc., and now, that we have the opportunity to deal with those things natively and make some GREAT graphic, full eye-candy webs, the trend is flat, simple colored divs... are you kidding me?

</rant>

Thanks.

qu4z-22• 13 years ago

Personally, I say thank god y'all grew out of your "bling" phase. Shadows are pretty up there with "Site Under Construction" bulldozers for me.

Also, I don't think flat design precludes rounded corners?

fuzzywalrus• 13 years ago

I think this article would have been better worded "Flat design is great for lazy designers like me."

This isn't exactly limited Flat UI, anytime you're grabbing set of premade content, be it Designmodo's flatui, Bootstrap, a word press theme, a JQuery plugin, you're outsourcing levels of your design.

You can leverage these in your favor. Sometimes this is the best choice and will enable you to focus on other aspects of the project or extend onto functionality without having to reinvent the wheel and other times you're a lazy designer.

Flat UI is just a rejection over-design, part of a cycle of design that loops. We'll edge back towards more over-design until we hit the reset button again.

dredmorbius2• 13 years ago

First thing I thought of was Xaw.

cygwin98• 13 years ago

<rant> I thought programming community is so bad for being trend-chasing, UI designing is even worse, which is basically a fashion industry. Come on, why does everything has to be flat, it's not the DOS era in 80's, you have access to gigabytes of video memory and extremely powerful graphics cards.

Can't stand the group-thinking of designers. Where is your creativity? </rant>

austenallred• 13 years ago

I think the ramifications might be slightly deeper than that; it allows you to see if you really will get traction behind your MVP before you bust your balls over the UI, without having your site look like Craigslist.

HackerNews is the perfect example; very simple, flat, but doesn't get in the way, and allows you to use the site in a very functional way. You can add the flashy design intricacy later if you want, but I hope that most people won't. I love the simplicity.

miguelrochefort• 13 years ago

Flat design is there to stay. Google Glass, as well as most embedded UI, rely on chromeless, flat design.

camus• 13 years ago

yeah , what what said ugly before now is just flat,hey !

qu4z-22• 13 years ago

Well, flat is fairly objective. So it has that advantage. I've seen lots of ugly designs that were not flat. I also don't find flat designs ugly, whereas you do, if I'm understanding you correctly.

MatthewPhillips• 13 years ago

Bad designer here. The style of UI components doesn't make me a better designer. I'm a bad designer because I don't know what to put on a page. I don't know where things should go. I can do a sales/information page because there are a thousand of those out there to copy off of. But when I do something remotely original I'm at a loss. Rounded vs. square corners doesn't factor into this at all.

msutherl• 13 years ago

I think it's worth noting that "flat design" isn't just design that's flat, or a trend toward simplification, it's a very specific design aesthetic featuring a certain palette of muted primary and secondary colors, use of color rather than depth or texture to differentiate functions, wide, open sans-serif typefaces, large areas of color with a lot of "white space" around the text, chunky icons, and a set of design patterns that work well with that style.

In fact, graphic design has been more or less flat for its entire existence up until the Xerox Star.

I'm happy to see this article calling it out for what it is: a crutch. Good design is still 90% typography and flat vs. skeuomorphic is a pointless argument of taste perpetuated by people who don't know their design history.

stevenkovar• 13 years ago

At the end of the day, good design solves a problem.

Style is an expression placed over the solution for the sake of identity and brand equity.

Many designers seem to chase a style before truly understanding the problem—let alone the solution to that problem.

mkandler• 13 years ago

Flat design allows a designer to focus on more of the important aspects of a design in early stages. Choosing the right shadow, gradient, texture, whatever is certainly NOT going to make or break your design. Jack Dorsey has said that the best products disappear to the user, and I couldn't agree more. It doesn't matter as much what a button looks like but more what it does and that the design of that button accurately conveys what that action will be. A good design (flat or not) will bring users in but it will not retain them on it's own; functionality is clearly what makes all great products thrive. Flat designs are inherently lighter and cleaner, which allows users to focus on functionality and user experience. So then, for a novice designer, why bother trying to make complicated skeuomorphic designs that can potentially distract users? (Anyone who has tested an early product with users will know what I mean by "distract" - all those times when a tester spends most their time giving you feedback on colors, font sizes, and layouts of a design instead of the overall utility of the product.)

The thought that always comes to my mind regarding this topic is how "delete" buttons are implemented. Often times a classic "trash can" icon is used to depict the delete action. But how often do you ever see an old aluminum trash can anymore? Not very often. Eventually this icon will make absolutely no sense to users (like an old proverb that your parents used to use). However, the word "delete" will likely be around for a lot longer. Using that little trash can icon might save space and help to improve the overall aesthetic of your site/app, but it will never be as clear as a big red "delete" button.

pxlpshr• 13 years ago

The maturity of a designer can be measured by the importance they place on fads vs. solving problems.

ChrisNorstrom• 13 years ago

"What I lack for design skills, I make up for in being good at organizing information" - You

You just described the purpose of flat design. The point is for the information to stand out more than the style of the elements. It's substance over style.

Some people (bad designers) take it to an extreme and make everything square and you can't distinguish what's clickable. Some people (bad designers) took skeumorphism to an extreme and arranged information incorrectly, gave everything a leather texture. Some people (bad designers) took web 2.0 / Social to an extreme and put 20 freaken social widgets on every page, neon backgrounds, and glass like shiney buttons on everything.

A design style should not be defined by the worse executors of that style. (same goes for plastic surgery)

dredmorbius2• 13 years ago

Amazing how design memes iterate. This looks so much like the Athena Xt widget set.

http://xawm.sourceforge.net/XawM.gif

asperion• 13 years ago

Don't forget flat design is based on Swiss style design and needs a grid with good rhythm to execute. According to Windows 8 UX team, animation is also key. See http://msdn.microsoft.com/en-us/library/windows/apps/hh77907...

Flat design is great for mediocre designers like me

Related Stories