Principles of Flat Design

http://designmodo.com/flat-design-principles/

by SmeelBe • 13 years ago

139 67 13 years ago

designmodo.com

There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.

sksksk3• 13 years ago

It seems to me that a lot of articles about flat ui contrast it with skeuomorphic design, which misses the point.

In all the examples, even though the visual design is "flat", there are many cases where it's still skeuomorphic...

See the pen and rubbish bin here: http://dribbble.com/shots/947749-Task-app/attachments/107085

The calendar here: http://dribbble.com/shots/917819-iPad-Calendar-Login

And the flat representation of a piece of paper here: http://dribbble.com/shots/962125-Filetypes

They're all flat, yes, but it doesn't mean that they aren't skeuomorphic

gbvb2• 13 years ago

Do you have good examples of true 'flat' design? I fear that if we are too flat, will it endup becoming an abstract entity that needs explanation on what that is meant to be? I thought the ones you point out seemed like good examples of not too abstract kind. :)

sksksk3• 13 years ago

I think all the examples are examples of true flat design, the graphics and such are all flat.

If you're talking about a skeumorphic free design, then I think they'd be extremely difficult to find, and that's not necessarily a bad thing. Refusing to use something purely because it's a metaphor to something in the real world seems somewhat counter productive.

One example of a skuemorphic free design is this calculator app: http://www.acqualia.com/soulver/

supercoder2• 13 years ago

Yep, you're spot on. The Flat UI 'style' can be as skeuomorphic as you want.

Using the term 'Flat UI' makes sense but I think it comes back to this misuse of the word skeuomorphic. Needs to be labeled as Gloss / Rich or something instead.

kunai4• 13 years ago

Ornamental, perhaps?

Razwiss2• 13 years ago

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

There is a difference between an icon and a real skeuomorph design. How would you represent a pen without drawing the shape of a pen otherwise ?

Skeuomorph is, for example, faux leather on the header in iOS notes http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone...

supercoder2• 13 years ago

No, faux leather isnt skeuomorphic.

The bookshelves in iOS's iBooks app are. But these could easily be drawn in a Flat UI 'style' and still skeuomoprhic style.

So rich textures != skeuomorphic

sksksk3• 13 years ago

> There is a difference between an icon and a real skeuomorph design. How would you represent a pen without drawing the shape of a pen otherwise ?

I wouldn't; personally I don't think there is anything wrong with using real world metaphors to make a point.

The trend seems to be moving away from realism in design, not skeuemorphism.

I think that having rendered textures that emulate leather became a trend in the first place because of high resolution screens; having some intricately designed texture was a great way of showing off how amazing the screen is.

Now that high resolution screens are the norm, there is no need to show it off, which is why the flat ui trend is emerging.

killercup• 13 years ago

Exactly. "Real" flat design is more like the difference between animated toggle switches and plain checkmarks to show that something is enabled. (I guess checkmarks are more like a typographic convention than a "real world object".)

runjake• 13 years ago

I think you're confusing iconography and skeuomorphism in your examples. Skeuomorphism is more about simulating an environment, primarily through textures and colors and thus the experience. In the examples you give, the ideas are more iconography.

adregan• 13 years ago

I tend to agree with this line of thinking. The icons are becoming solidly ideogrammatic. They express the idea and are no longer literal — similar to Chinese characters or Kanji. For example, east 東, which is the character for sun 日, in the branches of a tree 木. The character is literally an image the sun rising, but it represents the idea of cardinal direction. The icon for floppy disk no longer represents the act of writing to a floppy, but it does represent the idea of saving.

wittysense4• 13 years ago

Flat Design is a great discipline which has history in older, more popular disciplines. I believe it's fair to say "flat" has much growing to do, but it comes close to breaking with the traditional metaphor of print design. Obviously newspapers and magazines do not have leatherwork or fabric textures either: This is what makes flat design its own, it is a break from the metaphors of Print, not just skeumorphism. Skeumorphism is just one technique like the brush stroke.

That said, no one is really talking meaningfully about what makes flat its own discipline. You keep talking about all the points where flat intersects with one albeit ubiquitous technique. Talk about ANIMATION. Why does animation seem like a structural component of layout in flat design? Layering, microcosm, harmony, semantic colors, "pageless".

You guys just keep talking about one technique which is getting boring because it devalues these incredible designs which need true analysis.

wittysense4• 13 years ago

You also have to discuss the technological backdrops behind each discipline. Think of how different it is today from the original creation of movable type.

Flat design is coming out of a new era in DIGITAL typography. We are limited by bits, not by physical objects like with print. Many techniques of these disciplines are outcomes of our solving conceptual, logistical and even physical problems with the discipline. Talk about this, not just: "don't these two look cool, and they look different from that." Muddied, unclear thinking...

I almost want you folks to stop trying to grope and race for the "first" on this. You're irresponsible coming up with titles just to claim the philosopher's hat when you're not doing the historian work necessary to start talking about first principles. Who are you? What authority do you have to declare first?

Seeing correlation isn't enough to declare first principles. We need an Einstein of Flat Design.

skeletonjelly• 13 years ago

Principles of Flat Design? Make it...flat? What else is there? I skimmed through the article, just seems like examples.

wittysense4• 13 years ago

Yeah, lots of data, no information, or rather, very little information. Agreed.

RivieraKid8• 13 years ago

What I find great about flat design, that as opposed to non-flat design, it's 5x less work while being similarly pleasing. That means that I don't have to hire a designer for my applications – I can create a reasonably good design myself.

Of course, you still need taste and experience to create good-looking flat designs, but the point is that with flat design, you can iterate much more quickly and you can materialize your vision more quickly.

wittysense4• 13 years ago

Please don't defend laziness. That's a subjective point anyway.

RivieraKid8• 13 years ago

My comment had nothing to do with laziness (I'm quite lazy, but that's irrelevant here).

anonyfuss2• 13 years ago

As far as I can tell, this is the real argument behind flat design -- that developers who aren't designers can produce something they think looks good and works well.

It doesn't. You still need a designer.

RivieraKid8• 13 years ago

> It doesn't. You still need a designer.

I disagree, people say my flat designs look great.

Even if one can produce only average looking flat designs, it may be a good idea to do that, because flat design has a high cost / value ratio.

prof_hobart• 13 years ago

Apple's rather tacky overuse of it in recent years has given the whole thing a bad name, but the current trend for totally flat design goes (in my view) far too far the other way.

Skeuomorphism isn't simply a binary thing. There's all manner of different ways represent the real world, and different degrees of doing it.

Using some general attribute of real-world objects (e.g a shadow) is quite different from simple switch toggle to represent an on-off option, which is again quite different from a photo-realistic lightswitch to represent the same thing.

The "almost" flat design that is mentioned at the bottom may be a step back in the right direction, but as it stands I find most totally flat design pretty poor from a usability point of view.

rytis2• 13 years ago

What I don't like about flat design is that suddenly there's no way to distinguish between interactive (clickable) and static (non-clickable) items.

Looking at this: http://dribbble.com/shots/917819-iPad-Calendar-Login

There's no indication that the blue button is interactive and the calendar icon is not. Both are bloody flat! I have to hover mouse pointer to find this out on the web app. Even worse in mobile - I have to try clicking stuff just to figure out if they are "clickable". I find it very frustrating.

envex• 13 years ago

I think by now it's safe to assume that the button under the form would be the clickable element.

workbench2• 13 years ago

What do I press if I can't remember my password?

Pxtl• 13 years ago

I use a WP7 phone and it seems to have a very good convention for flat design - if you put a brightly colored box around something, it's clickable. A white box? Text. If it's text sitting against the black background? Not clickable. Not much wiggle room for design there, but it's consistent and familiar.

workbench2• 13 years ago

The terrible writing about this trend is a complete embarrassment to the whole discipline of design.

You can tell few of these "writers" have had a proper design education and just learnt everything they know from tutorials.

ollysb• 13 years ago

As a developer who's taking an increasing interest in the design of the products I work on I'd love to read some of the material you'd be exposed to in a proper design education. What are the bibles of design that students are generally exposed to?

mtgx• 13 years ago

Most of those designs remind me of Android's Holo design style:

http://developer.android.com/design/get-started/ui-overview....

10dpd• 13 years ago

Who originally popularized flat design?

josefresco• 13 years ago

I'm sure there are solid examples of brands using flat design prior, but if you're looking for a mass-popularization event I would submit Microsoft's original "metro" UI.

dualogy• 13 years ago

Whereas I would submit Microsoft's "Windows 2.0" [1] UI..

[1] http://www.guidebookgallery.org/screenshots/win203

joeblau• 13 years ago

I was actually going to write something like this, but then I realized that I'm not a designer and I have no idea what I'm talking about. Thanks for putting this together; I know a lot of people dislike flat, but having a cohesive work guide is handy.

jsemrau• 13 years ago

When he woke up in the early evening, he thanked me for bringing him the Kraft products, and now he says he won't eat anything that's not entirely two-dimensional. "Ich bin ein Flatlander," he piped, as he cheerfully sifted through hard copy of the bug-checked code he'd been chugging out. Karla made disgusted clicking noises with her tongue from her office. I

DanBC• 13 years ago

I wonder how many people on HN have read Microserfs?

eddieroger2• 13 years ago

Hopefully a lot. Coupland is a great author, and Microserfs got me in to him in a big way.

zwieback• 13 years ago

For people like myself who grew up with Windows 3.1 flat design is good on phones but on my computer monitor I want a button to look like a button. I want tree views, drop-downs etc.

However, I don't want fake wood veneer on anything. It was a bad idea in the fifties, sixties and seventies and it's bad idea to bring it back.

I'm sure it's just what I'm used to but I think the flat design crowd has years of learning and experimentation until they can catch up with the usability of "traditional" desktop GUIs.

nollidge3• 13 years ago

I think this raises a good point - flat design is not applicable in all situations. It's got to be something like a handful of large inputs on one screen. If you're depicting a large hierarchy of domain objects or a complex tax form or something, then a spacious, blocky, bold style is not suitable.

ziko• 13 years ago

I like flat design but probably for the wrong reason.

I had some luck in other business but decided to pursue a new career in software development a while back. Basically I knew nothing about professional design but I was an avid follower of startups/new technology/trends and so on.

I love it because it's clean, simple, looks nice and it's easy to produce. I need nothing more.

kunai4• 13 years ago

I'm quite sick of the hordes of Flat Design submissions clogging the HN frontpage.

The issue here is that skeuomorphic UIs are commonly mistaken for "realist" UIs. Any application that resembles a calendar, whether it has fake leather stitching or not, is a skeuomorph. Any presentation software that creates slides that look like old 35mm projection slides, is a skeuomorph. A trash bin is a skeuomorph. A word processor that emulates a sheet of paper, with margins, is a skeuomorph. Any application that emulates an address book is a skeuomorph, even if it doesn't look like a real book. Its functionality is still skeuomorphic.

Flat design does not change skeumorphism; it merely reduces the textures used to their bare essence. It's impossible to do away with skeuomorphism completely, because many of the things we actually do on our machines correlate with things we do in reality.

And whoever proposes such a change is grossly out of touch with reality.

Personally, while I think ornamentation like how the old OS X Aqua UIs looked and Windows 7's Aero, is dated and clunky, the newer interfaces of OS X and Windows 8 desktop mode actually reach a fair point between flat and ornamental, bar the awful Address Book, Game Center, Notes, Reminders, and Calendar in OS X. It's folly to reduce everything to completely flat; it's a usability nightmare and I've seen power users struggle with some flat web designs on a tablet.

The solution is to keep light gradients, light drop shadows, and some gloss. Just enough to keep a good level of usability, while not adding excessive ornamentation.

The current Flat UI designs are just designer laziness. Just take a look at Google's marvelous implementation. We can do better.

Much better.

RivieraKid8• 13 years ago

That's not necessarily laziness. You can create quite-good-looking flat designs in 10 hours. But it takes you 100 hours to create an amazing-looking non-flat design. That's what's great about flat design: cost / value ratio.

Let's say you can A) spend 1 hour implementing some sorting algorithm or B) spend 10 hours implementing a 1% faster sorting algorithm. Most of the time A) is better thing to do and it has nothing t do with laziness. But there are of course situationd where B) is better, for example, when the 1% improvement will result in $1M increase in profits.

kunai4• 13 years ago

The thing is, the flat designs created in 10 hours don't look good.

Google's semi-flat interface that they're pushing out everywhere is good design. It's clean, simple, but also contains sufficient visual cues to be usable at the same level as 3D designs.

Any design that's worth a damn will take a while to create, regardless of whether it's flat, semi-flat, or 3D.

JoeKM• 13 years ago

> The solution is to keep light gradients, light drop shadows, and some gloss. Just enough to keep a good level of usability, while not adding excessive ornamentation.

I agree intensely with this. I have always preferred designs without excessive ornamentation, but at the same time I like a little gradients and border radius. Border radius gets me especially.. you can have flat design with border radius -- but you don't need a border; just use border radius by itself. The kind of flat design that is all about sharp edges and boxes is so ugly.

crisnoble• 13 years ago

Perhaps you forgot to read the very last section, titled "Almost Flat Design"

>A style more designers tend to agree on is “almost” flat design.

>In almost flat design, the basic theme of the flat style is used but some effects are added to the design scheme. Buttons, for example, may contain slight gradients or drop shadows. Designers typically pick one effect and use it exclusively in an almost flat project.

>This style allows for a little more flexibility than some of the rigidness of the no effects thought behind flat design. Designers like it because of the added depth and texture. Users like it because the style is a little less sharp and can help guide proper interaction...

It seems that many flat designers would agree with your proposal to keep "just enough" ornamentation.

nchlswu• 13 years ago

This distinction is frivolous.

It's a writer just seeking to milk the whole "flat design" thing even more by categorizing small variations as a whole design movement. It's no coincidence that a company selling a kit has the most blog posts dedicated to it. flat and almost flat design have the exact same aesthetic.

Moreover, pegging designers to a trendy aesthetic is ridiculous.

nishantve12• 13 years ago

You decide Flat : http://i.imgur.com/KSQXCMS.jpg Not Flat : http://i.imgur.com/embNQbN.jpg

Flat wins for me

ceejayoz• 13 years ago

Frankly, they both look decent to me.

nishantve12• 13 years ago

Non Flat looks 4% more chaotic to me . The only drawback with Flat I believe is the buttons look more like labels .

bennyg2• 13 years ago

Non-flat easily takes the cake in this comparison. The shadow on the flat design is not even remotely accurate for a shadow, it makes me feel like my world is spinning. The buttons, besides actually looking clickable, make me want to click them. As far as design in general goes, it also looks like someone made the buttons worse on purpose for the non-flat version, which is why you probably like the flat version better. Why is there a black stroke? Why is the black text not the same dark blue that the rest of the layout uses? On both designs, why is the checkout button not lined up with the gray edge or the item text?

31reasons• 13 years ago

Is Flat Design good for people of all ages and skill level ? I am wondering if such usability testing has been done ?

Isn't depending too much on colors cause color blind people to get confused ? How would you distinguish your app from other apps in flat design, won't everything look the same eventually ?

wisty• 13 years ago

I think the debate between flat and skeuomorphic design is a false dichotomy.

Flat de-emphasis everything. You just have to know to click on the light grey text, because obviously it's a slightly different color to the dark grey title text. It's a pain.

Skeuomorphic emphasis everything, even the stuff which is just eye candy. And there's a lot of eye candy. It's both a pain. And it looks trashy (unless it is done really well).

Good design emphasises the stuff you can interact with. It doesn't look quite as classy as flat, and it doesn't "pop" like skeumorphic, but it's a hell of a lot more useful.

Principles of Flat Design

Related Stories