
Clean Up Your Mess – A Guide to Visual Design for Everyone (2011) - Garbage
http://visualmess.com/index.html
======
nonrecursive
Oh jesus, my site got submitted and is #1 on HN again. It kind of amazes me
that a guide that begins with a Thich Nhat Hanh (buddhist monk) quote can
bring out such heated debate.

A few things to clarify:

* The before/after flyers were taken from real life. These were printed out and tacked up to community boards and the like.

* One reason why I think the right poster is better is that it looks nicer on the surface and would therefore be more enticing for people to read to find the details. I think the left poster looks like it would be harder to find information. If an ad looks hard to decipher, then people aren't even going to bother. A lot of criticism here has to do with how the phone number doesn't stand out. If you're walking down the street and just see a giant phone number scrawled on a wall, would you call it? No. You need to have a reason to call it. I think that the flyer on the left gives passersby less reason to call.

* That said, I do need better examples, and the site needs to look less ugly. As it happens, my next project after finishing [http://braveclojure.com](http://braveclojure.com) is to revamp this site. If you're interested in hearing about the revamp, please sign up for an email reminder: [http://eepurl.com/biiMZT](http://eepurl.com/biiMZT) . I'm going to add more content on actually implementing this stuff using CSS/SCSS. If you think the Clojure site is OK looking then you'll probably like the new visual mess content.

* For some reason, beginners seem to love this site as it is. Weird!!!

edit: If you have little or no experience trying to do visual design, I hope
the site has encouraged you to give it a try, if only so that you can do
better than I did :)

edit 2: Back in 2011 I wrote a blog post thanking readers, looks like it's
relevant again: [http://www.flyingmachinestudios.com/design/cuym-thank-
you/](http://www.flyingmachinestudios.com/design/cuym-thank-you/)

~~~
fmihaila
It is interesting that the choice of the left image tends to come from people
judging "from the gut" and who claim no design expertise, while the case for
the right image is mostly argued from first design principles, focusing on
structure as a way to minimize the mental cost of reading.

It's possible that the easiest-to-read poster is not necessarily the most
effective. Some studies have shown that harder to read text correlates with
better retention [1]. Also, there are traffic studies suggesting that narrower
streets [2] and traffic intersections with no signaling [3] may be safer. The
latter examples might seem unrelated to the discussion, but what all these
cases have in common is that more attention, rather than less, is being
demanded from the user. It does not seem surprising that an increased level of
attention improves outcomes.

I'd be curious to see the results of a rigorous A/B test with the two posters
from the article.

[1]
[http://www.princeton.edu/main/news/archive/S28/82/93O80/](http://www.princeton.edu/main/news/archive/S28/82/93O80/)

[2] [http://www.citylab.com/design/2014/10/why-12-foot-traffic-
la...](http://www.citylab.com/design/2014/10/why-12-foot-traffic-lanes-are-
disastrous-for-safety-and-must-be-replaced-now/381117/)

[3] [http://www.citylab.com/commute/2011/09/shared-
spaces/116/](http://www.citylab.com/commute/2011/09/shared-spaces/116/)

~~~
sukilot
Increased attention only pays off _if the user pays attention_.

------
honksillet
I'm kinda shocked by how many people are saying "they like the poster on the
left". The one on the left is a train wreck.

~~~
jabo
Here's my theory about why the one on the left looks better to some: Given
that this is a physical poster, I think we've come to expect a certain crammed
format that we've already learnt how to navigate well (think classifieds). So
it no longer feels strange or crammed.

Question for those who think the left one is cleaner: what if this was a web
page? You need to look at each one zoomed-in one at a time. Would you still
consider the left one cleaner?

~~~
Theodores
The word you are looking for is CONVENTION. There are conventions we all know
on the web - where your navigation goes etc. - there are also conventions in
the real world. The thing about conventions is that you haven't got to re-
learn the interface, this also applies with a physical poster. But, yes, same
as you, it is familiarity with the format that makes the left one 'better'.

------
moe
While there's lots of truth in this article I can't help but notice the page
itself has rather bad typography (in particular the headline fonts), the top
navigation is a trainwreck (sorry), and what's up with the random red
rectangles in the background?

~~~
rmrfrmrf
Do as they say, not as they do ;)

------
microcolonel
The one on the right has poor spacing. The one on the left is a mess, but at
least it's legible and shaped like a good page. The one on the right has too
tight of a left margin in the right column.

~~~
untog
This might be Hacker News distilled into one comment.

------
skeuomorf
Having read "Don't make me think" and "The non-designer's design book" I
highly recommend them.

The thing that stuck with me the most is from "The non-designer's design book"
where Robin Williams -the author- keeps repeating "Don't be a wimp". I think
this is the best design advice a beginner could be given, often beginning
designers will keep centering alignment or being afraid of color that it makes
their work look boring.

Another set of design principles which is somewhat close to what has been
discussed through the article and Robin Williams' book is the Gestalt
principles.[0] [1]

[0]
[http://facweb.cs.depaul.edu/sgrais/gestalt_principles.htm](http://facweb.cs.depaul.edu/sgrais/gestalt_principles.htm)

[1]
[http://graphicdesign.spokanefalls.edu/tutorials/process/gest...](http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm)

------
cubano
I've been freelancing as an all-purpose web developer/designer for three years
now, and to me the main problem isn't the professionals understanding of these
should-be-obvious points, it's the clients.

Every site I've built in the past years (20+) where the client wants design
mods near the end has, almost always, to do with breaking good design practice
and stuffing more and more pointless, hard to read information onto a page.

I try my best to use the paper-as-a-cost analogy...the reason print media got
so adept at stuffing more and more on a page was because paper costs money,
and therefore it made deep financial sense to force as much money-making
content as possible on a printed page.

This idea makes no sense, however, on the web where the cost of making things
accessible and easy-to-understand is basically $0.

Most of the time, this argument works, although of course sometimes it just
falls on deaf ears where the client is simply too enamored with how their
newspaper or the Wall Street Journal online used to do it.

~~~
collyw
Like this?

[http://theoatmeal.com/comics/design_hell](http://theoatmeal.com/comics/design_hell)

~~~
cubano
Hahahha...awesome...exactly!

Except, in my experience, the image at the end should be a picture of the one
at the beginning with a FB and Twitter link in it.

~~~
collyw
Was about to post this one, which is what I get as less web centric developer,
but the Oatmeal sounded closer to your situation.

[http://projectcartoon.com/cartoon/2](http://projectcartoon.com/cartoon/2)

------
grey-area
The reason people are arguing interminably about which poster is better, is
that _both are almost equally bad_. They are a terrible illustration of the
principles the author has read about, and they're not a good model to emulate.
The trouble with design is that everyone has an opinion, informed or not, and
everyone feels their opinion is equally valid, a priori, because they sense it
is very hard to objectively prove anything in a discipline which is all about
communication and intention.

With apologies to the author, this page itself is terrible design in almost
every way that matters, starting from the top with the horrible typography,
reinforced by overly literal illustration which bludgeons the reader over the
head with the intended meaning (little bits of mess behind the word mess, a
crying baby for 'you feel like a baby', really?) and distracting use of
irrelevant graphic devices - huge script font which does not connect with
meaning, pink sitting in the wrong place behind heads, another font
'Quicksand' which has the worst kerning I've ever seen, etc, etc. All that is
practically shouting 'do not take graphic design advice from this writer'
before you even begin reading.

If you want to learn from good design have a look at :

Paul Rand:

[http://www.paul-rand.com/foundation/identity/#.VRcG0JPwYZw](http://www.paul-
rand.com/foundation/identity/#.VRcG0JPwYZw)

El Lissitzky or other Constructivists:

[https://www.google.co.uk/search?q=el%20lissitzky%20poster](https://www.google.co.uk/search?q=el%20lissitzky%20poster)

Mies van der Rohe or other Bauhaus designers:

[http://www.knoll.com/product/brno-chair-flat-
bar](http://www.knoll.com/product/brno-chair-flat-bar)

Paula Scher:

[http://new.pentagram.com/2009/02/new-work-the-museum-of-
mode...](http://new.pentagram.com/2009/02/new-work-the-museum-of-modern/)

Saul Bass

[http://www.saulbassposterarchive.com/](http://www.saulbassposterarchive.com/)

Tufte on Minard and others:

[https://www.edwardtufte.com/tufte/posters](https://www.edwardtufte.com/tufte/posters)

You'll learn more from studying those designs than you would from reading or
looking at this.

~~~
Estragon
The before-and-after with detailed explanations is a tremendously appealing
format for learning about design though. Are there any good guides which take
a similar approach?

~~~
grey-area
The before of all the designs in my list above was a lack and some
requirements - that's how design usually starts, not with a previous design.
So I think presenting design as a before/after is actually not productive in
most cases - ideally it's the process of reifying an idea, not prettying up
some information while not considering the broader picture.

In the case of the example presented, a better design would wipe the slate
clean and ask if all that information was really required at all. The flyer
needs to get people to the aikido class, so you probably need a couple of
things:

Why do I need this?

How do I join?

The medium and context is also v. important - is it on notice boards at a
distance (needs impact), in people's hand, via the post, all three? There are
many ways to get there, but I'd suggest if you want a satisfactory solution
you wouldn't start from here (the examples in the article). This is what is
damaging about before/after - it stops you asking the hard questions about
what information is required and what the priorities are.

------
meesterdude
Overall, this hit a lot of good points and is a good read. I can't say I had
any good takeaways, but I was nodding my head in agreement with many of the
authors points.

I am a web developer before I am a web designer, but I've honed my abilities
over time with a few simple rules that I'll share for anyone else who
struggles:

1\. Care. More often than not, lazy design comes from not caring or even
thinking about it. If you don't give a shit, your design will be shit.

2\. Experiment. Try different alignments, ratios, spacings, colors; take
things to an extreme and then tune it down till you like it. Try it on your
phone. Try it zoomed out. play with it and see how it reacts to what you do.

3\. Iterate. Sometimes you can bang out a design and it's done; but more often
than not you'll get better quality by iterating over it a few times.

4\. Embrace fonts. I still struggle with their nuances, but a good typeface
can really add a feeling to a design. google fonts is a great resource, and
ranks by popularity which is not a bad reference. I know I suck at them, but I
know they're important; so i feed off of what i like from other designers
uses.

5\. Optimize for readers. If your design has any text element, you should
probably optimize for the text first. Everything else is secondary. If you
find it hard to read at glance, or lose your place in a paragraph, you
probably need to tweak something.

Also +1 for "don't make me think" \- one of the most pivotal books I've ever
read that changed how I view and make websites. Would have never expected that
from such an otherwise brief and light read; a beautiful exercise of
intelligence in countless ways. Even the title is useful to keep in mind.
Highly recommend for anyone looking to do better, no matter the skill level.

~~~
collyw
With the exception of 4, those would be good recommendations to apply to your
code as well.

------
gabemart
Did anyone else think the left flyer looked cleaner (although still very
muddled)?

~~~
tptacek
Neither of the designs are good-looking (but that may be the point). The left
design though is objectively inferior:

* The text in the right column is centered, rather than aligned, and is thus ragged on both sides, making it harder to read and sloppy-looking.

* The leading on "beginner class" yeesh.

* The body copy in the left column is set at the same size as the header text in the right column.

* The right column has indistinct headers with inadequate contrast.

* The right column mixes header signifiers, in some cases using all uppercase, in others bold.

* The body copy in the left column uses an oblique sans and the right column uses a similar sans, minimizing contract (notice how the "after" design uses a true italic)

* The "sections" in the right column are set off with pointless thin rules, which is a design annoyance so basic that Tufte yells about it early in (iirc) The Visual Display Of Quantitative Information.

* The right column has no hierarchy, so the contact information is set in exactly the same prominence as the rest of the information, so clumsily that the URL runs into the margin.

I guess I could go on.

This is pretty basic "Non-Designers Design" Robin Williams stuff. I don't see
how you can criticize this blog post by suggesting that the "before" design is
better. It's not. It's _artificially_ bad: someone took a reasonable design
and a list of everything you can do wrong in a page design and built a demo.

I agree with another comment on this thread though about the clip-art; it
muddled the point the article was trying to make. They should have worked the
same clip art into the "before" picture if they wanted to do that.

~~~
peeters
Everything you listed are good points using theoretical, book knowledge, but
isn't the only "objective" way to evaluate the two posters to put them in
front of a sample of the target audience and measure their reaction? What
you're doing is applying general guidelines as if you can determine the
overall quality of a design by running the design through a checklist.

For example, you dock the left for having indistinct headers with inadequate
contrast. But that's actually a good thing, since the headers are useless in
both posters! But only in the right example are they distracting because they
followed the "good design checklist".

~~~
tptacek
The headers in the "after" picture aren't useless. They communicate:

* Aikido

* Beginner

* Regular schedule

* Come visit

That seems like a very sane set of goals for a poster about an aikido class.

In the "before" version, the copy about the "mind, body, spirit" connection of
Aikido is set in a larger font than the text saying people should come visit!

~~~
wampus
Who, what, where, & when are mandatory items on a checklist for this type of
communication. But if the way you point to them draws attention to your finger
and away from the vital information itself, you've failed. That's why the
headings are useless. You allude to this yourself in your final sentence.

------
ashleyp
I look at information primarily in chunks, i'll scan the chunks(not the text
or details) and that determines whether I should read. For some reason it's
harder for me to do that with the right. SO the right becomes a mess to me and
cognitive effort to read. I do however, have dyslexia if that would make a
difference. The left for me was fab!

~~~
forgotpasswd3x
> I look at information primarily in chunks, i'll scan the chunks(not the text
> or details) and that determines whether I should read.

I do the same thing. I don't have dyslexia, but that's just how I read these
kind of posters. The left is way easier, even though it's apparently a design
disaster. The important information kinda 'jumps' out at me, where it doesn't
do that on the right, and I don't know if I'd even stop to read that one if I
saw it.

I'm not saying the left one is perfect, but with a few changes it could be
better than the one on the right. I really don't like the designers in this
thread saying why I'm _wrong_ for preferring the left flyer. It's like blaming
the user when software is designed poorly.

~~~
ashleyp
Agree. I initially thought it was brave the designer asking a subjective
perspective on work and using it to weigh up what was better. Then I saw I
disagreed and instantly thought "Uhhh-ooh". Unfortunately, I didn't pay as
much attention to the rest of the article as I perhaps should have. Better is
subjective, everyone processes visual data differently. I guess the job of a
designer is to best fit people best they can.

------
heliostatic
So far, the conversation today is tracking the conversation the last time this
was posted pretty closely:
[https://news.ycombinator.com/item?id=2502663](https://news.ycombinator.com/item?id=2502663)

------
patkai
Reading through these comments I find it amusing how subjective design still
is even if the term "design" suggests an informed, planned, deliberate
activity. I think a big part might remain subjective, but there is - there
should be - a growing body of knowledge about what is good or bad in this
realm. The [https://userium.com](https://userium.com) checklist is supposed to
have the objective part, but even that needs a lot of iteration.

------
daphneokeefe
Hahaha, I looked at the article first, then came to see the comments after I
read that I was wrong about the one on the right. Why are the flyers on top of
a black bar? Is that Times New Roman? Are we putting borders around our images
again? Why are coffee cup rings such popular logos? And what's with the pink
table of contents that won't swipe away? Boy, this developer has a lot to
learn about design. Imma go finish that article.

------
Namrog84
A lot of disagreeing comments here hopefully makes it clear that this why
there is target audiences and market research for demographics. Different
people have conflicting views. So while you can always try for mass appeal
there is likely never going to be a 1 size fits all for design.

------
lqdc13
I think the one on the left looks more like images in chain
e-mails/newspapers. Those are clearly designed that way to attract a certain
demographic.

Some people will definitely find the left one more appealing. That is why it's
important to know which demographics you want to target.

------
rmrfrmrf
Coming from a print design background, I've actually had a really hard time
developing effective user interfaces because I've been stuck in the "print"
mindset.

Left-aligned text certainly looks good on print, but in UI design, it doesn't
make sense a lot of the time. Transitioning from skeuomorphic UIs to flat UIs
has been especially challenging for me because the paradigms and precedents
set by the reference objects and industrial design don't exist.

~~~
ianstormtaylor
One of the left-overs from print that I often find myself forgetting is that
"interaction" is available as a design tool—not everything has to be visible
at all times, as long as it's available in an intuitive way when needed.

------
taivare
Perhaps the fact that most of the comments here preferring the left one , are
from left brain , programmers. I was raised by an art teacher , and in my
opinion the one on the right has a better visual design. Although, the left
one conveys more information , its to busy, signed the right brained art
teacher's kid.

~~~
taivare
ok , my mother the art teacher prefers the one on the LEFT.. Im perplexed ..
Im still holding to the one on the right .. visual appeal !

------
alxdistill
If folks want to move from just thinking about aesthetics, into thinking about
the ideas behind your design, and how they can help you achieve your strategic
goals, I recommend checking out [http://brandist.co/brand-
strategy-101/](http://brandist.co/brand-strategy-101/)

------
kybernetyk
Uhm, to me the left poster looks "better" in a way that is less visually
distracting. My eyes don't find a focus point on the right poster and are
scanning all the time - which is rather annoying.

------
Vektorweg
I wonder what the problem with visual design is. To make a sufficiently good
design, it just needs time to try out things. I think that everyone can get
something nice done by experiment and selection.

------
mrinterweb
While reading this I was reminded of the worst example I can remember.
[http://www.milliondollarhomepage.com/](http://www.milliondollarhomepage.com/)

------
michaelpinto
The typography on that page is a mess.

------
kdoherty
I liked the poster on the left

------
msutherl
Redesigning this poster should become a standard for comparing designers.

------
wodenokoto
Both suffers from poor line breaks

* adult class

* no martial arts

* experience necessary

* call to reserve

------
razorsese
The one on the left is better

~~~
collyw
Funny, that you are being downvoted. This is obviously a very subjective area
and some people will find the left better.

I personally find the font easier to read on the left, and the left hand side
feels less cluttered, with more space, and no border around the main picture.
That's where my eyes are initially drawn to.

Finding information is easier on the right hand side of the right one (to me
anyway). But the question was "what looks cleaner?"

~~~
kissickas
Usually people are downvoted for only stating their opinion without giving any
reasoning, especially if it seems like they're just trying to be controversial
for its own sake. Nothing funny to see here, really.

~~~
collyw
See my other down voted comment with reasoning.

