Clean Up Your Mess - A Guide to Visual Design for Everybody
visualmess.com
visualmess.com
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."
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.
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.
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.
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.
* 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.
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.
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.
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 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.
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.
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)?
Maybe that is good print design (a subject I quit paying attention to in the 90's).
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.
Oh the ambiguity. Gotta love it :)
If it is not/less important, it probably should not be in there.
"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.
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.
I didn't include it because I don't think it's for beginners, but it's super informative.
This explains exactly where I'm coming from: http://52weeksofux.com/post/4046226488/why-clean-isnt-such-a...
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.
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.