Introduction to Design Columns: Ninja Style

Several weeks back, I'd mentioned explaining what I meant by design columns.  Since you are reading this, I'm going to assume that you've actually returned to me with the diamond-tipped hairpin of the seventh sister of the Lost Shogun and we'll settle the balance later.  My kung fufool is strong, so don't try anything funny.  This will be a multi-part series because, frankly, if I had to sift through a post that's going to be as long as this one is all in one go, I'd have to have some prep time with a coffee maker.

This is the Introduction to Design Columns (or, How Not to Cause Heather to Make that Funny Face as She Looks Over Your Shoulder).

Because I enjoy starting everything with a disclaimer, I'll point out that not all designers go this route.  Some are so awesome that they can metaphorically dip a toothbrush in paint, aim in a general direction, and toss back a glass of fine wine while running a thumb over the bristles to create a perfect masterpiece of a website, a creation of visual acumen and sheer usability.  Others, like me, have to fight for it. With or without the wine.  For those of you who are so blessed, I salute thee!  The rest of us will go stand in the caves and eke out meager pictograms until we, too, are struck by the lightning of perfection.  (What? I'm not bitter! Ahem.)

The theory of design columns is this: written somewhere in the Textbooks of Things That Nobody Ever Owns Up to Saying, people prefer structure. The human eye tends to travel over a readable surface in very specific ways.  The human brain prefers things in a kind of order that my poor right brain consciousness doesn't really understand, and while I might prefer things that are asymmetrical and crooked, apparently the vast majority enjoy structure and ogranization.  Go figure.  This means that when you take a website and design it just from scratch, slapping elements down wherever you think things may look pretty, you're missing out on whole opportunities to take advantage of "hotspots": places where a reader is likely to go for first, or linger longer.  Or, far more tragically, never look at to begin with.

Design columns help maintain an orderly, uniform appearance without — and pay attention! — without losing the pretty.  Things that you wouldn't ordinarily think to line up will start doing so in a way that your subconscious will appreciate.  The proof will be in the numbers: when Heather taught me this, she said she's had less clients deny her proofs than when she wasn't using it.

All right, to preface the upcoming lesson, I'll note that some people like to start with a rough outline before they choose the columns.  Me, I like to start with a rough idea and then set my columns.  For ease of my brain not exploding, I will use my method. (The other method involves the exact same thing, you're just counting the columns you "naturally" are creating through design aesthetic.)  In this example, the website is an informational website about Mindfly's elite squad of ninjas with a header, a footer, a sidebar on the left for internal links and another box on the right for deals of the day ("Ninja attire half-off; order your Pretty Pink Princess Pony edition today!"). The main content will be the "center" text, the main information between both sidebars.  Simple enough, right?

Too simple, isn't it?  Sure, anyone could slop on some text, a few headers, a few links, and call it good, but that's boring.  Maybe I'm a snob, but I tend to judge businesses by their web presence, and no one's going to be impressed by some text on a background.  So!  We'll need pictures.  Oh yes, there will be pictures.  Happy fun pretty pretty wellness pictures.  For that, we need an artist.

Oh, Kyyyy-yyyle…. 

Tune in soon for Part II of Design Columns.