10 ms·

Clean Up Your Mess – A Guide to Visual Design for Everyone (2011)

262 points by Garbage 12y ago

gabemart 12y ago
Did anyone else think the left flyer looked cleaner (although still very muddled)?
- kingofderpistan 12y ago
  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.
  - charliepark 12y ago
    The circle is an Ensō. http://en.wikipedia.org/wiki/Ens%C5%8D 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?
    - Mikeb85 12y ago
      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.
- aikah 12y ago
  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.
  - skeuomorf 12y ago
    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.
    - paulwithap 12y ago
      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.
      - tptacek 12y ago
        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.
- mattkenefick 12y ago
  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.
- TillE 12y ago
  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.
- rifung 12y ago
  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.
- analog31 12y ago
  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.
- Mikeb85 12y ago
  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.
- tdkl 12y ago
  IMHO it looked easier to read, since the font size was consistent in the information box on the right.
- kstenerud 12y ago
  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.
  - forgotpasswd3x 12y ago
    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.
- tptacek 12y ago
  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.
  - pdpi 12y ago
    > 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.
  - reitanqild 12y ago
Vektorweg 12y ago
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.
daphneokeefe 12y ago
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.
kdoherty 12y ago
I liked the poster on the left
meesterdude 12y ago
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.
- collyw 12y ago
  With the exception of 4, those would be good recommendations to apply to your code as well.
skeuomorf 12y ago
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 http://facweb.cs.depaul.edu/sgrais/gestalt_principles.htm [1] http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm http://graphicdesign.spokanefalls.edu/tutorials/process/gest...
moe 12y ago
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?
- rmrfrmrf 12y ago
  Do as they say, not as they do ;)
  - deleted 12y ago
    [deleted]
- theon144 12y ago
  I actually checked whether the site was meant to be satirical just based on the way the header looks.
honksillet 12y ago
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.
- bisrael 12y ago
  I'm not. Most programmer-generated interfaces are pretty terrible.
- analog31 12y ago
  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.
- dhimes 12y ago
  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.
- aw3c2 12y ago
  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.
  - GhotiFish 12y ago
    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...
    - aw3c2 12y ago
      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.
michaelpinto 12y ago
The typography on that page is a mess.
rmrfrmrf 12y ago
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.
- ianstormtaylor 12y ago
  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.
razorsese 12y ago
The one on the left is better
- collyw 12y ago
  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?"
  - kissickas 12y ago
    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.
    - collyw 12y ago
      See my other down voted comment with reasoning.
- razorsese 12y ago
  Maybe because i'm right handed i find the right one more appealing to me
heliostatic 12y ago
So far, the conversation today is tracking the conversation the last time this was posted pretty closely: https://news.ycombinator.com/item?id=2502663 https://news.ycombinator.com/item?id=2502663
msutherl 12y ago
Redesigning this poster should become a standard for comparing designers.
cubano 12y ago
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.
- collyw 12y ago
  Like this? http://theoatmeal.com/comics/design_hell http://theoatmeal.com/comics/design_hell
  - cubano 12y ago
    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.
    - collyw 12y ago
      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 http://projectcartoon.com/cartoon/2
ashleyp 12y ago
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!
- forgotpasswd3x 12y ago
  > 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.
  - ashleyp 12y ago
    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.
lqdc13 12y ago
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.
microcolonel 12y ago
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.
- untog 12y ago
  This might be Hacker News distilled into one comment.
- semi-extrinsic 12y ago
  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.
mrinterweb 12y ago
While reading this I was reminded of the worst example I can remember. http://www.milliondollarhomepage.com/ http://www.milliondollarhomepage.com/
kybernetyk 12y ago
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.
Namrog84 12y ago
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.
nonrecursive 12y ago
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 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 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/ http://www.flyingmachinestudios.com/design/cuym-thank-you/
- fmihaila 12y ago
  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/ http://www.princeton.edu/main/news/archive/S28/82/93O80/ [2] http://www.citylab.com/design/2014/10/why-12-foot-traffic-lanes-are-disastrous-for-safety-and-must-be-replaced-now/381117/ http://www.citylab.com/design/2014/10/why-12-foot-traffic-la... [3] http://www.citylab.com/commute/2011/09/shared-spaces/116/ http://www.citylab.com/commute/2011/09/shared-spaces/116/
grey-area 12y ago
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 http://www.paul-rand.com/foundation/identity/#.VRcG0JPwYZw El Lissitzky or other Constructivists: https://www.google.co.uk/search?q=el%20lissitzky%20poster 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 http://www.knoll.com/product/brno-chair-flat-bar Paula Scher: http://new.pentagram.com/2009/02/new-work-the-museum-of-modern/ http://new.pentagram.com/2009/02/new-work-the-museum-of-mode... Saul Bass http://www.saulbassposterarchive.com/ http://www.saulbassposterarchive.com/ Tufte on Minard and others: https://www.edwardtufte.com/tufte/posters https://www.edwardtufte.com/tufte/posters You'll learn more from studying those designs than you would from reading or looking at this.
- nthnclrk 12y ago
  ^ This is the only comment that needs to be read in this entire thread.
- Estragon 12y ago
  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?
taivare 12y ago
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.
- taivare 12y ago
  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 !
deleted 12y ago
[deleted]
alxdistill 12y ago
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/ http://brandist.co/brand-strategy-101/
patkai 12y ago
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 https://userium.com checklist is supposed to have the objective part, but even that needs a lot of iteration.
wodenokoto 12y ago
Both suffers from poor line breaks * adult class * no martial arts * experience necessary * call to reserve

262 points by Garbage 12y ago

gabemart 12y ago

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

kingofderpistan 12y ago
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.
- charliepark 12y ago
  The circle is an Ensō. http://en.wikipedia.org/wiki/Ens%C5%8D 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?
  - Mikeb85 12y ago
    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.
aikah 12y ago
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.
- skeuomorf 12y ago
  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.
  - paulwithap 12y ago
    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.
    - tptacek 12y ago
      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.
mattkenefick 12y ago
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.
TillE 12y ago
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.
rifung 12y ago
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.
analog31 12y ago
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.
Mikeb85 12y ago
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.
tdkl 12y ago
IMHO it looked easier to read, since the font size was consistent in the information box on the right.
kstenerud 12y ago
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.
- forgotpasswd3x 12y ago
  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.
tptacek 12y ago
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.
- pdpi 12y ago
  > 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.
- reitanqild 12y ago

Vektorweg 12y ago

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.

daphneokeefe 12y ago

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.

kdoherty 12y ago

I liked the poster on the left

meesterdude 12y ago

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.

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

skeuomorf 12y ago

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 http://facweb.cs.depaul.edu/sgrais/gestalt_principles.htm [1] http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm http://graphicdesign.spokanefalls.edu/tutorials/process/gest...

moe 12y ago

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?

rmrfrmrf 12y ago
Do as they say, not as they do ;)
- deleted 12y ago
  [deleted]
theon144 12y ago
I actually checked whether the site was meant to be satirical just based on the way the header looks.

honksillet 12y ago

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.

bisrael 12y ago
I'm not. Most programmer-generated interfaces are pretty terrible.
analog31 12y ago
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.
dhimes 12y ago
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.
aw3c2 12y ago
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.
- GhotiFish 12y ago
  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...
  - aw3c2 12y ago
    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.

michaelpinto 12y ago

The typography on that page is a mess.

rmrfrmrf 12y ago

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.

ianstormtaylor 12y ago
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.

razorsese 12y ago

The one on the left is better

collyw 12y ago
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?"
- kissickas 12y ago
  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.
  - collyw 12y ago
    See my other down voted comment with reasoning.
razorsese 12y ago
Maybe because i'm right handed i find the right one more appealing to me

heliostatic 12y ago

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

msutherl 12y ago

Redesigning this poster should become a standard for comparing designers.

cubano 12y ago

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.

collyw 12y ago
Like this? http://theoatmeal.com/comics/design_hell http://theoatmeal.com/comics/design_hell
- cubano 12y ago
  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.
  - collyw 12y ago
    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 http://projectcartoon.com/cartoon/2

ashleyp 12y ago

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!

forgotpasswd3x 12y ago
> 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.
- ashleyp 12y ago
  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.

lqdc13 12y ago

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.

microcolonel 12y ago

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.

untog 12y ago
This might be Hacker News distilled into one comment.
semi-extrinsic 12y ago
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.

mrinterweb 12y ago

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

kybernetyk 12y ago

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.

Namrog84 12y ago

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.

nonrecursive 12y ago

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 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 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/ http://www.flyingmachinestudios.com/design/cuym-thank-you/

fmihaila 12y ago
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/ http://www.princeton.edu/main/news/archive/S28/82/93O80/ [2] http://www.citylab.com/design/2014/10/why-12-foot-traffic-lanes-are-disastrous-for-safety-and-must-be-replaced-now/381117/ http://www.citylab.com/design/2014/10/why-12-foot-traffic-la... [3] http://www.citylab.com/commute/2011/09/shared-spaces/116/ http://www.citylab.com/commute/2011/09/shared-spaces/116/

grey-area 12y ago

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 http://www.paul-rand.com/foundation/identity/#.VRcG0JPwYZw El Lissitzky or other Constructivists: https://www.google.co.uk/search?q=el%20lissitzky%20poster 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 http://www.knoll.com/product/brno-chair-flat-bar Paula Scher: http://new.pentagram.com/2009/02/new-work-the-museum-of-modern/ http://new.pentagram.com/2009/02/new-work-the-museum-of-mode... Saul Bass http://www.saulbassposterarchive.com/ http://www.saulbassposterarchive.com/ Tufte on Minard and others: https://www.edwardtufte.com/tufte/posters https://www.edwardtufte.com/tufte/posters You'll learn more from studying those designs than you would from reading or looking at this.

nthnclrk 12y ago
^ This is the only comment that needs to be read in this entire thread.
Estragon 12y ago
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?

taivare 12y ago

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.

taivare 12y ago
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 !

deleted 12y ago

[deleted]

alxdistill 12y ago

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/ http://brandist.co/brand-strategy-101/

patkai 12y ago

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

wodenokoto 12y ago

Both suffers from poor line breaks * adult class * no martial arts * experience necessary * call to reserve