
Make the web "flat" with this bookmarklet - afschwartz
http://dev.hubspot.com/blog/flatten-the-web-with-this-bookmarklet
======
err4nt
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)

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

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

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

~~~
donrhummy
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://inspirationhut.net/wp-
content/uploads/2013/08/23.png) [http://maxcdn.webappers.com/img/2013/03/flat-
ui.png](http://maxcdn.webappers.com/img/2013/03/flat-ui.png)

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

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

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

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

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

[https://news.ycombinator.com/item?id=6691171](https://news.ycombinator.com/item?id=6691171)
[https://news.ycombinator.com/item?id=6690477](https://news.ycombinator.com/item?id=6690477)

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

------
trustfundbaby
“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

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

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

~~~
mjolk
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...](http://cityroom.blogs.nytimes.com/2012/08/22/taxis-lose-their-
axi/?_r=0)

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

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

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

~~~
cmac2992
"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

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

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

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

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

~~~
JasonSage
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]

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

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

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

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

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

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

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

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

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

------
EGreg
No difference on HN :)

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

------
panzi
Why would you want to do that?

