Flat design is great for mediocre designers like me | Hacker News Reader

Flat design is great for mediocre designers like me

whoo.ps

168 pointslibovness67 comments

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.

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.

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.

I think it's here to stay in some form. If you think of UI's as a language, it seems a natural simplification of that language. Simplification is a normal and natural thing to happen to a language.

I disagree. Language is about expressiveness, simplification in language is about reducing expressiveness which is neither normal nor natural, nor a good thing. Basically, thinking of UI as a language in order to make sweeping statements about simplification is a really bad idea.

I think we're talking about simplification in different contexts. Overtime symbols get simplified. That doesn't restrict the manner in which those symbols may be combined. Nor does it mean that, people won't embellish when they feel the need.

http://en.wikipedia.org/wiki/Hangul

I have by my desk Henry Dreyfuss's Symbol Sourcebook [1972 edition]. It contains symbols he collected over a lifetime - he died in '72. Rococo is the fad [Perlis says it comes before rubble]. Flat design dominates when clear communication becomes more important than signalling via fashion. There's a reason stop signs don't have gradient fills.

http://www.amazon.com/Symbol-Sourcebook-Authoritative-Intern...

http://en.wikipedia.org/wiki/Henry_Dreyfuss

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.

Its not his site, he just wrote the tweets.

fwoosh

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

This is difficult to understand.

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

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

I see this often and I completely agree.

> "get out of the way and let the user focus on content. E.g. https://dispatch.io

There's just not enough content on that site - The 'learn more' button barely explains what the service does. Even a few decent screenshots can go a long way.

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.

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.

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.

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.

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.

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.

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.

exactly ;-)

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.

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.

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?

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.

First thing I thought of was Xaw.

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.

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.

<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>

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

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

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.

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.

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.

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.

"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.

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.

What about hyperlinks? Menus? OS X dock icons? Terminals? Folder icons? Highlighted text?

I don't think the affordance of raised buttons is really such a crucial issue.

I agree with hyperlinks and probably menus & the terminal (unless you consider it a representation of the old school console terminal PCs of the 70s and 80s) having no real life equivalent. However, folder icons would be symbolic of a real world example though. Even a dock is sort of a facsimile of having things laid out in front of you on an actual desk.

The OS X deck is 3D since Leopard, but it used to just be a rectangular array of clickable pictures. With little triangles under the "open" ones.

Humans adapt. People who grew up with console terminal interfaces find them more usable than point-and-click interfaces. The assumption that common people will be all confused and miserable if you take away the bevels from buttons seems kind of unimaginative.

HackerNews is pretty flat and still usable to me.

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

Except that flat designs aren't defined as eliminating depth cues. The simply do not rely on them so much or demand additional cues. The Flat Design Church does tolerate depth, and many "flat designs"include some notion of planar layout. It's just that depth cues aren't supposed to be primary cues in a flat design.

And for good reason. Depth cues are often very subtle and increasingly UX needs to be good even when looking at a dim screen under bright sunlight. The advent of mobile is demanding designers start going high contrast, and so flat design is an obvious choice. It is, ultimately, a phase. People have reverted to the simplest solutions for more visually rugged UIs, but we're starting to see a new and more nuanced set of visual grammars emerge.

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.

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.

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.

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.

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.

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.

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

The other nice thing is that there's no requirement to sign up for anything. You can view all the lessons here:

http://hackdesign.org/courses

Thanks so much for the tip! Greatly appreciated.

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.

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...

I would recommend the book Design for Hackers.

"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)

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.

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...

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.

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

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

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

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

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

Fixed, thanks!

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.

Reply on news.ycombinator.com