9 ms·
Clean Up Your Mess - A Guide to Visual Design for Everybody
- Raphael 15y agoYes, I feel like strangling anyone who center-aligns a mass of text.
- mnazim 15y agoNice one. Agree when 100% with the title. There is something for everyone in this one. I absolutely loved the part about elimination. I am not a designer myself(that means I can't design from scratch), but when I design something I take couple of example and start eliminating stuff until I reach a point where all non-important or less important bit have been removed. My philosophy in design is - If it is not/less important, it probably should not be in there.
- PStamatiou 15y agoAm I the only one that hates when people keep referring to a design as being clean? That is quite possibly the least descriptive feedback anyone can give me on my designs. This explains exactly where I'm coming from: http://52weeksofux.com/post/4046226488/why-clean-isnt-such-a-dirty-word-for-designers http://52weeksofux.com/post/4046226488/why-clean-isnt-such-a...
- d0m 15y agoClean in the sens: "Clean is better than an mess". The article seems to be written for non-designers who know practically nothing about design. And for them, clean is something great; it means they can effectively represent their ideas.
- Jabbles 15y agoHow does the random circular smudge in the "improved" design fit in with this goal?
- nonrecursive 15y agoYeah... if I were doing the flyer again now, I probably would eliminate the circle, and make the contact info larger, spanning the two columns. Initially, when I was making this site, I wanted to have an area for people to have conversations about it, in part so I could explain all these little details. There's a lot I wanted to explain that I just couldn't fit into the site because I thought it would be too tangential.
- cemregr 15y agoIt's not a random smudge, it's a meaningful Japanese symbol.
- Lagged2Death 15y agoIs a non-specific compliment ever useful feedback?
- _grrr 15y agoDid anyone else find the Aikido flyer on the left the most readable? The version on the right might be 'neater' but I was able to absorb the information from the left version more easily.
- fabiandesimone 15y agoYes. The left version, at least for me, conveyed the info more clearly. Oh the ambiguity. Gotta love it :)
- arctangent 15y agoYes, and it wasn't even a close thing! Advantages of the flyer on the left: - The "Aikido" title has more whitespace around it, making it easier to distinguish as a separate visual element from the photograph and making it easier to see from a distance (as would be necessary for a flyer). - The text below the photo is larger than the version on the right hand side, and does not have a confusing symbol following it. (Presumably this symbol is something Aikido-related.) - The text in the top-right box is centered and bolded for clarity. The alignment in the second flyer makes no sense, and in combination with the closeness of the title and the photo the whole top part of the flyer looks pinched together. - The telephone number is large and easy to read. It's even preceded by a call to action ("Call xxx")! - The URL is larger, bolded, and capitalised for easy comprehension.
- zmmmmm 15y agoYes. While the LHS version has some obvious issues & glitches I found the inconsistent fonts on the right to be annoying and so small that they deemphasized important information such as the times of classes. Some of the removed formating changed the meaning to me - eg: putting "PLEASE COME AND VISIT" in upper case and bold may be tacky but it really emphasizes one of the most important "calls to action" on the flyer. I really couldn't decide which one I liked better at the start.
- Jabbles 15y agoSurely the largest difference between them is the change in font? Why is that not discussed? Also, I thought (though I am no expert) that a general aim was to limit the number of font styles. Why has he added a serif style?
- aik 15y agoThis looks very similar to a good part of "The Non-Designer's Design Book" in both structure and content. Cool that it's free. Great book.
- nonrecursive 15y agoThanks! It was very much inspired by The Non-Designer's Design Book.
- nonrecursive 15y agoThe github repo is available to anyone interested: https://github.com/flyingmachine/clean-up-your-mess https://github.com/flyingmachine/clean-up-your-mess
- Symmetry 15y agoOne thing I noticed when looking at the two fliers and hadn't considered before, but which didn't seem to be spelled out in the article is that design for fliers is in some ways fundamentally different from design for web pages. We're only ever seeing web pages from one distance, but a flier has to first call attention from a distance and then when someone comes close give the information needed for them to do something about it. The original version, when seen from a distance, could easily be mistaken for a demonstration or a movie or such, since only the picture and title are in very large and distinct fonts. The new version, by contrast, has "Beginner Class", "Regular Classes", and "Come Visit" popping out making it clear to someone walking by that the cool stuff in the picture is something you can learn rather than just see. And once the attention of the potential customer has been caught and they stop, then they can read the fine details.
- nonrecursive 15y agoThanks - you perfectly described my rationale for the header sizing.
- DougBTX 15y agoI don't know of any numbers to back it up, but I suspect that there are strong parallels to be drawn between the speed of someone scanning a web page, and the distance someone is from a poster.
- spacecadet 15y agoDesign is subjective. To say something is clean vs messy is to not understand that. To create effective design is to use the elements and principles of design effectively. Clean is not an element nor a principle, it should be the end product of something well designed. "a guide to visual design" IMO should consist of explaining the elements and principles of design in a way that non-visual thinkers would understand. I highly recommend reading, "Point and Line to Plane" and/or "Art and Visual Perception" if you have any interest in design, they are great text's that explain the underlying psychology of visual perception. One is written in "Whacked out art speak" and one in "laymen's terms". Ironically the harder to read of the two is 2/3 smaller in size.
- bitsm 15y agoAgree 100%. Design is art with a goal. "Clean" is not a goal, nor is "messy". Given how many articles on lean startups and testing are posted here on HN, I'm surprised how many readers are swallowing the author's advice without questioning WHY "clean" is better or necessary. The author himself said here in this thread that he isn't interested in testing at all. That, to me, shows a fundamental misunderstanding, and frankly disrespect, for great design. The parrot secrets ebook is a classic example of great design that is definitely not "clean". Yet it is successful. Never confuse your personal aesthetic with design. There are great books to learn from, and everyone should take all these book recommendations to heart. But take the time to absorb the professional advice, and try and synthesize it into rules you can work with and apply properly.
- nonrecursive 15y agoHmm... I didn't say that I'm "not interested in testing at all", and it's unfortunate that I came across that way. In fact, years ago I created a Rails tool for performing a/b split tests: https://github.com/flyingmachine/rails_ab_split_tester https://github.com/flyingmachine/rails_ab_split_tester . Also, in the resources section of the site I link to Don't Make Me Think, which strongly advocates quick, cheap user testing. However, I felt like a discussion of testing was outside the scope of site. And unfortunately, I don't have the time to conduct proper tests myself. I wish I did, but I've spent a great deal of time on the site already, and it's time for me to work on other things. However, this is why I made the site available on github - if you'd like to improve the site, please do create a pull request. If I come across a little surly here, it's because it's bizarre to me have put so much effort into the guide, motivated solely by my love of design and desire to engender it in others, only to read that somehow I'm exhibiting disrespect for great design. Re: "clean" - keep in mind that the site is meant to be an introduction to design. People who have no design vocabulary nonetheless have an implicit understanding of "clean" and "messy". For many people, "clean" can in fact be a goal, and I felt no need to ignore the way people actually use the word. Also, it made for a fun title :) I try to explain what I mean by "clean" design in a way that's not limited to personal aesthetic - it's design that allows the audience to quickly find the information they need. Did that not really come across? If it did - do you think that making information easy to find is not a valid goal of design? Or do you disagree with my definition of "clean"? It seems like we're not using the word "clean" in the same way, but if we are, I'd love to hear your thoughts on why you think "clean" isn't better or necessary.
- jaysonelliot 15y agoExcellent site. While professional designers have invaluable skills that are honed over years of experience, good design is something everyone can learn the basics of. I can't agree enough with the recommendation the book "The Non-Designers Design Book." It's been around in various editions for over fifteen years, and has been on more designers, coders, and IAs bookshelves than I can count. I'd like to share one more design "secret" that every graphic designer knows, and everyone can start using in a matter of minutes: The Grid. Most designers work with an invisible grid that all of their elements live within, or sometimes break out of. It can be any size and ratio you want to make it. If you begin with a grid system, you'll be able to get as creative as you want with your layout, and things will fit together better and just "feel right" when you're done. The best book I've found about grids is The Designer and the Grid http://amzn.to/lYAcyQ http://amzn.to/lYAcyQ You can also go to http://www.thegridsystem.org/ http://www.thegridsystem.org/ which actually lives up to its subtitle of "The ultimate resourcein grid systems."
- nonrecursive 15y agoYes, the site itself actually uses a grid. To create it I used susy: http://susy.oddbird.net/ http://susy.oddbird.net/
- pge 15y agoOne note for designers about color blindness - the "strong contrast" green dots (with one red one) example has essentially no contrast for those of us (~1 in 10 males) who are red-green color blind. All the dots appeared the same color until I saw the text which suggested one of them was different. Yellows and blues are safer color combinations to use if you are looking for contrast.
- jaysonelliot 15y agoVery good point about color blindness. When designing a site, I recommend that people run it through Vischeck - http://www.vischeck.com/vischeck/vischeckURL.php http://www.vischeck.com/vischeck/vischeckURL.php Vischeck is both an online and downloadable tool that will show you how your design looks to people with varying types of color blindness.
- nonrecursive 15y agoThanks - I hadn't considered that. I'll add it to the list of improvements I'd like to make.
- munificent 15y agoMy rule of thumb is that if I'm using color to distinguish something, to never vary just hue. Always include a saturation or brightness change too.
- aneth 15y agoThis is a great article covering the same essence of visual design covered by many books. After understanding these principles you should be competent to do basic layouts. I find many designers do a worse job of internalizing these concepts than your average engineer would if they only took the time to try. Engineers are good at extrapolating from principles. Design is no different.
- charliepark 15y agoOn the "after" flyer, you might move "experience" up to the preceding line, and, perhaps, indent the second line of it. Reason being: As it is, you're separating the key data bit (no) from the actual subject/noun (experience). Someone scanning it might take "experience necessary" out of context, and get the wrong meaning from it.
- barisme 15y agoWow. Thank you. I'm still reading but so far you've increased my visual IQ by 1000%.
- AbyCodes 15y ago"If you're like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can't articulate it or make it come about. All you can do is point and cry." A very nice introduction! Thanks a lot. Brief, to the point, good examples to supplement the text, with pointers for further reference to good books as well. Love it.