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

• The Principles of Good Web Design Part 1: Layout
• The Principles of Good Web Design Part 2: Navigation
• The Principles of Good Web Design Part 3: Colour

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.

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.

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.com hompage

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

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:

• Basics of search engine optimisation
• Search Engine Optimization 101

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:

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.

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+).

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.

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 third part in this series of The Principles of Good Web Design. The other parts are listed below:

• The Principles of Good Web Design Part 1: Layout
• The Principles of Good Web Design Part 2: Navigation
• The Principles of Good Web Design Part 4: Content

Colour is an often underrated aspect of web design but can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different colour combinations can evoke different emotions and reactions.

Colour design is often very subjective but it is important to keep usability in mind. Changing colour for subjective reasons may ultimately have a negative affect on usability.

Contrast

Readability relies a lot on typography but colour contrast is also key to keeping text readable. Make sure there is enough contrast between the text and the background colour or image.

Jonathan Snook’s colour tool does an excellent job of assessing colour combinations from an accessibility point of view. In real-time it displays accessibility ratings based on WCAG guidelines.

Good Examples

As you can see everything is perfectly readable and all the examples above pass every standard on Snook’s colour contrast tool.

Bad Examples

All of these examples of inadequate levels of contrast between the text colour and the background colour making it much harder to read. This is especially evident as the text gets smaller.

Thankfully this doesn’t seem to be a huge issue on the web these days as most designs at least adhere to some of these rules resulting in comfortable reading conditions. That being said, there are a sites and designers out there that fall foul of this basic concept. Don’t be one of them.

Importance

Colour can be used to guide users to where you want or need them to go. For example, using more noticeable colours such as red or orange for primary links and blue or green for secondary, supplemental links is a good way of increasing the chance of a user to follow the links that are most beneficial. This is often known as a ‘call to action’.

Amazon colour importance

The specialists in this area are Amazon and they use yellow coloured buttons for their ‘call to actions’ and washed out colour for their secondary links as seen on the ‘Add to Wish List’ button.

Colour Examples

One of the main ways to convey the meaning of your brand is through the use of colour. For example, a toy company may use bright and vibrant colours whereas a jewellers will likely use more elegant colours such as something similar to gold.

Toys R Us

Toys R Us, as you would expect, have a very colourful, fun and vibrant colour scheme.

Mail Chimp

Mail Chimp uses nice big orange and green buttons to guide the user to where they want them to go. The orange buttons represent the primary links and the green ‘View a Demo’ button is a secondary and supplementary link.

A little while ago, we looked at 42 Very Colourful Websites which you may also want to check out.

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

• The Principles of Good Web Design Part 1: Layout
• The Principles of Good Web Design Part 3: Colour
• The Principles of Good Web Design Part 4: Content

Navigation is one of the most important things to consider when designing a website. After all, it is one of the main ways that will determine how a user interacts with a site. It is also an important thing to consider as it has an effect on usability. Poor use of navigation can cause confusion which has a negative effect on usability. We will discuss the principles of how this can be avoided in this article.

Location, Location, Location

Navigation by design, needs to give the user awareness of where they are in the site’s structure. The most effective way of achieving this is to highlight the current section in the navigation itself. A great example of this can be seen below at Kingpin Social:

An example of navigation clearly communicating location

Breadcrumbs

Another way of communicating where a user is on a site is through the use of breadcrumbs. Breadcrumbs are especially needed for more complex sites that have multiple levels of navigation. The name comes from leaving a path behind from which you can follow back to your original location. So essentially it shows the exact point where you are, while giving you options to go back to other previous steps in the site’s structure.

Breadcrumbs example at dabs.com

Clear, Simple and Easy to Understand

One of the easiest ways of having a positive effect on usability is to make the navigation itself clear, simple and easy to understand. Some of this overlaps with good use of whitespace as discussed in part one of this series as that will certainly help make navigation easier to read.

Mimeo uses colour to help make the navigation clear and easy to understand

Clear wording is another critical part of navigation. By communicating clearly through wording, you reduce any confusion as to where the link will take the user through to.

Another technique is to use supplemental text to reinforce the navigation. This is often used in the main navigation but as you can see in the example below, Mia and Maggie also use it in the secondary navigation in the sidebar on the left.

Mia & Maggie use supplemental text to aid navigation

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

• The Principles of Good Web Design Part 2: Navigation
• The Principles of Good Web Design Part 3: Colour
• The Principles of Good Web Design Part 4: Content

Good web design doesn’t just appear out of nowhere, there are many aspects of design that come together to achieve this. The first one that we’ll be looking in this 4-part-series is layout.

Layout is an interesting beast. There are no definitive right or wrong ways of approaching it. What you need to do is make sure that the layout works for the site that you are designing.

Layout primarily consists of the following aspects:

Whitespace

Whitespace is space between elements on a page. It is often referred to as negative space and good use of whitespace can be the difference between making a good design great. Simplicity will make a design easier to use and by creating more whitespace rather than cramming content up against each other, you allow the content more room to ‘breathe’ and therefore easier to notice.

Five Simple Steps

Effective use of whitespace as seen on Five Simple Steps

As you can see above, Mark Boulton has done a great job of using whitespace to promote his book, allowing elements such as buttons and text paragraphs to ‘breathe’ giving them the attention they deserve.

Flow

Flow in web design is the act of guiding the user through page. All sites some form of flow but some are more effective than others. Effective flow takes in all aspects of web design including properties that are not directly related to layout such as colour, size of element, typography and images.

Fever

The website for Fever is a superb example of flow in web designÂ

As you can see in the annotated screenshot above, there is a natural reading down the page. This is great as users are more likely to see all the content and less likely to miss important information.

• Notice the use of images to draw the attention of the visitor towards the next section which can be seen in points 2, 3, 4, 5 and 6.
• The use of typography helps take the user to the next sections as seen in 3, 7, 8 and 10.
• The horizontal red lines help to define sections creating a natural reading order  from left to right.

Alignment

Alignment helps create a good flow. As you can see in the example above for Fever, alignment plays a key part in the overall flow. Alignment also contributes to a natural order that makes content easier to scan and read.

A great way of getting to grips with this is to use a grid system with the most common grid system in use today being the 960 Grid System. You can download templates for all the major web design creation tools, Photoshop, Fireworks and Illustrator which overlays your documents with vertical lines split into 12 or 16 columns. This makes it easy to create multiple columns and keep elements lined up in place. It also keeps you working to a standard width of 960 pixels which works on the now minimum resolution of 1024 x 768. Modern monitors support this resolution or higher and even the latest netbooks have resolutions that are 1024 pixels wide.

The 960 Grid System is the most common grid system used today

Cameron Moll asks the question, is it time to move beyond 960? It can be once 1280 x 1024 becomes the standard resolution but for no it is much safer to design for 1024 x 768 until that day arrives.