“In this article I’m going to talk about what flat design is, review what other designers are saying about it, and offer some tips on how to achieve it in your own designs.” I give you one attempt to guess which ‘design aesthetic’ the next version of OSNews is inspired by. And yes, we will eventually get it done.
It’s like Bauhaus. You’ll either love it. Or hate it. Or be indifferent to it. It’s like skeuomorphism.
Some people are colour blind. Some people are tone death. Some people are design agnostic. Good thing I’m not colour blind or tone death. Life is good.
I think you mean “tone deaf.”
Anyway, I look forward to the new OSNews design. I still kinda miss the old look-and-feel.
I can’t believe I meant it twice. Twice.
Maybe he was remembering the band Bauhaus, and that put him in a kinda morbid mood 😉
Reminds me of the paintings of Ellsworth Kelly. See “Blue Green Red,” 1963:
http://www.peterfreemaninc.com/exhibitions/ellsworth-kelly-small-pa…
or “Red Yellow Blue III,” 1966:
http://www.artsconnected.org/media/5e/7e/e09d71d4ba8fed4a2dba539a06…
I would say these styles come and go in cycles, but I cannot really think of a time where clean, simplistic design was “in,” not by choice anyway. It always seemed that with increasing computational power, we also got increasingly complex graphics and effects without regard to the overall look of how these things fit together. The result is a hodgepodge of ideas and effects with varying levels of detail (depending on when the icon/UI element was created) with little consistency from one app to the next. This is the first time that I can remember where mainstream designers are focusing on minimalist design by choice.
Love it, hate it, be indifferent. So it’s like… everything
To be honest, I think I’m firmly in the middle.
I don’t like skeuomorphism, but I also find flat design to be unpalatable.
I suppose what I’m looking for is more along the lines of my GTK+ and Qt themes. Subtle use of subdued gradients, shadows, and curves to provide an interface that’s consistent and non-distracting but, at the same time, doesn’t remind me of how much work I’ve put into making Motif applications like DDD and Tk applications like git-gui less off-putting.
I have to agree. Light and depth are babies I would rather not throw out with the skeomorphic bath water.
It is especially useful in a windowing interface to have some idea of depth.
Also flat interfaces are falsely seen as non-skeomorphic. Just swapping real world objects and textures for real world signs, posters and screen print style flat tones are equally skeomorphic.
I was going to post this but you’ve phrased it better than I ever could.
I cannot stress enough how good subtle shadows are as allowing the viewer to differentiate different objects on the same pane.
Plus Facebook is easily one of the worst examples of design done well (flat aesthetics or otherwise). It’s crowded with no clear grouping and even has some content duplicated. Plus there’s a confusing mismatch of hover-over, click through, pop up and drop down interfaces that leave me lost whenever I’m trying to perform something new. It’s the kind of site that relies on it’s users committing common actions to muscle memory.
What I don’t like is vast open areas of unused white space, i.e. Microsoft’s webpage. Their site is functionally terrible at the moment (Though, it is also aesthetically pleasing).
It’s really hard to take the article’s content seriously when the design of speckyboy.com is so bad. Here are the problems:
* Three jarring banner ads before the article content
* The entire right margin is devoted to ads
* There’s some sort of social widget that pops up in the bottom-left-hand corner and then disappears after it loads – never to be seen again.
I’m not opposed to sites having ads, but designers especially should understand how jarring misplaced ads can be. Case in point: the banner ad at the top is actually well-placed and doesn’t distract from the content at all.
I think I could forgive the other 2 banners if it weren’t for the right-hand margin being littered with useless crap. It’s so distracting that when I got to the first image in the “What Is Flat Design?” section, I thought the picture was another ad. That’s not good.
The icing on the cake has to be that the site doesn’t reflow text and resize images correctly on my phone (Firefox 17, Android 4.0.4).
Very good article! I’ve always been pro-flat and anti-all-kinds-of-3d-effects when it comes to UI design, since I started using computers (Win98). Nicest looking interface I have seen in any program, on any platform, is in ‘Ableton Live’ ( http://www.ableton.com/en/live/ ). I’d like to replicate THAT look’n’feel systemwide… Well, my current toolkit theme on Linux desktop (QtCurve) is quite close…
Ohhh, if OSNews gets an overhaul, maybe you could change its name to Thom’s Blog?
I like my current interfaces, why is everyone now going flat?!
Hmmm.
*opens the zipper to her hoodie*
I’m not flat!
Hmmm.
*looks at his beer-muscle*
Me neither!
I’m doing flat-design from the start of my computing experience, which is dated back to the early 90’s. I never really cared for the “pseudo-3D” interfaces, actually, and I always thought of it as of something ridiculously complicated, obfuscated and skeumorphic. It’s funny to observe that sudden move away from that kind of “3d-like” UI concepts that many companies are starting to make. It’s like “hey, look how simple this interface can look like! We’ve invented this cool, new trend called [flat]!”. Uhm, no, not at all. It was actually flat at the start [but because it was hard to create an imitation of 3D reality, not for the practical reasons of being flat], but then you destroyed it by trying to imitate our 3D reality. I never understood why exactly I would want to have 3D desktop, 3D “windows” and other “3D” stuff in a 2D environment, which is actually about getting things done in virtual, not “real” [in a sense of a 3D reality] way.
Not it’s just a big trend to go flat. Same could be observed with things like tablets. We had them long before Apple produced its first one. Phones – same thing.
First off, I’m not here to claim that one set of design principles is better than another. Well executed Baroque can be as pretty as well executed Bauhaus and vice versa.
what I do taste in this article, however, is mindlessly espousing the virtues of the latest web design fad, as if it is the only defendable way for the future. Which is poppycock. Design trends have come and gone and they will continue to come and go. Some have been “prettier” and more “usable” then others, but one thing is clear, they all went from new and fresh, to established, to old and tired. This “flat” thing will be no exception.
Can we tone down the emotions on this new trend a bit? It is just a look, not a technological breakthrough. No need to “coerce” people into the “flat” camp.
It isn’t pretty when people are a priori divided into the groups of desirable believers (people of believed importance):
Some target audiences will gravitate toward different aesthetic styles. Architects, designers, and fashion conscience audiences might embrace flat design,…
and the others into the pariah class (people who can be and are simply ignored as inconsequential):
while children, clowns, and some others might enjoy playful textures and colors.
The trend has started and two years from now the web will be “flat”. My prediction: In four years “flat” will be old and tired and the first to make it “3D” after that will be trendy and innovative.
It’s the basic principle of humans-get-bored-of-things-very-easily.
For some reason, after Winamp, no one has bothered trying to write anything designed to be skinnable.
Still use Winamp 2.81 … got the .exe backed up in the cloud.
Hm, but they did bother – remember WindowBlinds from Stardock? Also audio players, Sonique or Kjofol, both much more skinnable than Winamp; the entire shape & form of the UI could be changed in them…
…but, I guess, by then humans-got-bored (or maybe it meant that ugly skins are too easy to make?)
As I understand it, Stardock is a major hack. In this case, it would be Windows not being designed for skinning which is the problem.
Yes, ugly and unusable skins are very easy to make, but I would like to think that if operating systems were designed to be skinnable (ie, including official tools to do it), that would give professional user interface designers to a stable and thus more economically viable platform to work on.
Winamp3 tried to start it off with their Wasabi framework which could allow you to define window shape, but also script the behaviour of winamp itself. It was more than just new pictures in the way that Winamp2 skins were.
Windows is designed to be skinned, MS just doesn’t provide any mechanism to do this, and put artificial roadblocks in place to keep you from doing it.
Why? I have no idea.
Maybe a leftover from how MS forbid OEMs to customise Windows images too much? (IIRC, in the first half of the 90s some PCs even shipped with OEM-specific shell replacements) To maintain consistent trade dress of Windows?
Though that still could be forbidden to OEMs while leaving the option open by default to users… OTOH, MS didn’t try very hard to block it.
Actually, I think it’s a leftover from the days of Plus! for Windows XP, Microsoft’s brief foray into selling themes the same way many modern games sell skins as DLC.
Edited 2012-12-20 01:52 UTC
In general I find the current trend towards ‘flat’ design akin to everyone buying their furniture from ikea. It might work for some, but too much just looks cheap.
Personally, I think Call to Action Buttons should somewhat lift out of the page. I think last.fm site a few years ago was spot on for me.
I think everything can be overdone too much, I hate the new VS2012 and when I have to use it, I will be skinning it back to the 2008 style.
Several years ago, most computers were unable to display all the textures, shadings, and 3D-ish looks of OS’s and applications, because the graphics chips and cards included in computers were simply incapable of doing so. I remember all the hoohaa over Aero Glass in Windows Vista, as most people’s machines were unable to show all the tricks the OS could do with windows, so most people had to turn off those effects, as I did, or their computer would bog down.
Now we have graphics cards that are quite capable of doing all these effects, but the design gurus have now declared all that to be passé and have moved on to this “flat” aesthetic that any old netbook or desktop from 2004 with a $30 graphics card could display with ease.
I happen to like it when I can look at my desktop and see which window is in focus just by detecting the slight shadowing that is shown when a window is in front-focus. Can’t do that with the flat look, you have to click or touch the pane first to make sure what you type or do will show up in the correct window. This is a step backwards in my opinion, but I’ll go with it. Doesn’t mean I have to like it, though.
Shadows can easily be employed in a falt interface. Without shadows, w windowing interface is effectively unusable, 3D or no.
I manage fine thanks.
Sure, designers can still use those shadows, but they don’t in this new “flat” paradigm. Any type of shadowing or 3D effect like that is considered old-hat and passé now. Visual clues like that are no longer considered useful or stylish, and in fact they I hear them derided in almost every podcast I listen to nowadays. It’s ridiculous.
And in Windows 8, the only time you can have a whole bunch of windows on-screen at the same time, stacked, sized, and arranged for use just like you like it, is in Desktop mode. Not in Metro, where they can only be side by side, pre-determined sizes, and only a couple of windows at that. If you are using both Metro and Desktop apps, you are out of luck if you want/need to have them both on-screen at the same time, as you will have to jump back and forth between Metro and Desktop mode. Unacceptable.
As with a lot of styles, everything goes to the edges of usability if employed to the extremes. SkM is one of the extremes, as is going totally flat. In a way it’s like with fashion designers, sometimes they tend to be extreme to shock or raise attention, but that doesn’t mean everyone adopts their style (fortunately). Why should be any different with UI styles? Options should be provided, and an option somewhere in the middle of the two extremes would always be nice. If missing, don’t be surprised to get really mixed opinions.
I was talking to my sister about “Who the fuck would buy that”, as someone who wanted has made clothes she told me that more main-stream shops tend hire the designer to incorporate parts of it into new clothing lines.
It is all a bit above my head for someone that generally wears Jeans and Check Shirt of some description for the last ten years.
I think Flat Design is another design aesthetic, and it’s one that is gaining currency on tablets and smartphones (Android’s dialog buttons, nowadays, don’t have bevelling or gradients, for example), but not that much on the desktop. On a small device you need to maximise space, and minimise the use of the processor for unnecessary things, while on a desktop (or laptop) you have plenty of processor cycles left over and the 3D effects make the desktop look less bare.
The effects were a product of faster processors from the early 90s on, and better graphics cards and monitors; before Windows 3.0 and, I think, Mac OS 8, desktop UI design was flat. But after Windows 3.1, Windows UI design got a bit flatter – the bevelling got more subtle and the text lighter, and even recent versions of Mac OS X have scaled back the Aqua effects a bit. Flat design takes this to its logical conclusion, and it can look elegant but it can also just look bare, or reflect a lack of imagination.
Its from the original Mac. Or the Mother of all demos. Or Thoms head. Take your pick.
Wide ties, narrow ties. Blather, rinse, repeat.
Not much more to say
I hated it when everyone was going to glass-see-through-style, like when the iPhone and Windows Vista were released. Whenever I said it’s stupid and not good usability, most of the folks disagreed and said it looks nice and modern and I’m old fashioned.
Now everything turns to the exact opposite, and I’m still not convinced. Though I actually prefer the flat design over the glassy design from an aesthetic point of view, I think it’s still not more usable than the, let’s say, Windows 95 design.
There is a reason why things should have 3D-borders. With a flat design, you cannot do “toggle buttons”, that remain in a pressed state. Most people simply use a darker color for that. But this can only be really distinguished when there are at least 3 buttons on the screen. If there is only one or two buttons, the color alone is not sufficient to show which button is activated.
In my opinion, Windows 95 style is still the best. It does not need to be plain grey, and it does not need to be 16-color icons, but clear lines, solid colors and 3D-borders on objects are still the most usable interface.
FLAT:
http://i558.photobucket.com/albums/ss26/Neville007/Explorandoundisc…
VS 3D:
http://www.stcarchiv.de/stc2002/img/teradesk1.png
😀
And if we go back further, we get [n]curses and other text based user interfaces. I kind of miss those days, so I’ve started making myself learn emacs.
Good operating system with a decent text editor. Super flat.
I regularly use the Debian (and Ubuntu) installer.
It still has a text interface (yes, GUI versions are available): http://www.freesoftwaremagazine.com/files/nodes/1774/figure2.jpg
Does that count ?
Arghhh, why do people use JPEG (and not PNG) for such image?!…
I post compering of FLAT vs 3D
(pay attention that on second screenshot you have “3D” buttons instead of _yesterday_ FLAT!
)
Tribute to Introversion UK indie game maker…