Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Flat Design Era

layervault.tumblr.com

Post reply on HN
Print view View original

61–70 of 99 posts

Re: The Flat Design Era

#61

Post by goldfeld »

dpark wrote: post #18
jhermsmeyer wrote: post #16

Earlier quoted context omitted.

The two most prominent buttons on the home page have subtle drop shadows and gradients. Google is actually a great example of restrained skeuomorphic design. If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.

For sure, Google doesn't seem to be headed toward "flatland", which was my point. Even Google, who seems to be clinging to "restrained skeuomorphism" uses flat, clickable elements in many places. I seriously doubt that they'd do so if their usability testing showed that users don't understand them. I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon.…

Plus mouseover generally goes in the opposite direction of responsive design.

Re: The Flat Design Era

#62

Post by goldfeld »

jhermsmeyer wrote: post #9
allang wrote: post #3

Earlier quoted context omitted.

Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear. As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface. That said, we probably will end up throwing it…

You are in good company: "According to various reports, when someone suggested to include a touch-typing tutorial in this intro as well, since many people did not know how to use a keyboard, steve Jobs simply said not to bother as those people would die out eventually." * http://orangejuiceliberationfront.com/theyll-die-out-eventua...

Define good.

Re: The Flat Design Era

#63

Post by pdenya »

goldfeld wrote: post #60
pdenya wrote: post #58

Flat design looks lazy more than anything. I appreciate the effort good design takes and sometimes it's best to just get something simple out there quickly but I'd rather see browser defaults than styled buttons that purposefully have no hover states and callouts that really don't call out.

Simple doesn't equal lazy. "A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing else to take away" --Civilization IV voice-over guy.

I don't mean simple is lazy in any way, I mean what I said: "Flat design looks lazy". Not having hover states for your buttons looks lazy. Not making it clear to users what pieces of the page they're meant to interact with looks lazy.

Re: The Flat Design Era

#64

Post by kirklove »

nonrecursive wrote: post #22

I can't help but feel like this is just the next obvious cycle in design fashion and as such it's not something to get so worked up about. "The Honest Design Age" strikes me as an absurdly grandiose term. I like the more prosaic interpretation, which is that certain graphical idioms have become so commonplace that in order to stand out visually, you need to do something different. Fashion. In a few years, designers w…

You nailed it. 100%. Perfect comment.

Re: The Flat Design Era

#65

Post by babesh »

allang wrote: post #3
jhermsmeyer wrote: post #2

If your audience is developers and designers, a pure flat design is great and will likely work well. But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland. On a side note, the vault and picture frame image on the main homepage for layervault.…

Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear. As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface. That said, we probably will end up throwing it…

No, they are born every minute of every day. They are known as kids. Check out kids using iPads and iPhones. Compare that to Android. Kids can figure out how to use iPads and iPhones really quickly. Very, very doubt the same for the Metro or Android for that matter.

Re: The Flat Design Era

#66

Post by jfoutz »

ianstormtaylor wrote: post #6

I agree with people arguing that flat design's run the risk of not giving users enough information to know what are buttons and what aren't. That is one of the biggest challenges to using a flat aesthetic. It's easy to take for granted how much information gradients and drop shadows provide to the user. Which is why I've appropriated your style of combining flat UI with drop shadows for depth. The drop shadows add ju…

> Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one.

That button can still be really good. It can be like reading pages of Hemingway longing for all the adjectives. When they show up, they're such a treat. The girl in the red dress in Schindler's list is another great example. It blows the flat aesthetic, but gives mountains of importance.

Re: The Flat Design Era

#67

Post by jhermsmeyer »

dpark wrote: post #18
jhermsmeyer wrote: post #16

Earlier quoted context omitted.

The two most prominent buttons on the home page have subtle drop shadows and gradients. Google is actually a great example of restrained skeuomorphic design. If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.

For sure, Google doesn't seem to be headed toward "flatland", which was my point. Even Google, who seems to be clinging to "restrained skeuomorphism" uses flat, clickable elements in many places. I seriously doubt that they'd do so if their usability testing showed that users don't understand them. I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon.…

> I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon. Even Google only uses them for mouseover.

Put your cursor in the search field. More shadowy goodness there. Click on your avatar in the upper right, the popover has a prominent (too prominent IMO) drop shadow. It's everywhere.

As to mouseover, I agree it's for confirmation. But if we need to confirm functionality with drop shadows and gradients - what message does that send about usability?

One thought is that perhaps we should have the drop shadows and gradients there to begin with.

Re: The Flat Design Era

#68

Post by iclelland »

UnFleshedOne wrote: post #20
bbx wrote: post #17

Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Putting some text on top of it requires to be readable on both colors, and everything in between. Buttons can have depth without gradients. Check the ones on http://www.facebook.com . A flat background color, a subtle 1px light on top, a subtle 1px shadow on the…

"A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around." This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)

No, this is completely different. Modern. Revolutionary.

Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)

Re: The Flat Design Era

#70

Post by ricardobeat »

goldfeld wrote: post #57
ricardobeat wrote: post #38

Earlier quoted context omitted.

That's affordance , not skeuomorphism. From Wikipedia: a skeuomorph is "an element of design or structure that serves little or no purpose in the artifact fashioned from the new material, but was essential to the object made from the original material" The gradient and shadow on buttons are not just ornamental, they serve the purpose of conveying depth, and consequently that they afford being pushed (also, real-world…

Gradients and drop shadows on buttons are usually modelling solid color real world buttons; design uses an imaginary light source coming from above to mimic the way our world usually has a lamp or the sun shining up there.

That's precisely what makes them affordances: gradients and shadows are modelling real-world clues, not mimicking design features.
Post reply on HN