Principles of Flat Design
designmodo.com
There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.
designmodo.com
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.
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.
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 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.
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.
And on typography -- there's no full usage of font weights, so how am I going to tell if something's a heading, or application interface text?
I'm no professional designer, but I've had enough experience with applications and design that I know what good design looks like.
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.
>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.
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
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/
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.
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...
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
Simulated woodgrain on automobiles is a skeuomorph, such as this station wagon which uses no actual wood construction
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.
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.
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?
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.
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.
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.
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.
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... :)
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.
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.
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.
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.)
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.
Flat wins for me
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.
http://developer.android.com/design/get-started/ui-overview....
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 ?
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.
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.
You can tell few of these "writers" have had a proper design education and just learnt everything they know from tutorials.