Valhalla Island

I often deal with people that have programming and website creation experience but lack any design experience or even common sense in design. Creating things visually pleasing comes naturally to me (I think), I also study the area at a tertiary level. Following some published theories as well as my own aesthetic sense there’s some simple things you can do to create better design.

Don’t Bold Headings

There are few common web fonts that look good big and bold. Use variation in size rather than weight to differentiate between heading levels. Also consider different kinds of variation - letter-spacing: 0.2em; text-transform: uppercase; works well for sub-level headings.

Mixing fonts is OK

As long as one is used for headings and the other for body type. Through my early education I was always told to never ever mix fonts within the same document. Today I’ve found mixing Georgia and Verdana always looks great when using one for headings and the other for body text. More commonly I will use Georgia for headings and Verdana for the body but the reverse also looks good.

It’s fine to use a special type embedded in a header image with another two (usually Verdana and Georgia) below, despite what your primary school teachers told you.

Fonts to use

Personally I think there’s only three fonts that look good on the web - Verdana, Georgia and Lucida Grande. All look good on their own, Verdana and Georgia look good together. Lucida Grande doesn’t look as good mixed with the other two. Stick to these three and it’s hard to go wrong. Never use Trebuchet or Century Gothic, they’re ugly.

Leading

Browser default line heights suck. Always specify a line height and it should always be at least 1.5 times the text size. Personally I prefer even more leading. You can’t go wrong if you specify line-height: 1.5em in your CSS, that will always be 1.5 times your chosen font size.

The more leading, as long as it’s not ridiculous, the more easy on-screen type is to read. It’s also more aesthetically pleasing. Remember to increase margins with line height so that paragraphs (and other elements) are proportionately spaced out.

Few Alignment Points

Untabbed code is a sin. Too many alignment points on a website are unnecessary and confusing. This is something I see over and over again on poorly designed websites. You do not need to indent body text below headings. The size variation between headings and body, as well as margins around headings are enough. Indenting should be used sparingly for elements we are used to seeing indented - blockquotes and lists are good examples.

If it’s a two column website, aim for two alignment points, the left side of the content and the left side of the sidebar. This isn’t including exceptions such as blockquotes and lists that may not always be part of the content. Every left aligned element should be lined up with these points - header type, the left side of vertical menus, second level headings, paragraphs, everything.

Again, it makes sense for things like nested lists to be indented.

Try Subtle Variations

Italicising or converting to uppercase with a little letter spacing make for nice highlights. As do backgrounds on inline text. At university they try to tell me to never use italics on screen, they don’t know what they’re talking about.

Use Similar Styling For Similar Elements

If you’re using uppercase Verdana for level three headings in your content, transfer it over to level three headings in your sidebar at a smaller size. If you’re italicising meta information on blog posts, also italicise meta information on comments. It creates a subtle learning pattern for users.

As with all other tips in this post, the aim is to make users realise what an element is without having to read. If they know meta information is italic, seeing more italic will trigger the “this is meta information” switch.

Padding

Use a lot of padding. It allows users to digest one chunk of information at a time. It improves readability and it’s generally less ugly. It’s more difficult to create good compact design than it is to create good spread out design. Ask anyone that’s had to stuff 100 products into an 8 page DL catalog.

Vertical Space, Grouping

Group headings with the text they represent. It’s easiest to represent this with a small diagram:

There should be much more vertical space between the end of a previous topic and the next heading than there is between a heading and the text it represents.

Colour Palettes

Monochromatic colour palettes are the easiest to get right. They can be easily chosen mathematically with RGB values. Choose a colour you like, say rgb(251, 160, 206). Then consistently minus or add a value from each colour value to create other colours for the palette.

With rgb(251, 160, 206) I might subtract 60 so my other two colours would be rgb(191, 100, 146) and rgb(131, 40, 86). Of course you can then convert them to hex values if you prefer, everyone seems to forget CSS supports values provided in RGB format.

It’s also difficult to go wrong picking or making palettes with a service like Adobe’s Kuler.

Links

Use a link colour that completely contrasts the other colours used in the design so that links can easily be picked out. Even when using a monochromatic colour scheme a contrasting link colour works well. Underlining looks bad, if you’re using a good amount of leading you’ll be able to safely use bottom-borders instead which both look better and are more functional.

Assigning different colours to bottom borders and link text colours looks great.

Further Reading

Dan Cederholm’s Interface Design Juggling is invaluable. You’ll find a couple of the tips mentioned here as well as a bunch more in his very visual presentation. Although it takes things to a more advanced level.

I hope this helps some non-designers create better looking websites.