Hacker News new | past | comments | ask | show | jobs | submit login
Clean Up Your Mess – A Guide to Visual Design for Everyone (2011) (visualmess.com)
262 points by Garbage on March 28, 2015 | hide | past | favorite | 111 comments



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

[2] http://www.citylab.com/design/2014/10/why-12-foot-traffic-la...

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


Increased attention only pays off if the user pays attention.


If you are a designer, you know that clients like to find something to criticize or change; the same is true with HN commenters. Thanks for the site, which taught me some useful things. The right-hand poster is far superior and I don't know how anyone says otherwise. Information is much easier to find and it's far more beautiful.


Put your finger, or a piece of paper over the little line that protrudes, and bisects the bottom horizontal line on the left flyer. Look away, and judge the two flyers again. The difference between the two wasen't as stark as before--for me? I'm looking at them on an ipad. (I know I will always make sure my lines match up in the future.)


I like how unpretentious the example is. Your site really says you don't need to be a master designer to tighten up your stuff, make it easier to decipher and get a better result.

It also says that design is a part of everything.


Its a subjective area, so is bound to gather lots of opinion from either side.


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.


The important information is larger and more legible in the poster on the left. I can locate the schedule, address, phone number and URL immediately.

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.


> The important information is larger and more legible in the poster on the left

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.


The thing is, none of those headers are even necessary. For example, replace "Beginner Class" with "AIKIDO", remove the "Regular Classes" and "Come Visit" headings, enlarge the text, and you've already improved the poster.

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.


Your left or my left? Seriously, I assumed he was describing the one on the left for most of the discussion until showing the posters again, when I realized he didn't do his job.

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.


If the design doesn't bring needed information to the fore immediately, then what's the point?

The web abounds with bootstrap websites which fail to give any real information.


The one on the right is cleaner (even if it appears to be allergic to centering text), the one on the left is better at presenting information in a way that people can find what they're looking for.

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


The call to action isn't very useful if it, for example, generates calls from people who didn't read the class schedule to know if they can even take the class. I didn't say "couldn't" because it's an important distinction to make between legibility of the words and our willingness to read them before taking action.

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.


I don't totally disagree. But honestly, people are too lazy to read most of either poster. If the entire thing was just

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


It reminds me of cheap local newspapers, I kinda have a positive reaction to it. Definitely feels more down to earth and personal. Professionalism can be a turn-off.


I think this is maybe what's going on. There are pragmatic choices that make things easier for us, but every element will have an emotional context as well.

It's odd, when I was looking at that aikido ad, I thought I could faintly smell newsprint paper...


Yeah, same here. Also I interpret it as a already well-established place, something that has been successfully run for a while. The other one screams "Hi, we are a new institution" which gives me a wary response. It just misses some smiling stockphoto woman.

There must be a lot of testing and research in "cheap looking" ads, this might be a great example of the resulting emotional responses.


I'm not a designer, but a musician. You can find pairings of performances, where if you put them side by side, the public will choose the one on the left and the musicians will choose the one on the right. The musicians may have funky tastes, but in addition, they're informed by the terminology and theory of analysis.


Am I the only one who thinks that the margins of the right one are far worse?They almost negate the better structure.


I think the one on the right is cleaner, but the font for the text explaining Aikido is easier to read on the left. Hence which one is 'better' is hard for me to decide.


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?


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


A better test might be: what if this was a street sign? I'd probably have to get out of my car to read the one on the right. If the goal is to convey information quickly and efficiently, I think the left one has the edge.


The one on the left really is a train wreck. All the points that are brought up with alignment, grouping, and sizing of related elements are clearly illustrated in these two examples. Not saying the right is perfect, but it's far better than the left. Worth it to reread the article and carefully consider the points if you feel otherwise.


A joke isn't funny if it needs to be explained.

A design isn't good if a designer needs to tell me to look again, but look better this time.


Are you saying that design is innate, and can't be learned? I disagree.


I'm saying that if you need to explain why one flyer is better than another then the design might not be as strong as you think.


Right, so innate it is. Folks who have studied design will be upset to learn this.

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 point of design is to study and think a lot so that you can create a message that viewers can receive without thinking. Most of the public have not studied design, and they are the ones your design needs to impact. Recognizing good design is innate, but creating and understandin it is not.


To me, the one on the left is better (with a few tiny changes) . Font choice is better, it is more legible and actually it has better balance overall. So I think author "fixed" it too much :)


I thought the one on the right looked better, but honestly it's just a cosmetic preference. I didn't think the information was any harder to find or parse on the left-hand version... it just looked a bit less "professional."


The right poster has better layout, and is more "beautiful" but less readable. I want to get the important details, not admire the use if indentation and italics.


I'd argue that the one on the RIGHT is a train wreck... if it's a PHYSICAL poster, I want stuff to be readable... how can making every single important point smaller be better?

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


Maybe because of anchoring?

http://en.wikipedia.org/wiki/Anchoring


What I found interesting was when the one on the left was half below the fold, it appeared much cleaner than the one on the right. Only when viewed in their entirety did I find the one on the right to be cleaner.


The important information is not "Beginner Class" but rather "Starts Sunday..."— The right one is better, but absent a bit more emphasis on that, you're not getting anything out of it.


I'm not. Most programmer-generated interfaces are pretty terrible.


I like the left hand side of the left one and the right hand side of the right one.

Maybe the idea that the right one is more appealing to everyone is a lot more subjective than he would have us believe.


I find both bad tbh.


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?


I actually checked whether the site was meant to be satirical just based on the way the header looks.


Do as they say, not as they do ;)


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.


This might be Hacker News distilled into one comment.


It's amusing how, even though the site is "responsive design", we're all talking about left and right. On a phone the user sees instead top/bottom images. I guess responsive design isn't something you can just delegate to your framework and then forget.


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

[1] http://graphicdesign.spokanefalls.edu/tutorials/process/gest...


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.



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.


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


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

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.


^ This is the only comment that needs to be read in this entire thread.


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?


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.


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.


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


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


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.


> Neither of the designs are good-looking (but that may be the point).

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.


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


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!


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.


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

Don't underestimate users. Give them the opportunity to use blue comic sans and some of them will use it :-)


The spacing on the right is so much worse than everything else combined. The text is much too close to the borders, the heading are much too close to the text, the weight balance is all off, it's completely all over the place.


The text in the right hand picture is almost but not quite on a baseline grid. It's not perfect, but it's consistent. The text is consistently further from the page margins than in the "before" version. All the text on the right hand column lines up on a single line.

I don't know what "weight balance" means in this case, but there are more type styles in the "before" than the "after".


I agree, but you've missed the most important point (IMHO).

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


"The left design though is objectively inferior"

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?


It's easy to see how the "after" is better if you assume the goals of the poster are to communicate:

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.


Right flyer has a way better info hierarchy. Highlights are more readable from a distance : Aikido(subject) , beginner classes, regular classes, come visit(call to action). I don't know Aikido (I'm a Taido guy) so I don't know what the symbol on the bottom represents.


Also, the contact information on the left is not uniform (i.e. not similar) which creates unnecessary contrast and being emphasized (via size, all uppercase, boldness) it attracts unwanted attention (You don't want the contact information to grab the eye of your reader, because it takes some of his time and he might lose interest before even figuring out what your flyer is about, someone who has read your flyer and is interested in finding out more will seek out the contact information).

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.


When you have to use design principles to argue against the fact that many people think the "poorly designed" poster looks better, your principles have failed you, and maybe it's time to reconsider them.


There is no reasonable way to argue that the "before" poster is better designed. Centered text, contact information typeset as loudly as the rest of the content, mixing uppercase and boldface for section headers, a URL bleeding into the margins.

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.


> There is no reasonable way to argue that the "before" poster is better designed.

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.


He lost me in the first paragraph, because my first thought was that the one on the left looked a lot nicer.

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.


I feel the one on the left was easier to skim through. The one on the right might be designed better, but I found it more difficult to skim.


Yeah, I think none of the 2 look really good, but the left one looks cleaner.

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.


The circle is an Ensō. http://en.wikipedia.org/wiki/Ens%C5%8D

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


Yes the Zen circle thingy ties in to Aikido. Aikido is a (some say useless) martial art which emphasizes using an attacker's motion against him, and philosophically contains many philosophies which it shares with Zen Buddhism.


Exactly how I felt. I think this is because I focused on the left part of both pages instead of the right. The left side of the left flyer is much easier to read because the right flyer's text is too small and kind of ugly.

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.


No. Definitely not. The left one made my head hurt, was hard to follow. The right one had much more clearly formatted, cleaner, and easier to follow.


I preferred the left one too, but I was looking at them side by side on a 11.5" notebook computer display, and the flyers were presumably designed for printing onto 8.5x11 paper.

Another possibility is that we may be looking at two bad designs.


I came to the comments for this. I immediately liked the left way better, and then saw "If you said right one, then I did my job." I stopped reading after that because he obviously didn't do his job.


Every piece of important information is larger and clearer on the left. Obviously there are flaws, but I think it could have been redesigned in a much more effective way.


IMHO it looked easier to read, since the font size was consistent in the information box on the right.


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!


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


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.


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


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 checklist is supposed to have the objective part, but even that needs a lot of iteration.


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.


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.


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.


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.


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.


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.


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 !


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/


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.


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.


While reading this I was reminded of the worst example I can remember. http://www.milliondollarhomepage.com/


The typography on that page is a mess.


I liked the poster on the left


Redesigning this poster should become a standard for comparing designers.


Both suffers from poor line breaks

* adult class

* no martial arts

* experience necessary

* call to reserve


The one on the left is better


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


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.


See my other down voted comment with reasoning.


Maybe because i'm right handed i find the right one more appealing to me




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

Search: