Monday, October 11, 2010

Visual Design For...The Rest of Us

If you’re a former (or current) video game player, then at some point in your life you may been driven by a demented urge to win the damn thing to web sites that provided walkthroughs or cheat guides to the game. And if you did this, then you know that inevitably, there was a format for these guides-- a long text document with technical organization (section 1, 1.1, 1.2 etc). What I could never figure out was, “WHY on earth if you’re putting this on a WEB PAGE would you not provide hyperlinks, graphics, or other visual cues? WHY, DEAR GOD, WHY?”

Once in a fit of visual frustration, I even emailed the author of such a guide and she responded that the web site (IGN I think it was) required the guides in this format. That didn't answer the question of why, but the author was sweet and agreed that the text guides were heinous beyond all belief. Later, she scored the book contract with Prima to write the guide to the game, where her walkthroughs and cheats could be displayed with graphics, headers, and appealing layout. I was so proud of her.

Last week I clicked on a link for a post about branding and writers. But when I arrived, I am sorry to say I couldn’t read it because it was one long block of text. No separations, no headers, no guides. I promptly clicked my butt out of there, amused that a post on branding would have violated such a basic rule about readability.

But I don’t hold it against that author. After all, it’s hard to know what to do in the first place. Don’t spend time feeling bad if you don’t know. You’re not supposed to know. Unless you took visual design courses or studied this stuff, how would you know?

Well, I know. And I’m going to share some basics with you so no one ever clicks out of a post that you put a lot of time and effort into writing.

Use Contrast
Contrast -- easily rendered as bolded text-- creates a pleasing relief for eyeballs. And it’s noticeable. I remember when I was a tech writer there was this engineer who loved to CAPITALIZE everything important. I told him that the human eye actually skims over capitalized words because there’s no peaks and valleys. Harder to read! He denied it, but empirical research exists that proves it. So keep that in mind. CAPITALIZATION SUCKS AND IF YOU WRITE EVERYTHING IN CAPS, IT’S MORE LIKELY TO BE SKIMMED. I prefer bolding -- and for extra kick, bolding in a different color.

Use Colors Effectively
Here’s color theory in two seconds for you: the human eye likes warm colors (reds, oranges, yellows). And I can tell you from years of walking tradeshow floors that the most noticeable exhibits of all the exhibits trying to be noticed are the ones that used bright colors to draw the eyes. Bright green worked really well, but it’s less likely to work in text headers than it is on big signs on a tradeshow floor. If you use bright green, use it in big blocks of color, not text. Better to use orange, which does the same job as green, and it's a warm color.

Break Your Crap Up
Make your stuff palatable by giving me info chunks. It’s called “chunking” in the tech writing field, and it’s about giving doses of information in digestable sizes, not one long spaghetti plate of words that I can’t handle. This means headers and pictures--even if they seem obvious. The goal is getting readers to spend time on your post--not click through because they don’t have time to digest long blocks of text. And headers help people see what you have going on.

Be as Short as Possible
This rule is really an extension of the chunking rule. You’ll notice that I violated the shortness rule here, as I do almost every day. But I also broke my large chunk of introductory text up with graphics, to ease your pain. So when you simply can’t be short, give the eye some relief in the form of diverting graphics.

Don’t Use More than Two Fonts
This really is a legitimate rule. Use more than two fonts in the same document/blog/whatever, and people’s brains start overloading and smoking. You don’t want that. And while we’re on fonts, use ones that are readable. Don't use a western font or anything that relies on thick, narrow letters. Hard to read! When I started at my current company, they had a logo with the company name in a font that was actually unreadable. One of my first actions was to change it to a font that was much more appropriate -- and readable from a distance away. It caused a major war, but I won out because no one could quite argue that the unreadable font was actually readable, only that it was “cool.” (Which it wasn’t.)

Know that White Space is Your Friend
The number one mistake I see non-designers make is to clutter a page up with extra things. There is a fear of white (or open) space, as though all that space will show you up for being a non-designer. Not true! Quite the opposite! In design, simple is always cleaner and clearer, and you will never go wrong with putting less. That goes for any page element. To illustrate, here is a blog that uses white space effectively, for a clean, clear look (it's TH Mafi's blog--and she works in design in some capacity, as you can probably guess). And on the flip side, here is a web site that is considered extremely awful. And just for kicks, this one too.

I hope this helps. There is a fantastic book on this subject that I highly recommend:

The Non-Designers Design Book
by Robin Williams


Linda G. said...

Ack! My eyes! (That's for the two negative example links you posted--eek.)

Brilliant post, especially when you consider how many people read multiple blogs every day. The easier on the eyes you can make yours, the more likely your readers won't decide to navigate away before they finish reading.

Suzi McGowen said...

I love Robin William's books. I became a pretty successful web designer for a number of years based on the information I got from her books on design and web design.

demery bader-saye said...

Thank you, Sierra. Very helpful! Can't wait to take your rules back to my blog and consider how I'm doing on each point... may need to make some changes.

atsiko said...

Great post, and something I know I need to work on for my own blogs. But I don't need to work on it quite as much as the two eye-ball-lacerating links you posted.

Also, I totally agree about those darn IGN game guides. I hate that crap so much. 1 <3 hyperlinks. :)

Anne R. Allen said...

This is so important. I wish Blog hosts had a set of basics for bloggers, so people wouldn't continue to write huge undigestible blocks of text without bullets or bolding or whitespace or anything else to relieve the eye.

I didn't know about the warm colors rule, but I've read that green is easy on the eyes, so I try to make my blog a kind of restful oasis.

Thanks. This is useful stuff.

Post a Comment

Note: Only a member of this blog may post a comment.