
Clean Up Your Mess - A Guide to Visual Design for Everybody - joelg87
http://www.visualmess.com/
======
jaysonelliot
Excellent site. While professional designers have invaluable skills that are
honed over years of experience, good design is something everyone can learn
the basics of.

I can't agree enough with the recommendation the book "The Non-Designers
Design Book." It's been around in various editions for over fifteen years, and
has been on more designers, coders, and IAs bookshelves than I can count.

I'd like to share one more design "secret" that every graphic designer knows,
and everyone can start using in a matter of minutes: The Grid.

Most designers work with an invisible grid that all of their elements live
within, or sometimes break out of. It can be any size and ratio you want to
make it. If you begin with a grid system, you'll be able to get as creative as
you want with your layout, and things will fit together better and just "feel
right" when you're done.

The best book I've found about grids is _The Designer and the Grid_
<http://amzn.to/lYAcyQ>

You can also go to <http://www.thegridsystem.org/> which actually lives up to
its subtitle of "The ultimate resourcein grid systems."

~~~
nonrecursive
Yes, the site itself actually uses a grid. To create it I used susy:
<http://susy.oddbird.net/>

------
Symmetry
One thing I noticed when looking at the two fliers and hadn't considered
before, but which didn't seem to be spelled out in the article is that design
for fliers is in some ways fundamentally different from design for web pages.

We're only ever seeing web pages from one distance, but a flier has to first
call attention from a distance and then when someone comes close give the
information needed for them to do something about it.

The original version, when seen from a distance, could easily be mistaken for
a demonstration or a movie or such, since only the picture and title are in
very large and distinct fonts. The new version, by contrast, has "Beginner
Class", "Regular Classes", and "Come Visit" popping out making it clear to
someone walking by that the cool stuff in the picture is something you can
learn rather than just see.

And once the attention of the potential customer has been caught and they
stop, then they can read the fine details.

~~~
DougBTX
I don't know of any numbers to back it up, but I suspect that there are strong
parallels to be drawn between the speed of someone scanning a web page, and
the distance someone is from a poster.

------
pge
One note for designers about color blindness - the "strong contrast" green
dots (with one red one) example has essentially no contrast for those of us
(~1 in 10 males) who are red-green color blind. All the dots appeared the same
color until I saw the text which suggested one of them was different. Yellows
and blues are safer color combinations to use if you are looking for contrast.

~~~
jaysonelliot
Very good point about color blindness.

When designing a site, I recommend that people run it through Vischeck -
<http://www.vischeck.com/vischeck/vischeckURL.php>

Vischeck is both an online and downloadable tool that will show you how your
design looks to people with varying types of color blindness.

------
_grrr
Did anyone else find the Aikido flyer on the left the most readable? The
version on the right might be 'neater' but I was able to absorb the
information from the left version more easily.

~~~
nonrecursive
Hi, I made the site. Your criticism and the other points in this thread are
valuable to me - so thanks.

When writing the site, I showed the before & after to a few non-designers, and
every single one had the impression that the right-hand flyer looked better.
In my opinion, that's key - if something _looks_ more understandable, it's
more likely to be read. If something _looks_ hard to digest, people aren't
even going to bother.

The readability may look like an issue on the site, but when the flyers were
actually printed, the apparent problem no longer actually looked like a
problem.

@Jabbles - yes, the font differences were a large difference that I don't
mention anywhere. Using a sans-serif font for the headers and a serif font for
the text creates more contrast, making the headers stand out more and making
the headers and details more easily distinguishable from each other.

A number of the points made are excellent ones, and I wish I had incorporated
them. For example, the contact information should have been way, way more
prominent. Capitalizing the URL is something I've never considered in the
three years since I made the flyer, but I can see how that would help.

Thanks again for all your criticisms. I've never created a site like this
before, and man, was it difficult for me. I spent at least 200 hours on it,
going over the text and examples over and over again. There's much, much more
I'd like to do with it, and there are many flaws I want to address, but for
now I feel like it's more important that it's just out there.

~~~
andrewcooke
your design certainly looks more "current" and "professional", which people
will class as _better_.

but that's not the same as _more understandable_ , which is something you can
actually measure. for example, you can do random trials, showing people a
flyer for a short length of time and then asking questions about it.

so you're obviously capable of making something that fits in with current
taste. but you haven't proved that your version is more understandable.

if you want the cachet of a "scientific" justification for your design then
you have to do the science. tacking on an assertion doesn't really cut it.

~~~
nonrecursive
All very true! I am taking a break from this site for the time being, but when
I revisit it, I plan on:

* Creating new before & after examples from scratch, hopefully with fewer flaws

* Adding a section on going through the process of redesigning something

* Adding more resources

But no, I'm probably not ever going to do the science, unless somehow I get
paid for the time I spend doing so.

~~~
ZoFreX
I would heavily recommend "doing the science". It's a lot of fun, and it has
one of two outcomes: You confirm what you think is true, in which case your
argument has a LOT more weight (as so few people will "do science"), or you
disprove your idea, which means you get to find a way to make your design even
better. Win-win!

It really is a lot of fun, too. We had a university assignment to investigate
a particular public-facing system, and while most of my peers turned to Google
I hit the streets with a clipboard. I had a really great afternoon, learnt a
huge amount about the system, and discovered data that no one else did.

~~~
nonrecursive
You make it sound very fun :) I've done some usability testing, and I've
really enjoyed it in the past. But really, I'm not sure how I would
realistically test a flyer.

Actually... it could be quite fun to create a couple flyers with links listed,
post them around town, and see how many hits I get. I don't think it would be
a true a/b test, though, as it wouldn't be possible to alternate different
flyers at the exact same location.

~~~
gallamine
You could use a tool like fivesecondtest.com. Not affiliated, btw.

------
mnazim
Nice one. Agree when 100% with the title. There is something for everyone in
this one. I absolutely loved the part about elimination. I am not a designer
myself(that means I can't design from scratch), but when I design something I
take couple of example and start eliminating stuff until I reach a point where
all non-important or less important bit have been removed. My philosophy in
design is -

If it is not/less important, it probably should not be in there.

------
aik
This looks very similar to a good part of "The Non-Designer's Design Book" in
both structure and content. Cool that it's free. Great book.

~~~
nonrecursive
Thanks! It was very much inspired by The Non-Designer's Design Book.

------
nonrecursive
The github repo is available to anyone interested:
<https://github.com/flyingmachine/clean-up-your-mess>

------
spacecadet
Design is subjective. To say something is clean vs messy is to not understand
that. To create effective design is to use the elements and principles of
design effectively. Clean is not an element nor a principle, it should be the
end product of something well designed. "a guide to visual design" IMO should
consist of explaining the elements and principles of design in a way that non-
visual thinkers would understand. I highly recommend reading, "Point and Line
to Plane" and/or "Art and Visual Perception" if you have any interest in
design, they are great text's that explain the underlying psychology of visual
perception. One is written in "Whacked out art speak" and one in "laymen's
terms". Ironically the harder to read of the two is 2/3 smaller in size.

~~~
bitsm
Agree 100%. Design is art with a goal.

"Clean" is not a goal, nor is "messy". Given how many articles on lean
startups and testing are posted here on HN, I'm surprised how many readers are
swallowing the author's advice without questioning WHY "clean" is better or
necessary. The author himself said here in this thread that he isn't
interested in testing at all. That, to me, shows a fundamental
misunderstanding, and frankly disrespect, for great design.

The parrot secrets ebook is a classic example of great design that is
definitely not "clean". Yet it is successful.

Never confuse your personal aesthetic with design.

There are great books to learn from, and everyone should take all these book
recommendations to heart. But take the time to absorb the professional advice,
and try and synthesize it into rules you can work with and apply properly.

~~~
nonrecursive
Hmm... I didn't say that I'm "not interested in testing at all", and it's
unfortunate that I came across that way. In fact, years ago I created a Rails
tool for performing a/b split tests:
<https://github.com/flyingmachine/rails_ab_split_tester> . Also, in the
resources section of the site I link to Don't Make Me Think, which strongly
advocates quick, cheap user testing. However, I felt like a discussion of
testing was outside the scope of site. And unfortunately, I don't have the
time to conduct proper tests myself. I wish I did, but I've spent a great deal
of time on the site already, and it's time for me to work on other things.

However, this is why I made the site available on github - if you'd like to
improve the site, please do create a pull request. If I come across a little
surly here, it's because it's bizarre to me have put so much effort into the
guide, motivated solely by my love of design and desire to engender it in
others, only to read that somehow I'm exhibiting disrespect for great design.

Re: "clean" - keep in mind that the site is meant to be an introduction to
design. People who have no design vocabulary nonetheless have an implicit
understanding of "clean" and "messy". For many people, "clean" can in fact be
a goal, and I felt no need to ignore the way people actually use the word.
Also, it made for a fun title :)

I try to explain what I mean by "clean" design in a way that's not limited to
personal aesthetic - it's design that allows the audience to quickly find the
information they need. Did that not really come across? If it did - do you
think that making information easy to find is not a valid goal of design? Or
do you disagree with my definition of "clean"?

It seems like we're not using the word "clean" in the same way, but if we are,
I'd love to hear your thoughts on why you think "clean" isn't better or
necessary.

~~~
Panoramix
Thank you for making that site. I liked your examples, and it has sparked my
interest in design.

------
PStamatiou
Am I the only one that hates when people keep referring to a design as being
clean? That is quite possibly the least descriptive feedback anyone can give
me on my designs.

This explains exactly where I'm coming from:
[http://52weeksofux.com/post/4046226488/why-clean-isnt-
such-a...](http://52weeksofux.com/post/4046226488/why-clean-isnt-such-a-dirty-
word-for-designers)

~~~
d0m
Clean in the sens: "Clean is better than an mess". The article seems to be
written for non-designers who know practically nothing about design. And for
them, clean is something great; it means they can effectively represent their
ideas.

~~~
Jabbles
How does the random circular smudge in the "improved" design fit in with this
goal?

~~~
nonrecursive
Yeah... if I were doing the flyer again now, I probably would eliminate the
circle, and make the contact info larger, spanning the two columns.

Initially, when I was making this site, I wanted to have an area for people to
have conversations about it, in part so I could explain all these little
details. There's a lot I wanted to explain that I just couldn't fit into the
site because I thought it would be too tangential.

------
AbyCodes
"If you're like most people, you feel like a baby when it comes to visual
design. You sometimes have a vague sense of what you want, but can't
articulate it or make it come about. All you can do is point and cry." A very
nice introduction!

Thanks a lot. Brief, to the point, good examples to supplement the text, with
pointers for further reference to good books as well. Love it.

------
charliepark
On the "after" flyer, you might move "experience" up to the preceding line,
and, perhaps, indent the second line of it. Reason being: As it is, you're
separating the key data bit (no) from the actual subject/noun (experience).
Someone scanning it might take "experience necessary" out of context, and get
the wrong meaning from it.

------
barisme
Wow. Thank you. I'm still reading but so far you've increased my visual IQ by
1000%.

------
Raphael
Yes, I feel like strangling anyone who center-aligns a mass of text.

------
aneth
This is a great article covering the same essence of visual design covered by
many books. After understanding these principles you should be competent to do
basic layouts. I find many designers do a worse job of internalizing these
concepts than your average engineer would if they only took the time to try.
Engineers are good at extrapolating from principles. Design is no different.

