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.
> 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.
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.
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.
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.
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.
I created these: http://shoutkey.com/excavate, http://shoutkey.com/modify in quite a short time. I could have paid $5000 for a professional design, but it would be (let's say) 20% better. For my project, it doesn't make sense to pay $5000 for 20% better design.
Where are you getting $5000 and 20% from? It would take a skilled designer no more than an hour or two to polish that up. I mean, you switch from all-caps title text to regular case - why? YOU could polish that up and make it look immensely better with maybe 15 minutes more work and thought.
I already don't like to-do apps, but I wouldn't even download one that didn't look fun, interesting, new and beautiful. Simple as that.
The $5000 and 20% were just illustrative. I'm not going to polish it up, because I decided to go with the second design.
You don't seem to like it but I think it looks quite good. Majority of people who've seen it liked it as well, but you can't please everyone of course.
> 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.
> The trend seems to be moving away from realism in design, not skeuemorphism.
Yeah, exactly. Even if you don't simulate the look of paper (e.g.: texture), if the design functions like paper, it's skeuomorph just as well.
> 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.
I think the reason is we have a native-digital generation that doesn't benefit from the connection to real life objects anymore. Those designers are all on their 18's.
For instance, the recording app on iPhone features a VU meter. How many people buying phones today have seen a real VU meter?
Faux leather and textures in and of themselves aren't, but using a faux leather texture on a notebook app to make it look like a real notebook certainly is.
skeuomorph is a physical ornament or design on an object made to resemble another material or technique. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal,[1] or a software calendar application which displays the days organised on animated month pages in imitation of a paper desk calendar.[2]
Simulated woodgrain on automobiles is a skeuomorph, such as this station wagon which uses no actual wood construction
Same Wikipedia article: "Functional input controls like knobs, buttons, switches and sliders are often careful duplicates of the ones on the original physical device being emulated."
The save button being a floppy disk (which is no longer used), or a sheet of paper to represent a document (which may or may not ever be printed to an actual sheet of paper) are skeuomorphs by this article's defintion.
Except the save button isn't, itself, a floppy disk, it's just got a floppy disk icon on it. The floppy disk or paper iconography are not "functional input controls" themselves. They are laid upon UI chrome which is likely skeumorphic to some degree, but the icons themselves are not examples of skeuomorphism.
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.
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.
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.
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. :)
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.
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".)
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.
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.
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.
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.
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.
His argument is that "the button" has no depth and therefore is not perceived as a button.
My argument is that the bright color makes it stand out without using depth (or rather, using depth in another dimension than Z), and that it's the checkmark icon that might make it feel non-interactive (checkmarks feel more like feedback than action, even on checkboxes, where it's the box itself that makes it register as actionable). A "login" or "proceed" label would have worked, or as an icon, something giving sense of proceeding further, like a play or fast forward button would have worked better in conveying the sense of action. Still, the structure of the UI makes it clear that this is a two-field form and that the third item means "go ahead", which creates a cognitive dissonance with the "feedback" feeling of the checkmark.
Right, and I think the key part of envex's statement is "by now". Meaning that in this stage of history, the ubiquity of pseudo-3D graphical interfaces means people are able to pick up on the subtler affordances of flat design. And as you say, the bolder colors and flow help, but even with that I don't think this sort of design could have worked 10 or 20 years ago.
It's sort of like how art went (very roughly) from realism to impressionism to abstract art. People got used to the meticulous accuracy of paintings, and so artists cashed in on that cultural context to start getting abstract.
People get UI mechanics enough now that a huge rectangle with monochrome iconography is all you need to convey "clickability" to the average user.
* How about colour blind people? Shades imitating 3D still could be perceived and interpreted correctly, yet "bright colours dimension" doesn't work anymore.
* Calendar icon above the form might imply that I could see the calendar without logging on (quite handy feature, btw). But I don't know if it's clickable just by looking at it. Does it need to be blue to be clickable? Are all clickable items blue in this app?
* "Bright colour" convention as clickable is also confusing. Blue is clickable in this app, but another app might decide that red is clickable. And the green. And all shades in between. Seriously, I don't want to put any mental effort just to find a button to click.
* "icon [...] giving sense of proceeding further". That' dangerous as well. Are we going to have a convention here? Or leave it to creative souls to define the "sense"? And let ordinary people guess what the designer meant?
Yeah I know, design is a serious topic and hard to get right... :)
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.
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.
I saw you post one of your designs earlier in this thread and I disagree. I don't think it looks good. It looks like you opened Photoshop and laid something out in 5 minutes with no regulars for usability, originality, or a nice- looking color scheme. It sort of looks like you we're going for a look the the iPhone app Clear, but I can guarantee the makers of Clear, Real Mac Software, spent in an enormous amount of time on their app. You're pulling this $5,000 out of nowhere. Surely you can find a designer for much less for your basic todo app. I can hire a programmer in India for less than $10 an hour to implement a design of mine. That doesn't mean I should because the code will most certainly suck. You will never succeed by bring generic and average, which is what you seem to be aiming for. If you're not willing to put in the time and money to build a great app, some of your competitors are.
Well, I think the cost / value ratio for that design is very good. Right now I'm trying to finish the app, use this design (which I think definitely above average for Android), and then polish the design or perhaps completely redesign it.
> I disagree, people say my flat designs look great.
Lots of people would also say otherwise, simply by virtue of them being flat. They look like stunted half designs, lacking the the visual cues and polish that make application UX intuitive and understandable.
Yes, but the point is that I created a decent-looking design for a very low price. I could have spent $5000 for an amazing-looking design but that wouldn't be economical.
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, more economical thing to do. But there are of course situations where B) is better, for example, when the 1% improvement will result in $1M increase in profits. (A = flat design, B = non-flat design.)
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
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.
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?
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.
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.
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.
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 ?
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.
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.
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?
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.