Seven simple steps to better design, sans designer

Lately, I’ve found myself giving a sub­stan­tial amount of design feed­back to non-designers. While I always main­tain that you ought to leave design to pro­fes­sionals, some­times this just isn’t feas­ible for one reason or another. So, in the interests of public ser­vice (pret­ti­ness making the world a better place, and whatnot), I’d like to offer up some sug­ges­tions that should improve your design across the board.

1. More whitespace!

Every time I give someone feed­back on designed pieces, I find myself repeating this over and over and over. (Pro­gram­mers are notori­ously bad about this, for some reason.) Con­sider the look and feel of a store layout—generally speaking, those with higher-quality mer­chandise tend to have more space between dis­plays. The same is true for design; more whitespace will give an impres­sion of higher quality. Move related ele­ments together; decrease the spa­cing between lines of text, don’t butt text against a solid shape, and don’t be afraid to leave empty space. This gives the eye a chance to rest and pre­vents your design from looking like an ad for a car sales lot.

2. All hail the 66-character line!

The ideal line length, in terms of legib­ility, is widely believed to be around 66 char­ac­ters long. Of course, this isn’t a hard-and-fast rule, but gen­er­ally speaking, your text will be far more read­able if the lines measure some­where between 50 and 70 char­ac­ters. I’m pretty good at eye­balling this now, but I still always check my line lengths with a simple char­acter count tool to make sure they’re good.

3. Go left of centre.

Unless you’re designing a wed­ding invit­a­tion, avoid a centred align­ment, which gen­er­ally gives a highly clas­sical look to any design piece. It can work nicely for old-styled invit­a­tions, frontis­pieces, or labels, but gen­er­ally it just looks overly formal. A left-hand align­ment of ele­ments makes for a more read­able text (unless you’re working with a right-to-left lan­guage, that is.)

4. Keep it in the (font) family.

Typ­ic­ally, two fonts is all you need for a well-balanced design. Too often people try to use too many “fun” fonts and end up with a chaotic mess. Select two fonts—one serif, one sans—and stick with them. (If you pick fonts with a variety of weights and styles—bolds and italics and such—you’ll have more options in terms of format­ting.) A serif font has little sticks and stems on the ends of the lines, which help guide the eye from one letter to the next. Accord­ingly, they tend to be better suited for long pas­sages of text.

A serif font (Mrs. Eaves) com­pared to a sans-serif (Gotham).

Stay away from the fol­lowing fonts: Comic Sans, Papyrus, Trajan, Arial, Times New Roman, unless you have a really great reason for using them. Font­S­quirrel has a great selec­tion of free and well-crafted fonts you can down­load and use for any­thing you’d like.

5. Get up in your own grid.

Using a grid will magic­ally help your design look cohes­ively and professionally-designed, even if it isn’t. A grid will also lend the whole thing an overall sense of order and struc­ture, par­tic­u­larly useful when working on a design that con­tains lots of inform­a­tion. While there’s quite a lot to grids (and they’re some­thing I plan to touch on in more detail in another post), basic­ally this involves aligning your ele­ments to an “invis­ible” grid pat­tern. 960.gs has excel­lent tem­plates avail­able for most design pro­grams as well as a number of great tools for websites.

This web­site makes use of an under­lying grid structure!

6. Become a feed­back monster.

My room­mates and the people around me are prob­ably more than a little tired of this habit of mine, but I ask everyone who’ll listen to me for opin­ions of my work. It’s easy to miss things when you’re working on some­thing, and other people will often per­ceive your work in unex­pected ways. You don’t need to use every crackpot sug­ges­tion, but taking them into con­sid­er­a­tion will improve your work.

7. Microsoft Word = The Devil.

Above and beyond any of its varied other fail­ings, it is very dif­fi­cult to make any­thing look nice in Word. Use Open­Of­fice if you really like word pro­cessors, or the range of (also vari­ably flawed) Adobe products cre­ated for pro­fes­sionals, or their equally powerful free­ware altern­at­ives.

These are just some very basic sug­ges­tions and tips; if you’re ser­ious about making things look better, pick up a copy of The Non-Designer’s Design Book. Or, hire a designer.

Tags: design, how-to, resources, style