The Principles of Good Web Design Part 4: Content

  • Tom Kenny

This is the fourth part in this series of The Principles of Good Web Design. The other parts are listed below:

Good content is an often overlooked category of good web design. As web designers it isn’t usually our job to create any of the content itself but to get the best out of the given content through the design itself.

content

Imagery

Poor use of imagery can really drag the design of a site down and poor quality images (saving with too much compression) can make a design look messy and unprofessional.

Internet users tend to scan pages to find what they’re looking for and an effective way of helping them do that is making good use of images. Great imagery also helps to sell or promote a product or service.

hungryForChange

Hungry For Change uses high quality background images.

Hungry For Change uses large, high quality images as backgrounds for different sections of their site.

apple

Apple.com hompage

Apple’s homepage is built up almost entirely of images of their products so they know the importance or great quality images.

graze

Use of images by Graze

Graze uses images to convey the message of the service they offer.

Search Engine Optimisation

Well written content can have a positive effect on search engine visitors. Look at things such as page titles and URL structures to help improve SEO.

Now, I’m not an expert on SEO so here are a couple of links explaining this better than I ever could:

Typography

Typography is something that could also fall into the layout article of this series but I have decided to include it in under content as is directly related to helping improve content. It could have even had its own article as it is a very important part of the web.

Effective use of typography helps content become more readable and the easier the content is to read for the site’s users. It also ties in well with whitespace as that can give text enough room to breathe, making it easier to read. See the following for a simple example of this:

goodTypography

An example of good typography

The above example of typography on a simple block of text has the line spacing setting to a comfortable height that makes it nice and easy to read. Below is an example of text with very little spacing, making it harder to read. Even if you have great content, fewer people will take the time to read it at all if becomes frustrating.

badTypography

An example of bad typography

@font-face

Up until recently, font choices have been limited to a few common fonts that are installed on all operating systems. These are known as web-safe fonts as they are guaranteed to be on every visitors’ computer. With the introduction of CSS3, modern browsers can display embedded fonts through the use of a new property known as @font-face (check the comments of that link to see how to use it in Internet Explorer 6+).

typekit

Services such as Typekit are aiming to improve Typography choices on the web.

Headings

Header tags are also important to consider. Not only do they have a positive effect on SEO if used well, they help define sections of text. As we know, web users tend to scan a page to find what they want and by having clear headers, they are able to scan a page to find what they want to read easier.

smashingMagHeadings

Smashing Magazine do a great job of dividing sections with clear heading design

So there we have it, that concludes this series of articles. Please leave a comment below and if you’ve missed any of the previous parts, follow the links below.

This is the fourth part in this series of The Principles of Good Web Design. The other parts are listed below: