http://www.alistapart.com/comments/contrastandmeaning en-us A List Apart Article Contrast and Meaning Andy Rutledge is such an opinionated and knowledgeable author it's great to see him contributing to ALA - I love reading his articles. Tue, 24 Apr 2007 06:50:24 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#1 http://www.alistapart.com/comments/contrastandmeaning/?page=1#1 I guess this article is most comprehensive and profound among many latest efforts to describe the subject of contrast and hierarchy. I funny thing is that while reading it I remembered my father (an old school russian _constructivist_ designer) saying: bq. "a composition is a set of color spots linked (related) by contrast" Tue, 24 Apr 2007 08:30:35 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#2 http://www.alistapart.com/comments/contrastandmeaning/?page=1#2 bq. This is especially true for those of us who did not come to web design from a formal design or art education. As someone with no formal education in art and design well written articles like this really help to bridge the communication gap between myself and those people I work with who _do_ have a formal education in design. Good stuff! That was a real eye opener, thanks Andy! Tue, 24 Apr 2007 11:17:43 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#3 http://www.alistapart.com/comments/contrastandmeaning/?page=1#3 I _do_ have a formal design education, and a lot of this I already know (although a reminder is never wrong). However, some of it was new to me and will be taken to heart. I see many print and web designers today diving deep into code, standards and aesthetics without knowing the basics of communication. Hopefully this article sheds light on the subject to some of those people! Tue, 24 Apr 2007 11:47:08 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#4 http://www.alistapart.com/comments/contrastandmeaning/?page=1#4 Echoing Robert Swan's comment above, this is great reading for us non-designers. Thank you! Tue, 24 Apr 2007 11:51:10 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#5 http://www.alistapart.com/comments/contrastandmeaning/?page=1#5 Who's Virginia? Tue, 24 Apr 2007 14:06:19 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#6 http://www.alistapart.com/comments/contrastandmeaning/?page=1#6 Nice article. Shame you had to taint your example mockup with the filthy brush of Web 2.0 styling, it was going so well up until then Tue, 24 Apr 2007 14:11:41 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#7 http://www.alistapart.com/comments/contrastandmeaning/?page=1#7 Thanks for reading. I sincerely appreciate the nice comments. @James: I hope I can be forgiven for infusing a bit of tongue-in-cheek levity into the otherwise overly-serious article. Tue, 24 Apr 2007 14:51:14 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#8 http://www.alistapart.com/comments/contrastandmeaning/?page=1#8 Andy, I hit 'submit' by mistake there, so apologies for my message sounding so abrupt. I'm going through a bit of a Web 2.0 anger phase right now but am currently undergoing therapy to ease the tensions caused by this. Point taken :) Tue, 24 Apr 2007 15:01:35 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#9 http://www.alistapart.com/comments/contrastandmeaning/?page=1#9 @James: Don't worry about it. :) Like the man said, dying is easy, comedy is tough. It was a man who said that, right? Tue, 24 Apr 2007 15:24:13 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=1#10 http://www.alistapart.com/comments/contrastandmeaning/?page=1#10 One of my biggest problems when I started in this field was understanding these very things. It's only taken me 10 years to become mediocre at it. Very important stuff and the article was written very well. I'm sure I'll be referencing it in upcoming presentations. Bravo! Tue, 24 Apr 2007 16:05:04 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#11 http://www.alistapart.com/comments/contrastandmeaning/?page=2#11 Cameron Moll has a great slide illustrating text as UI v. text as information in a presentation of his. "Go to page 40":http://www.cameronmoll.com/speaking/2006/webjam/essential_web_skills.pdf of this PDF. My only comments about your first series of examples, Andy: the treatment you gave to the individual/pro/enterpirze buckets made them look so much like Google Ads that I automatically started to tune them out as such until I realized that there'd be no reason to have those in the example. Otherwise great article. Tue, 24 Apr 2007 16:26:20 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#12 http://www.alistapart.com/comments/contrastandmeaning/?page=2#12 Very good article, and I especially appreciate the introduction to visual hierarchies in layman's terms. It's something that *anyone* working with the web should have a basic grasp of. Just the other day I was doing a competitive review of other sites with my boss, and I was trying to impress on him how other sites had better visual hierarchies than we did. Now I can have him read this article. Tue, 24 Apr 2007 19:06:18 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#13 http://www.alistapart.com/comments/contrastandmeaning/?page=2#13 When I started reading the article and was enticed by learning about hierarchy and turning scanners into readers I was excited! Then I click over and was taken back by a lot of plain text after scrolling for a bit.. I almost laughed, then I realised it was a much longer article than I had anticipated, and had grphics showing some of the points that I had scanned over. Which did indeed make me back up and read more on each point. The graphics really helped solidify what I was trying to picture in my mind. Thank you, several great lessons in one! Wed, 25 Apr 2007 04:30:07 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#14 http://www.alistapart.com/comments/contrastandmeaning/?page=2#14 Thankyou very much for the excellent article Andy. As someone with a strong technical background but little-to-no training in graphics-design resources dealing with this side of thing are always greatly appreciated and don't seem to be available in abundance. As obvious as a lot of these things probably are to those with the appropriate background the information is greatly appreciated by those of us to whom these things may not be so readily apparent. Wed, 25 Apr 2007 05:53:14 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#15 http://www.alistapart.com/comments/contrastandmeaning/?page=2#15 Clear, concise and useful advice. Plenty of people can design something attractive but it's a real skill to design something instantly usable. I know that's where I need practice. Thanks Andy. Wed, 25 Apr 2007 12:43:37 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#16 http://www.alistapart.com/comments/contrastandmeaning/?page=2#16 As a web designer who definitely didn't come from an Art or Design background I am all too aware of the shortfall in knowledge. However the creation of web sites just keeps pulling me in. So articles as well written, comprehensive and challenging as this keep me going. Thanks for coming down and talking to us non-artistes. Wed, 25 Apr 2007 13:18:19 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#17 http://www.alistapart.com/comments/contrastandmeaning/?page=2#17 This article couldn't have come at a better time. I have been recently trying to figure out the best way to arrange content for a site I'm designing and this article answered a lot of questions I had. Like others have said, Brilliant! Wed, 25 Apr 2007 18:10:41 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#18 http://www.alistapart.com/comments/contrastandmeaning/?page=2#18 I recently wrote an article on "Presenting with Professionalism." Same ideas as this article, but yours is written so much better. Great Job! Wed, 25 Apr 2007 19:30:45 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#19 http://www.alistapart.com/comments/contrastandmeaning/?page=2#19 Andy, I'm an Attention Deficit Designer and you're writings always keep me locked-in and retaining everything you say, to later use in my own work. With me, that's a rare thing. Thanks! Matt Thu, 26 Apr 2007 14:40:47 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=2#20 http://www.alistapart.com/comments/contrastandmeaning/?page=2#20 An invaluable assemblage of know-how, perpetually useful. Thu, 26 Apr 2007 14:52:47 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#21 http://www.alistapart.com/comments/contrastandmeaning/?page=3#21 This is a topic many of us are haunted by. No wonder people develop attention deficit - the intellectual world can seem boring because there is too much attention to organized content and not enough to color and design. I found elementary school a wasteland - very little artistic opportunity. I was always an honor student anyway, but became warped and stifled. The art I had worked on by the day at age 5 was relegated to a dark corner when I entered school. Most websites achieve one facet while being faulty on the other. Your illustrations of what indicates emphasis graphically are important reminders. I actually read blogs based on pleasing design and smooth pageload more than on content. A well-designed blog or website has an ambience, which I think can inspire confidence in what the site has to offer. Since I have just recently given up searching out the latest hacks for browsers and now use Yahoo grids, I am pleased at the first results. I have put up a lightning banner this week, which I can see on quick analysis is subconsciously a reflection of spring storms here in TX but also illustrates my tattered synapses - hopelessly firing up new hacks for the past several years. I can't believe I have a colorful logo and banner at long last. Let YUI handle the skeleton, and I can spend all my time on the skin and content that I may even have a little free time to think about. I'm glad to have this article for a reference. It comes just as I have shifted focus to design on my site and blog. Thanks. Sat, 28 Apr 2007 16:42:59 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#22 http://www.alistapart.com/comments/contrastandmeaning/?page=3#22 Very interesting article indeed! The longer I am working in the web design business, the more convinced I am that I am missing some very basic design skills. I used to think that graphic design and web design were 2 separate professions, but they both build upon what you call the basic rules (article "rules and context" on your personal site). The rules of contrast are among the basic rules that should be understood by all web designers. I hope you will contribute many more articles explaining other rules! Wed, 02 May 2007 10:04:07 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#23 http://www.alistapart.com/comments/contrastandmeaning/?page=3#23 Really enjoyed reading this one, really well written, as a non-designer it has given me a lot to think about! I look forward to reading further articles. Thu, 03 May 2007 14:18:06 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#24 http://www.alistapart.com/comments/contrastandmeaning/?page=3#24 Thanks, Andy! As another non-designer myself, this article does help clarify my own thoughts about communicating concisely with designers, as well as with clients who need help understanding the purpose of all creative aspects related to front-end Web production. Thu, 03 May 2007 19:24:31 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#25 http://www.alistapart.com/comments/contrastandmeaning/?page=3#25 Great article. I received my college degree in marketing, not art, and this article was very informative in showing how to bridge the gap between copy and design. As some of the posters above have mentioned, a good balance between content and artistic appeal is difficult to achieve, but you've managed to clarify it. Great article! Fri, 04 May 2007 04:44:14 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#26 http://www.alistapart.com/comments/contrastandmeaning/?page=3#26 Optimizr... I crapped my pants from laughing. But - you forgot about the wet floor effect (sic!) on the logo! Fri, 04 May 2007 13:09:30 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#27 http://www.alistapart.com/comments/contrastandmeaning/?page=3#27 Andy, your articles are always helpful. I was thinking of this very subject recently in preparation for a class I'm teaching in the fall. The more I think about design the more I believe contrast is the foundation of design and any other principles we may use are derived from it. This article reinforces what I had been thinking. Fri, 04 May 2007 20:08:35 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#28 http://www.alistapart.com/comments/contrastandmeaning/?page=3#28 I've become involved in web design about 8 years ago. I don't have an artistic background and I feel obliged to say that design, for me, is not art. It certainly is communication though, as you remark. Your article made me realize how artistic principles apply, not only to the web, but to every single part of our everyday living. Such a delightful article that was, and you, you have such a direct way to convey your messages. I've learned many, I realized even more. Thank you :) Fri, 25 May 2007 08:56:23 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#29 http://www.alistapart.com/comments/contrastandmeaning/?page=3#29 I neither have an artistic background nor strong ability to communicate design ideas I every now and then come across at work. This article is a perfect example of how it's important to be able to articulate a certain design choice to those involved in a design process, especially to a client. Fri, 08 Jun 2007 12:40:19 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=3#30 http://www.alistapart.com/comments/contrastandmeaning/?page=3#30 I see many print and web designers today diving deep into code, standards and aesthetics without knowing the basics of communication. Hopefully this article sheds light on the subject to some of those people! Tue, 19 Jun 2007 11:33:25 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#31 http://www.alistapart.com/comments/contrastandmeaning/?page=4#31 Thanks for the inspiration Andy. I must echo the other comments as I lack a strong understanding of the fundamentals of art and it makes communicating more and more difficult as I try to express more complex ideas. Combine that with the necessity to keep up to date with technology and it becomes a real challenge to concentrate more on the basics that are so important. Having said all that, would anyone like to share some great resources for learning in this field, or recommend ways to learn without going back to school. There must be some great books out there? Google here I come ... Mon, 25 Jun 2007 01:30:10 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#32 http://www.alistapart.com/comments/contrastandmeaning/?page=4#32 Thanks, everyone, for the nice comments. I'm very happy that you've enjoyed and got something seemingly worthwhile from the article. I've not checked in here in a while and didn't realize that there were so many comments since I was here last. @N Campbell: I appreciate your question about resources to help aspiring/learning designers (all of us) go back to school on this stuff. I can recommend a couple of useful resources: "Universal Principles of Design," by Lidwell, Holden, and Butler and "Painting Better Landscapes," by Margaret Kessler. Both of these books can be quite valuable to anyone seeking a better grasp of design communication and human perception. I hope that some of you pick them up and utilize the great information within. Kind regards, Andy Tue, 26 Jun 2007 14:00:34 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#33 http://www.alistapart.com/comments/contrastandmeaning/?page=4#33 Very nice article, I'll most certainly be passing this on to some designers I know. Keep it up! Regards, Scott. Wed, 21 Nov 2007 20:56:34 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#34 http://www.alistapart.com/comments/contrastandmeaning/?page=4#34 i think that,s very nice work by you. Wed, 02 Jan 2008 05:59:40 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#35 http://www.alistapart.com/comments/contrastandmeaning/?page=4#35 As a struggling web designer without a design background, this article may have saved my career! All kidding aside, I think I learned more from reading this article than from years of reading so called "design" books. Thanks a lot! Thu, 10 Jan 2008 21:52:52 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#36 http://www.alistapart.com/comments/contrastandmeaning/?page=4#36 I have a problem with white and black colors. http://www.mwoa.ru/images/uploads/vemas.jpg - if you look at right part of image, where black menu panel meets shadow, you can understand that black panel is 1px smaller than white below... And that shadow is less bright. Who can explain me the reason why it happens or refer to an article I can read to unserstand such effect? Sat, 26 Jan 2008 21:02:02 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#37 http://www.alistapart.com/comments/contrastandmeaning/?page=4#37 I feel mostly, it is the web 2.o bug which has bitten a lot of web designers around the world. We need to think creatively and keep sharpening our tools, learning is an ongoing process... “Universal Principles of Design," is a great resource indeed, every designer should have it on their table. Thanks Andy, for this article, I will surely pass it on to my design team. Fri, 14 Mar 2008 09:28:03 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#38 http://www.alistapart.com/comments/contrastandmeaning/?page=4#38 i should appreciate this post by you this is indeed a great post. Sat, 22 Mar 2008 06:43:59 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#39 http://www.alistapart.com/comments/contrastandmeaning/?page=4#39 you may also look at some of these sites. http://laptops.baysworld.com http://jewelry.baysworld.com http://pontoonboats.baysworld.com http://www.scriptinstalled.com Mon, 31 Mar 2008 08:16:14 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=4#40 http://www.alistapart.com/comments/contrastandmeaning/?page=4#40 Just wanted to say thanks for a great article. I often get so tired when designing a layout. I just want to get it done and move onto the building of the site, my favorite part. I need articles like this to help me persevere through it and make my designs/layouts more meaningful and purposeful. Your article was a great refresher and motivator. thanks again Sun, 06 Apr 2008 06:17:53 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#41 http://www.alistapart.com/comments/contrastandmeaning/?page=5#41 Thanks For The Great Work You Have Done. Tue, 17 Jun 2008 05:20:31 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#42 http://www.alistapart.com/comments/contrastandmeaning/?page=5#42 i think it,s a great post. Tue, 17 Jun 2008 05:21:15 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#43 http://www.alistapart.com/comments/contrastandmeaning/?page=5#43 I certainly learnt something new Wed, 08 Oct 2008 08:20:26 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#44 http://www.alistapart.com/comments/contrastandmeaning/?page=5#44 i think contrast has it,s own meaning. Thu, 23 Oct 2008 08:34:09 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#45 http://www.alistapart.com/comments/contrastandmeaning/?page=5#45 hi your article is very good. Thu, 23 Oct 2008 08:35:16 GMT http://www.alistapart.com/comments/contrastandmeaning/?page=5#46 http://www.alistapart.com/comments/contrastandmeaning/?page=5#46