Clean Up Your Mess – A Guide to Visual Design for Everyone (2011)
visualmess.com
visualmess.com
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 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 . 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/
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/
[2] http://www.citylab.com/design/2014/10/why-12-foot-traffic-la...
[3] http://www.citylab.com/commute/2011/09/shared-spaces/116/
It also says that design is a part of everything.
It's odd, when I was looking at that aikido ad, I thought I could faintly smell newsprint paper...
There must be a lot of testing and research in "cheap looking" ads, this might be a great example of the resulting emotional responses.
Maybe the idea that the right one is more appealing to everyone is a lot more subjective than he would have us believe.
The question was "which one looks cleaner?", not "which one makes it easier to find information?", and to my eye the one on the right has more noise (the balance of spacing, border around the image, more varied fonts). I guess there are arguments for both or neither, but it's clearly not cut and dry.
The web abounds with bootstrap websites which fail to give any real information.
In the poster on the right, my eye is drawn to the enormous headings, which contain no useful information by themselves. The "Come Visit" heading isn't close enough to the address, and the address/phone/URL has been squeezed into a single block of tiny, fuzzy text. Compare that to the left poster, where each one is distinct from the other.
I feel the need to put on my glasses to read the one on the right, but not the one on the left. That alone indicates a major issue and potential loss of audience.
THIS IS LARGER, SO EASIER TO READ, RIGHT?
Font size alone I agree with you (and a light - serif - white text on a black background has some issues with artifacts, which are visible on the flier), but the whole thing is a mess.
> In the poster on the right, my eye is drawn to the enormous headings, which contain no useful information by themselves.
Yes, it contains. It's an aid to point you to the right section.
Because you scan the bigger text first, the first thing most people will read is "Aikido - Beginner classes" then follow the right column
> The "Come Visit" heading isn't close enough to the address
I agree, this is debatable, one possibility would be to replace it with "Try it" and/or put "Come Visit" or "Visit Us" above the address
> and the address/phone/URL has been squeezed into a single block of tiny, fuzzy text
This is another heuristical cue and to separate it from the rest of the text.
For bonus points, pluralize the days ("Tuesdays 7:30 p.m.") and separate the phone and URL from the address a bit.
The point is, the information is self-describing. It doesn't need a header to announce what it is.
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?
Heck, the one on the left has a much better call to action, it says CALL 603-431-8561 in big letters. The one on the right has the "Come Visit" clearer though.
The one on the right might be "cleaner", but I bet that the one on the left converts a LOT better (simply by being more readable).
A design isn't good if a designer needs to tell me to look again, but look better this time.
Again, I'm not saying that this is a perfect example, but the points he makes are valid. I've had to deal with similar issues creating figures and illustrations for scientific manuscripts. Scientists are not great illustrators by and large, although some are. It's worth studying the successful examples, and to adopt their practices.
The poster on the left also has slightly better call to action (CALL 603-431-8560).
tbh, neither of them are all that great. The right one introduces a serifed font which clashes with the non-serif fonts everywhere else. From a marketing perspective, Akido is often associated with clean minimalism and serifed fonts are not.
The new design also uses generally smaller font sizes, which are hard to read on a poster. This allows for the use of white space to denote sections, but it creates so much white space that the designer struggles to fill it all up with something and introduces a new design element (the brushed circle) to simply fill up space.
Where non-serifed fonts are used, they aren't particularly readable, the kerning is off and the weight is too high in general. The leading is also off in quite a few places, particularly between the section headers and the first line of the serifed-font section text.
Some more downthread https://news.ycombinator.com/item?id=9282032
I can't speak to whether it would materially impact the effectiveness of the ad in generating leads, but an important aspect in soliciting leads seems to be filtering them. If your potential leads don't know what your criteria are, you're more likely to get calls from people asking basic information like when the classes are, or whether their 10-year old can join. If the ad were structured in a way in which class times and age limits were highlighted, these people likely wouldn't bother calling.
You can, of course, simply repeat the information from the flyer over the phone, but if you're wondering why these people are calling to ask those questions in the first place, you might want to look at your ad design. After all, the information is there. It's just that most people see your call to action before they see that other stuff, and so they just call you instead.
"AKIDO"
<picture of one guy throwing another guy>
603-431-8560
it would probably work as well as either of these designs, and they'll end up answering the same inane questions on the receiving end.
More importantly, the questions people ask can be good signalling to a business how they can adjust their offerings. There might be an entire market of people who really want to take Akido, but they can only do it on Thursday nights. This poster might filter them all out. But a bunch of people calling to see if they offer Thursday night beginner classes might cause the school to adjust their schedule to offer that class, thereby capturing that part of the market.
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
[1] http://graphicdesign.spokanefalls.edu/tutorials/process/gest...
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.
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.
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
El Lissitzky or other Constructivists:
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
Paula Scher:
http://new.pentagram.com/2009/02/new-work-the-museum-of-mode...
Saul Bass
http://www.saulbassposterarchive.com/
Tufte on Minard and others:
https://www.edwardtufte.com/tufte/posters
You'll learn more from studying those designs than you would from reading or looking at this.
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.
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.
Like what is that weird circle thing doing on the right one? Putting clipart-style stuff on a flyer just because you need to fill some space doesn't feel like good design to me.
Typography on the right one is a lot better tough.
"In Zen Buddhism, an ensō (円相 , "circle"?) is a circle that is hand-drawn in one or two uninhibited brushstrokes to express a moment when the mind is free to let the body create."
"The ensō symbolizes absolute enlightenment, strength, elegance, the universe, and mu (the void). It is characterised by a minimalism born of Japanese aesthetics."
I can't speak to why it's there; possibly ties in to aikido?
Design is mainly about directing your reader's eyes throughout the flyer and attempting to retain his/her interest in the few seconds that you have his/her attention.
Edit: Fixed typo.
Neither design is good, but the "before" design communicates nothing clearly, while the "after" at least rewards a glance with the knowledge that:
* there is a regular class schedule
* you can come visit without an appointment
That information is also in the "before" design, but you have to read carefully to find it.
The most important thing to understand design is that a good design has clear goals. The critiques I'm reading of the "after" design seem to be based on the idea that all the information in the poster is equally relevant; they ignore the goals of the poster --- by necessity, since the "before" poster objectively doesn't have a goal, which it deliberately demonstrates by not having any hierarchy.
If you don't care about the goals of the poster, you can just go with whether you like or dislike the thin black rules dividing it up, or whether you like big text or little text. But you're missing the point if you do that.
Yes there is. More people think the left design is better, ergo it is reasonable to assume it is a better design.
The failure of the right design, and why people don't like it, even though the one on the left is a visual cacophony, is that it doesn't bring out the information people are interested in. It uses design principles to box them into an information hierarchy so you can find them, but that's an extra step it's introducing. You don't have to find the key information point in the left one because they're presented up front. A quick linear skim and you've gotten everything you need. You'll notice that all of the important information a person needs to know is visually distinct from the rest of the poster and larger on the left.
Here's what I need to know: what is this about? (Akido), when are classes I (a beginner) can take, how can I get in contact with this place?
The left answers this with a quick scan, the fact that the leading on the words "Beginner Class" is worse on the left is irrelevant, the information, which is all I want, is more prominent. It doesn't matter that there's a section called "Come Visit" on the right, I know what an address, phone number and URL look like on sight (automatically and instantly) and my context know that they'll be about the Akido school, and the left poster does a better job and making those elements larger, easier to read and more visually distinct.
In fact, I can recognize what a phone number looks like before I can even register what all the numbers that compose that phone number are. I can even find the number on the left poster in my peripheral vision somewhere around where my eye hits "Regular Classes" on the left. I have to both find the "Come Visit" section and get about halfway through it on the right poster before I can even register that there's a phone number on the poster at all!
To use an analogy, the left poster is a bright direction sign on a dark street. Immediately noticeable, visually distinct, clear call to action "come here to Akido!". The right poster is a library, well organized, guaranteed to contain key elements, but you need to navigate the organizational scheme to get what you want out of it.
The right design doesn't present information, it organizes it, and that's a failure for an advertisement poster.
I found the right side of the left flyer less clean because of the lack of distance between the borders and text, but I wouldn't have even bothered to look there had I not read that the right was supposed to look cleaner.
Another possibility is that we may be looking at two bad designs.
Both have the same information, but the one on the right makes much of the text smaller and less bold, harder to read. The left column on the left flyer also looks a lot more pleasing to the eye.
* 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.
I do hope that was by choice, because, if so, this illustrates beautifully how "attractive design" and "good design" are not the same thing (bonus points to be had if the author had managed to make the left poster prettier than the right one).
> 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.
To me,the clip art said one thing, loud and clear: "After redoing the design, I'm left with a truckload of empty space". Considering how crowded the design on the left looks like, it's easy to think that you need _more_ room to fit everything in nicely, rather than less.
Don't underestimate users. Give them the opportunity to use blue comic sans and some of them will use it :-)
The "adult class" stuff should go in the "beginner class" box, no? Assuming they're the same class (I honestly don't know).
// I guess you could also take the "beginner class" headline out of the box and only highlight the important data. (Then it would read "AIKIDO Beginner Class" at the top, which may or may not be useful. And the black box and the picture would be aligned.)
// Also if you switch the clip art and the address block you could fold the thing in the middle. (Basics on the front, details on the back, or something.)
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".
* 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!
In my programmer mind both sides of this argument are nothing more than 'I prefer this one' and 'I prefer that one'.
Is it possible to back up any design arguments empirically? Why do I never see anybody do it?
1. Aikido
2. Beginners
3. Regular schedule
4. Call to action: come visit
The obvious response is to suggest those might not be the best goals for the poster. That's fine, but when you look at the "before" poster again, you see that it can't really have any real goals, because it has (by design, on purpose) no hierarchy whatsoever.
I don't know what "weight balance" means in this case, but there are more type styles in the "before" than the "after".
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.
Some people will definitely find the left one more appealing. That is why it's important to know which demographics you want to target.
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.
* adult class
* no martial arts
* experience necessary
* call to reserve
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?"