Linked by Thom Holwerda on Mon 17th Dec 2012 22:59 UTC
Graphics, User Interfaces "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.
Order by: Score:
Bauhaus
by kwan_e on Tue 18th Dec 2012 00:12 UTC
kwan_e
Member since:
2007-02-18

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.

Reply Score: 3

RE: Bauhaus
by Chris_G on Tue 18th Dec 2012 00:41 UTC in reply to "Bauhaus"
Chris_G Member since:
2012-10-25

I think you mean "tone deaf."

Anyway, I look forward to the new OSNews design. I still kinda miss the old look-and-feel.

Reply Score: 5

RE[2]: Bauhaus
by kwan_e on Tue 18th Dec 2012 00:58 UTC in reply to "RE: Bauhaus"
kwan_e Member since:
2007-02-18

I think you mean "tone deaf."


I can't believe I meant it twice. Twice.

Reply Score: 6

RE[3]: Bauhaus
by RobG on Fri 21st Dec 2012 14:33 UTC in reply to "RE[2]: Bauhaus"
RobG Member since:
2012-10-17

Maybe he was remembering the band Bauhaus, and that put him in a kinda morbid mood ;-)

Reply Score: 1

RE: Bauhaus
by joekiser on Tue 18th Dec 2012 02:01 UTC in reply to "Bauhaus"
joekiser Member since:
2005-06-30

It's like Bauhaus. You'll either love it.


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.

Reply Score: 4

RE: Bauhaus
by l3v1 on Tue 18th Dec 2012 13:01 UTC in reply to "Bauhaus"
l3v1 Member since:
2005-07-06

It's like Bauhaus. You'll either love it. Or hate it. Or be indifferent to it. It's like skeuomorphism.


Love it, hate it, be indifferent. So it's like... everything ;)

Reply Score: 4

Comment by ssokolow
by ssokolow on Tue 18th Dec 2012 01:17 UTC
ssokolow
Member since:
2010-01-21

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.

Reply Score: 10

RE: Comment by ssokolow
by Chrispynutt on Tue 18th Dec 2012 11:35 UTC in reply to "Comment by ssokolow"
Chrispynutt Member since:
2012-03-14

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.

Reply Score: 5

RE: Comment by ssokolow
by Laurence on Tue 18th Dec 2012 12:55 UTC in reply to "Comment by ssokolow"
Laurence Member since:
2007-03-26

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.

Reply Score: 4

Comment by Drumhellar
by Drumhellar on Tue 18th Dec 2012 01:59 UTC
Drumhellar
Member since:
2005-07-12

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

Reply Score: 4

Hard to Take Seriously
by boxy on Tue 18th Dec 2012 03:12 UTC
boxy
Member since:
2011-06-20

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

Reply Score: 6

Flat
by l33tmmx on Tue 18th Dec 2012 05:26 UTC
l33tmmx
Member since:
2009-02-02

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

Reply Score: 3

Overhaul?
by remenic on Tue 18th Dec 2012 08:18 UTC
remenic
Member since:
2005-07-06

Ohhh, if OSNews gets an overhaul, maybe you could change its name to Thom's Blog?

Reply Score: 3

Please stop Flat everywhere.
by moondevil on Tue 18th Dec 2012 08:26 UTC
moondevil
Member since:
2005-07-08

I like my current interfaces, why is everyone now going flat?!

Reply Score: 6

RE: Please stop Flat everywhere.
by WereCatf on Tue 18th Dec 2012 10:23 UTC in reply to "Please stop Flat everywhere."
WereCatf Member since:
2006-02-15

I like my current interfaces, why is everyone now going flat?!


Hmmm.

*opens the zipper to her hoodie*

I'm not flat!

Reply Score: 7

RE[2]: Please stop Flat everywhere.
by zima on Wed 19th Dec 2012 20:03 UTC in reply to "RE: Please stop Flat everywhere."
zima Member since:
2005-07-06

Hmmm.

*looks at his beer-muscle*

Me neither!

Reply Score: 3

Comment by marcp
by marcp on Tue 18th Dec 2012 10:42 UTC
marcp
Member since:
2007-11-23

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.

Reply Score: 2

The more things change...
by r_a_trip on Tue 18th Dec 2012 11:07 UTC
r_a_trip
Member since:
2005-07-06

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.

Reply Score: 10

RE: The more things change...
by kwan_e on Tue 18th Dec 2012 12:06 UTC in reply to "The more things change..."
kwan_e Member since:
2007-02-18

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.

Reply Score: 2

lucas_maximus Member since:
2009-08-18

Still use Winamp 2.81 ... got the .exe backed up in the cloud.

Reply Score: 2

RE[2]: The more things change...
by zima on Tue 18th Dec 2012 20:05 UTC in reply to "RE: The more things change..."
zima Member since:
2005-07-06

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.

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

Reply Score: 3

RE[3]: The more things change...
by kwan_e on Wed 19th Dec 2012 00:04 UTC in reply to "RE[2]: The more things change..."
kwan_e Member since:
2007-02-18

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

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.

Reply Score: 2

BluenoseJake Member since:
2005-08-11

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.

Reply Score: 2

RE[5]: The more things change...
by zima on Wed 19th Dec 2012 19:58 UTC in reply to "RE[4]: The more things change..."
zima Member since:
2005-07-06

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.

Reply Score: 2

RE[6]: The more things change...
by ssokolow on Thu 20th Dec 2012 01:51 UTC in reply to "RE[5]: The more things change..."
ssokolow Member since:
2010-01-21

Maybe a leftover from how MS forbid OEMs to customise Windows images too much?


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

Reply Score: 2

Leaves me flat... (sorry, had to be said)
by terrahwk on Tue 18th Dec 2012 11:10 UTC
terrahwk
Member since:
2011-01-05

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.

Reply Score: 3

lucas_maximus Member since:
2009-08-18

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.

Reply Score: 2

It's about graphics cards
by wocowboy on Tue 18th Dec 2012 11:38 UTC
wocowboy
Member since:
2006-06-01

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.

Reply Score: 3

RE: It's about graphics cards
by Thom_Holwerda on Tue 18th Dec 2012 11:43 UTC in reply to "It's about graphics cards"
Thom_Holwerda Member since:
2005-06-29

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.


Shadows can easily be employed in a falt interface. Without shadows, w windowing interface is effectively unusable, 3D or no.

Reply Score: 0

lucas_maximus Member since:
2009-08-18

I manage fine thanks.

Reply Score: 3

RE[2]: It's about graphics cards
by wocowboy on Wed 19th Dec 2012 10:56 UTC in reply to "RE: It's about graphics cards"
wocowboy Member since:
2006-06-01

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.

Reply Score: 1

flat design
by l3v1 on Tue 18th Dec 2012 13:07 UTC
l3v1
Member since:
2005-07-06

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.

Reply Score: 4

RE: flat design
by lucas_maximus on Tue 18th Dec 2012 18:42 UTC in reply to "flat design"
lucas_maximus Member since:
2009-08-18

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.

Reply Score: 2

Suits small-format devices
by IndigoJo on Tue 18th Dec 2012 15:28 UTC
IndigoJo
Member since:
2005-07-06

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.

Reply Score: 2

Flat Design
by nefer on Tue 18th Dec 2012 19:06 UTC
nefer
Member since:
2012-02-15

Its from the original Mac. Or the Mother of all demos. Or Thoms head. Take your pick.

Reply Score: 1

Scientific Opinion
by fretinator on Tue 18th Dec 2012 21:15 UTC
fretinator
Member since:
2005-07-06

Wide ties, narrow ties. Blather, rinse, repeat.

Reply Score: 4

Garbage
by Lorin on Tue 18th Dec 2012 21:55 UTC
Lorin
Member since:
2010-04-06

Not much more to say

Reply Score: 2

Oh no
by Glynser on Wed 19th Dec 2012 08:55 UTC
Glynser
Member since:
2007-11-29

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.

Reply Score: 1

Comment by kovacm
by kovacm on Wed 19th Dec 2012 09:33 UTC
kovacm
Member since:
2010-12-16

“Facebook is the perfect example of interface trending towards flatness. Their major actions buttons still have a slight bevel, but lots and lots of the secondary actions are completely flat."


FLAT:

http://i558.photobucket.com/albums/ss26/Neville007/Explorandoundisc...

VS 3D:

http://www.stcarchiv.de/stc2002/img/teradesk1.png

:D

Reply Score: 1

RE: Comment by kovacm
by kwan_e on Wed 19th Dec 2012 11:16 UTC in reply to "Comment by kovacm"
kwan_e Member since:
2007-02-18



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.

Reply Score: 3

RE[2]: Comment by kovacm
by Lennie on Wed 19th Dec 2012 19:13 UTC in reply to "RE: Comment by kovacm"
Lennie Member since:
2007-09-22

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 ?

Reply Score: 2

RE[3]: Comment by kovacm
by zima on Wed 19th Dec 2012 20:01 UTC in reply to "RE[2]: Comment by kovacm"
zima Member since:
2005-07-06

Arghhh, why do people use JPEG (and not PNG) for such image?!... ;)

Reply Score: 2

RE[2]: Comment by kovacm
by kovacm on Thu 20th Dec 2012 09:21 UTC in reply to "RE: Comment by kovacm"
kovacm Member since:
2010-12-16

I post compering of FLAT vs 3D ;)

(pay attention that on second screenshot you have "3D" buttons instead of _yesterday_ FLAT! ;) )

Reply Score: 1

Survival of the Flattest
by phoudoin on Thu 20th Dec 2012 09:58 UTC
phoudoin
Member since:
2006-06-09

Tribute to Introversion UK indie game maker...

Reply Score: 2