This is hopefully the first in a series of posts helping developers be proud of how their app looks as well as how wonderfully it functions. The real beauty may be on the inside, but the skin still gives the first impression to your audience and deserves any attention you can give it.
My goal here is not to turn everyone into a turtleneck-wearing, latte-sipping designers, but rather to offer a little guidance. By being mindful of a few things you can make even the simplest little web app look clean and polished for your audience. I’ll also try to cut back on the lame puns.
So here we go, the following are my top 7 things to just be aware of when laying out your user interface:
- Alignment
Everything on the screen should align with something else, especially things that are related to one another. An Example I like to use here is a simple form – yes, the text lines up with its related text box as a line item, but it looks a lot cleaner when the left edges of the text boxes are aligned with each other. - Size
In some cases it really DOES matter. Viewers will judge in an instant how important something is by several criteria and one of the best is size. For an easy example, titles are always bigger than body text but this applies to everything on a screen, not just text. - Text & Capitalization
Avoid making your text too small for your intended audience. For example, AARP is going to want larger text than MySpace. Also avoid all caps as you appear to be SHOUTING – Even when you feel like yelling.
- Font Control
Don’t use more than about three fonts in an entire project unless you have a really good reason. You can, however, still use bold, italic, and normal. And please don’t use Comic Sans unless you’re making cartoons or a site for preschoolers
- Color
Similarly, limit your color use but don’t be afraid of it. I’m planning an entire post on easy color theory for developers later, but suffice it to say if you pick one or two colors (that aren’t grey) and mix them in consistently you can bring a lot of life to an application. Go crazy with lots of colors that haven’t been carefully picked to harmonize and you’ll end up with what I affectionately call “skittles.” - Consistency
Page layout, key terms, and design elements should be consistent throughout the entire application. If you call the users “clients” don’t switch to “visitors” half way through the application. Similarly if links are blue then always use blue on all links. - White Space
White space is quite literally nothing. An extra carriage return between paragraphs, padding around images and the space between items on a form are all fantastic examples of white space. Almost any beginning layout can benefit from the addition of white space – it’s possible to add too much, but you’ll know if that happens. A little white space never hurt anyone and helps the user not to feel crowded.
And as a final note – these are all “more like guidelines… than actual rules.”
