Make the web "flat" with this bookmarklet | Hacker News Reader

Make the web "flat" with this bookmarklet

dev.hubspot.com

95 pointsafschwartz54 comments

I've got a problem with the way people are implementing this 'flat UI' style and I think it's leading to a disastrous usability nightmare!

Some of the 'design' concepts represented by drop shadows, borders, and text-shadows are about function, not (just) aesthetics and when you remove those functional parts of a layout you are left with a less usable layout.

Personally, I love the minimalism and rationalism in the design approach of Dieter Rams, who is (now) considered the father of the design style that Apple has made popular. I also love colour planar imagery (flat sections of colour) like vector illustrations and iconography.

The problem with how many people are implementing this flat style in UI is that we're letting go of valuable information that makes software and websites usable in the first place. This style works great for static pieces (like print, or screen graphics that don't change) and of course looks clean and gorgeous in non-functioning Photoshop mockups - but when you get this style onto websites and into apps it's often done in a way that just falls flat of its full potential.

There's my 2¢. I've been lusting after minimalism in design approach and dying for when colour planar aesthetic style became popular, but now it's here too many people are doing it all wrong (even the big ones, like Apple with iOS7)

Exactly. As I've said elsewhere: "Flat design" is as useful a term as "red design" or "round design". These are all just tools the designer has to build hierarchy, contrast, and affordance in a UI.

Flat design works for hardware and static stuff, as you said.

When I open up an app such as Mail, I want visual cues as to where the content is and where the controls are. I don't need the cognitive overhead of keeping the interface layouts in my head all the time. Sadly that's what iOS 7 introduced. It removed the cues that tied computers to the real world, and in the process copied Android and Microsoft's interfaces. Shocking - I don't think Steve Jobs would have allowed that.

And also, the lack of textures makes it hard to see controls on some backgrounds, such as video controls on a white video. In short the designers seemed more like kids in a candy store than someone who really thought through usability.

More like kids playing with matches and lighters burning down the candy store.

I can see the necessity of breaking from the past at Apple, post-Jobs, but their designers threw out a lot of old rusty tools without understanding what they were for in the first place.

I totally agree. There's a big reason why "Flat" is in quotes. :)

From my perspective, the idea behind the bookmarklet is more of a way to give people a hint into what their site could look like if they decided to redesign it flat.

Of course there are many functional uses of depth which aren't purely for aesthetics or skeuomorphism. For people who already understand that distinction, it's fair to say this bookmarklet has less value.

But I think there's a pool of people who never considered designing their site flat. This gives them a quick way to see something like that.

from a technical perspective, I love the bookmarklet - don't get me wrong there. It was a solid blog post :D

Along those lines, I'm curious how flat design looks to those who are color blind (8% of men), as it seems to rely primarily on color for distinguishing various UI elements.

I'm colorblind and I usually don't have an issue with flat design. I rather like it.

I do tend to rely more on light/dark than hue, and if a hue is too similar, light/dark is my only visual cue. For example, in similar shades of red and green, red usually "looks darker."

It's fine providing there is contrast.

Yeah, this is a cute trick, but flat only works when you design the entire UI around it. I also am not a fan of overriding CSS that isn't expecting to be overridden.

Can you give some examples?

The good thing about flat design is that people with terrible design skills like myself can now create sites using just rectangles and "background-color: blue;" and it will look modern.

The good thing about Rails is now us designers can make entire websites with "rails generate". :P

Yeah,and rails and generate your business logic and your EA model too ! See , without the hands ! And it webscales automatically !

Flat design is the unfortunate byproduct of what really is minimalism and content-first design, both of which have their own use cases, just as skeuomorphism still fits some brands and products better.

Funnily enough, most designers actually argue the opposite, "flat design" actually makes it harder to get things looking polished because doesn't have as many visual flourishes, so that solid typography, color choice and hierarchy are all extremely important. "Flat design" actually goes to hell pretty quickly.

The real lesson is: "flat design" doesn't affect your ability to design things at all, it's all in your head.

"The good thing about flat design is that people with terrible design skills like myself can now create sites using just rectangles and "background-color: blue;" and it will look modern yet still terrible."

There fixed that for ya.

I was thinking the exact same thing yesterday :P

Exactly my thought :) minimalism + flat design

That's not how flat ui design works. You can make single-color boxes and it won't look modern. Flat UI is about beautiful color palettes that are well matched and which convey the proper information without over embellishing. A few good examples:

http://inspirationhut.net/wp-content/uploads/2013/08/23.png http://maxcdn.webappers.com/img/2013/03/flat-ui.png

Flat UI is not about beautiful color palettes.

Sure, color is an important tool at the disposal of a designer. But so are typography, layout, proportion, symmetry, hierarchy, contrast, and affordance. And those are just the static things! Designing good interactions additionally requires consideration of speed, motion, order, and timing.

Good design takes into account these qualities whether it's flat or not.

> Sure, color is an important tool at the disposal of a designer. But so are typography, layout, proportion, symmetry, hierarchy, contrast, and affordance. And those are just the static things! Designing good interactions additionally requires consideration of speed, motion, order, and timing.

Thats not what Flat UI is about , that's what graphic design is about.

Flat UI is a gimmick,and a fad. Non designers like it because there is nothing to it, anybody can make something look "Flat". It became an excuse for poor design skills, and pushing generic templates as design work.

Generalize much? There are plenty of bad designers not working 'flat'

The comment that I've been making: it's difficult to make great non-flat interfaces. It's easy to make flat interfaces. It's extremely difficult to make great flat interfaces.

A large part of that, though, is its newness. Not a lot of developers are the cutting-edge, style-creating types, and the ones who aren't are still feeling things out.

Can someone explain what the point of this is?

I realize that it will have more or less dramatic effects depending on the site, but in the two examples that Adam Schwartz chose to best demonstrate the effect, it seems to be just "remove shading and gradients." Why? Is someone out there offended by gradients? Why would you care?

Edit: Or is that the point, that it's meant to be a commentary on a design aesthetic? afschwartz's own cryptic response in this comment page suggests that it might be.

If so, the commentary seems to have escaped some commentators--one comment on the original says "Github looks much nicer with it enabled." Huh? I had to look at the side-by-side GitHub comparison for several seconds before I even saw the difference.

I think these two earlier comments summarize my opinions pretty well:

https://news.ycombinator.com/item?id=6691171 https://news.ycombinator.com/item?id=6690477

Indeed so. I must have missed those earlier, or failed to recognize your name on them--I just saw your "thank you" response. Sorry if I was obtuse.

I find the gradients distracting. A bookmarklet to remove them makes sites more readable and usable.

“Whenever you find yourself on the side of the majority, it’s time to pause and reflect.”

-- Mark Twain

Flat design for flat design's sake is a signal that groupthink on this whole "flat" thing is beginning to reach ridiculous levels

I wonder when designers will quit it with the "minimalistic interfaces are better (because I read it on a blog)" trend.

In about a year and a half, when people will have added enough useful features to their minimalist interfaces that they are no longer minimalist (but much more usable).

The "flat"/minimalist movement generally disregards the usability or usefulness of portraying information (see the NYC taxi door design for where this is frustrating[1])

[1] http://cityroom.blogs.nytimes.com/2012/08/22/taxis-lose-thei...

A neat little toy - but to me flat doesn't just mean a certain color scheme - it also means having a certain elegance to site interactions and a design philosophy that trends closer to minimalistic. None of these sites meet that criteria IMHO.

And that's not a bad thing. Variety is the spice of life. Decisions on design shouldn't be made based on trends - they should be based on usability. Some site benefit from simple interfaces and some benefit from complexity.

A good "flat" design needs to be designed from the ground up. You can just remove gradients and shadows and expect to have an intuitive ux.

There is no good "flat" design. Removing all depth from a design is not good design.

"flat" is a pretty ambiguous and miss used word, hence the quotes. In fact, "flat" designs use depth more frequently (ie one ui element over another). the "flat" trend is more about removing superfluous (subjectively) design elements

Some people need to use this bookmarklet when browsing HN (It removes the upvote and downvote arrows).

There is a difference between flat and (more) usable. While I strongly question the necessity of shadows and gradients as a means to convey structure, they more often that not help convey functionality to the non-rational part of the user's brain. Particularly the github example comes to mind: it may be a blue circle, but only with a smooth blueish shadow does it convey the meaning of an LED that wants the user's attention.

A blanket removal of usually carefully designed interfaces comes close to art vandalism :) It might do good in some cases, but destroys the hard work put in many others.

I really hope this is a commentary on how "flat" design is just an aesthetic. You can make your UI horrible or non-horrible whether you employ "flat" design or not.

It's not just an aesthetic, depth changes your perception of information hierarchy, can draw your eye, and can entice user actions depending on the real world analogues of the object.

Depth (or lack of depth) is part of the aesthetic.

That flat design is aesthetically different does not necessarily mean you no longer have an information hierarchy, or that it doesn't direct your eye, or that it does not entice user actions. It simply has different methods of accomplishing these tasks.

Since all of these tasks come through the visual approach and execution of the design, I'd say that falls well in line with the definition of "aesthetics."

[edited for spelling and style]

Thank you.

[Edit] ...and yes.

Useful tool. The interesting part is scanning the images and seeing where the flatness works and the "3D" effect was unnecessary, vs. the parts where the 3D really does work quite well.

For example, the Twitter "Home" button looks much better with the 3D effect, whereas the Github "Edit/Raw/Blame/..." buttons don't really seem to need it at all.

"Needing" depth really depends on your interpretation. Yes the github buttons don't need depth to be buttons, but at the same time, their depth probably makes them feel more clickable, and draws more attention.

Yes, I wonder whether you could use this as an extra emphasis effect for certain buttons on a page, have the important buttons (sign up, buy, etc.) with depth, and the less important - but still necessary - just flat. Would be interesting to A/B test.

Having thought about it, a fair few websites already do this with certain confirmation dialogues. eg. They have the primary button with a prominant graphical style and the cancellation option as just a small standard html link.

(Checks calendar) Yep, just about time for another HN Flat UI Whine-Fest (TM).

This is pretty cool! Makes it easy to see the subtle difference a flat UI makes on a page.

Makes all my GMail icons dissappear though... lol

Makes the input border for the search field and the sign in button disappear on the main Google page as well.

You should probably rename the bookmarklet from "Drag This To Your Bookmarks Bar" to something else

Flat design is so much better. Gradients, shadows, etc. have no practical use.

I think it's important for designers to remember the purpose of what people refer to as "flat" design isn't to unnecessarily flatten layouts, but rather to avoid unnecessarily adding skeuomorphism to them.

No difference on HN :)

It removed the upvote/downvote links for me. Most sites I've tried it on it does next to nothing on.

Why would you want to do that?

Reply on news.ycombinator.com