Hacker News new | comments | show | ask | jobs | submit login
Clean Up Your Mess - A Guide to Visual Design for Everybody (visualmess.com)
410 points by joelg87 on May 1, 2011 | hide | past | web | favorite | 56 comments

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

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

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.

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.

Thanks - you perfectly described my rationale for the header sizing.

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.

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.

My rule of thumb is that if I'm using color to distinguish something, to never vary just hue. Always include a saturation or brightness change too.

Thanks - I hadn't considered that. I'll add it to the list of improvements I'd like to make.

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.

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.

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.

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.

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.

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.

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

you could look at a/b testing. it might be interesting to learn how to set that up... (not sure how you'd use it to measure this particular case though)

"Better" doesn't necessarily mean more readable or understandable. I'm not an expert by any means, but the flow of the text on the right is a bit disconcerting (e.g. spacing of "Regular Classes" - half of typography is negative space), not that it's better than the left. Would recommend reading http://www.webtypography.net/ ... a lot of it won't apply but some of it is very important, and the author does a good job explaining how to implement these principles in CSS. When I first read it, I was amazed by how much thought goes into simply spacing and sizing text.

Oops, I meant "not that it's worse (less readable) than the left."

I think the one on the right (same one you indicate) is definitely more readable. I'm a former copywriter, so I'm more verbal than visual in some ways, and I am still quite sure you have this right. For further reading and info about user testing, you might check out books by Jakob Nielsen -- ie: Designing for Web Usability, and Eyetracking Web Usability.

Personally, I do find the design on the right cleaner. The problem I have is that the big black bar behind the two lumps the two together into one weird single thing. I think they would be easier to evaluate if presented more like this: http://i.imgur.com/KrRl6.gif.

Thanks - you're the second person to point that out, and it's something I intend to fix.

Yes, and it wasn't even a close thing!

Advantages of the flyer on the left:

- The "Aikido" title has more whitespace around it, making it easier to distinguish as a separate visual element from the photograph and making it easier to see from a distance (as would be necessary for a flyer).

- The text below the photo is larger than the version on the right hand side, and does not have a confusing symbol following it. (Presumably this symbol is something Aikido-related.)

- The text in the top-right box is centered and bolded for clarity. The alignment in the second flyer makes no sense, and in combination with the closeness of the title and the photo the whole top part of the flyer looks pinched together.

- The telephone number is large and easy to read. It's even preceded by a call to action ("Call xxx")!

- The URL is larger, bolded, and capitalised for easy comprehension.

I disagree. I haven't read the full article yet, so I haven't read any justification for the design choices, which I think is useful to give my initial gut feelings. Also, IANAD (I am not a desginer).

I find the LHS to be so messy and inconsistent that at a quick glance, I almost feel like it would be too much effort to digest the information. The use of centre-aligned text is probably the culprit, with the inconsistency of font-size and weighting contributing to this.

On the RHS, I personally find it much easier to just scan my eyes down the 2 columns of text to find useful information. The alignment of the days and times in the regular classes section is particularly easier to read I find.

I found the version on the right more readable. That being said I wonder if there isn't a reason you often see flyers like the version on the left. I think it'd be much more informative to A/B test the two and see which is more effective.

Definitely. To me, the following each makes the design on the right less readable:

1. The box around the picture draws your eyes more, as does the circle added at the bottom, but neither of those elements provide important information, they're simply distractions.

2. The fonts used are harder to read.

3. Removing the lines in right column slows your ability to parse the information.

4. The address, phone number, and website, some of the most important information, no longer stands out at all.

Some of the alignment changes on the right are better, but on the whole, the original is much more likely to get peoples' attention.

The left side emphasizes content more like class times while the right has nice headers that steals focus from the important information. At least to me. Maybe I'm more used to these cookie cutter newspaper type ads.

I found the flyer on the left quite readable but that was probably influenced by my expectation that it was from a newspaper classified section or similar publication where the formatting options can be quite limited. Once I read the article I agree that as a flyer the design on the right works better. From this I take that the context in which the information is presented is also quite influential on people's ability to assimilate the information being presented.

I found the version on the left quite readable. Then I thought - this is a website of someone who wants to teach others about design, so the correct answer is likely the right one. I saw the design principles in play - the justification, the section headers, etc.

However, without wondering what a designer would consider as the correct answer, I'd say the left one was more readable.

What does that say about designers (or me)?

I preferred the right; the only thing I saw as a problem was the place name was not emphasized at all. At least having Portsmouth Akido in bold type would give the viewer a cue to find the name. If the flyer is on a wall and not a handout then the audience needs to locate the name.

Surely the largest difference between them is the change in font? Why is that not discussed? Also, I thought (though I am no expert) that a general aim was to limit the number of font styles. Why has he added a serif style?

Yes. While the LHS version has some obvious issues & glitches I found the inconsistent fonts on the right to be annoying and so small that they deemphasized important information such as the times of classes. Some of the removed formating changed the meaning to me - eg: putting "PLEASE COME AND VISIT" in upper case and bold may be tacky but it really emphasizes one of the most important "calls to action" on the flyer. I really couldn't decide which one I liked better at the start.

They both have problems. But I too thought the left one (while amateurish designed) sucked less that the right one. Right side had too many font styles, not enough whitespace, "towards center" justification (which makes me think of web equivalent -> rotating flaming skulls!), no clear path for my eyes to follow. My biggest complaint is utter lack of left right (horizontal) balance.

Maybe that is good print design (a subject I quit paying attention to in the 90's).

I agree. The right side image has sub heading fonts that keep 'popping out' as you read the right portion ('regular classes' and 'come visit'). It interrupts the flow of reading and visual appearance.

The left side image uses bold to highlight these sub headings, and the smaller font size maintains a readable flow.

In my opinion, the context of the sub heading/text has not changed enough to warrant such a large font.

Yes. The left version, at least for me, conveyed the info more clearly.

Oh the ambiguity. Gotta love it :)

Agreed. I think the ratio design/information is too big for the one on the right.

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.

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.

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

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

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.

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.

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.

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

Another great book on the psychology and neurology of visual design is Visual Thinking for Design: http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-T...

I didn't include it because I don't think it's for beginners, but it's super informative.

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

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.

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

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.

It's not a random smudge, it's a meaningful Japanese symbol.

Is a non-specific compliment ever useful feedback?

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

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.

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

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

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.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact