How to design for success without being a real designer
One of the most frequent e-mails I get is of the design advice kind. People asking me to help with an already-there design, apologizing because they’re not designers, so it sucks, and yada yada.
The question is: Why should it suck?
OK, you’re not a designer. But it’s really not that difficult to make a usable web application (or startup or whatever the cool kids are calling it these days). I kid you not.
Some simple rules:
Simplicity Comes First
First of all, go forth and take a long, hard look at your application. Is it simple enough? Can you simplify a process even more? Or maybe two?
If the answer is positive, go ahead and simplify it as much as possible. Then simplify it even more. Then a third time.
Now you’re ready for the design process.
Basic Colour Theory
You don’t know zilch about colour palettes or Photoshop and the very thought of an empty canvas scares you.
Don’t worry – go with the basics. White, black, blue for links, black on yellow for real emphasis. Red for errors, green for confirmation messages.
If total black or total white are too harsh for your eyes, go with #eee
for the background and #333
for the foreground. If any of the above colours feels too much for you, try to reduce its saturation or brightness a bit in some colour mixer.
Nothing too fancy.
Typography 101
Choose one to two typefaces – max. Try serif fonts for headers (like Times, Georgia) and sans-serif fonts (like Arial, Helvetica, Verdana) for everything else, or go all sans-serif, noone will mind.
A collective piece of advice, from quite some time around designing Pathfinder stuff: Everything looks better in Lucida Grande. If your app is going to be in english, by all means, go for it. If it’s in greek tough luck, because Lucida Grande kinda sucks in greek.
Also, don’t overdo center alignment for text. It looks hideous, amateurish and hinders legibility.
Whitespace, Whitespace, Whitespace
I don’t know how many times I’ll say that – what’s with developers and tight design? Give it room to breathe, and plenty!
Set your copy line-height to 1.4 – 1.6 em and try to keep your margins between list items, fields and table cells to over 5px.
Leave enough space between different page elements and by all means, check out the theory of proximity pretty pretty please.
Graphics and Icons
There are tons of free icon sets that can help you with your design. If you decide to use one of them, adopt the most complete one – in general, mixing and matching icons is bad. Keep a consistent style.
Graphics? You don’t need them to make something useful. You really don’t. Ditch Photoshop, you’re not a graphics artist. There’s nothing worse than badly done Photoshop, I assure you.
In a few words…
Strive for simplicity and consistency. Follow consistency overall. And learn how to think like a user, not like a programmer – use your product and see if you like it.
If you do, just follow some or all of the above rules and you’ve got it going*.
If you don’t, back to the whiteboard, you.
* OK, then send me an e-mail to help you out.