Good Design Notes

From SchoolsWiki
Jump to: navigation, search

Design issues involve elements of taste and personal preference. For example some people will regard a particular site as attractive and well presented, while others will regard the same one as poor and unattractive. However, you will notice that there is often agreement within the design industry about certain things and we would ignore this advice at our peril. If your Scoilnet Blog is used as your school website then it will be wise to agree on a blog style guide for all users.

This section will deal with some of the general guidelines that have been shown to be of importance.

Content

  • One of the most important issues here is to consider your audience. This will determine the type of language, colours, images, and the general layout of the site.
  • Material should be checked for accuracy and for spelling before being published. Use a spell checker.
  • Make sure you keep your material up to date. If your site has a news or recent events section, make sure that it is edited regularly. If for any reason it is not possible to do this for any length of time, put a notice to that effect on the page, or delete the page altogether.
  • Make sure you observe copyright laws for all material used. If you created the images or sounds yourself, there is no problem, but if not, you need to ensure you are entitled to put them into your site.

Readability

  • In general, it is best to avoid paragraphs written entirely in capital letters, as they are deemed to be more difficult to read. Short headings in capital letters are fine.
  • It is best to avoid highly decorative fonts for entire paragraphs as they are less readable and also may not be available on other computers.
  • The choice and size of font has a huge impact on readability.
  • The colour and texture of background has an impact on readability of text. If you really want to have a colourful background, one idea is to present the text in a table where the background is a uniform colour. In this way, you can preserve the appeal of the site while ensuring that the text is readable.

Layout

  • If graphics are being used, they should be appropriate, not just token pictures to fill a space.
  • A blog page is not entirely a blank canvas. There are navigation panels other constraints, so it can be difficult to set out a page exactly as we would like. For this reason, it is best to keep it simple initially.

Navigation

  • As the designer of a page, you will often not be aware of the difficulty an end user would have navigating your site. It is important to provide alternative ways for users to access pages on the site, but in an intuitive way.

Fonts
There are two basic font families – serif and sans serif (meaning “without serif”). A serif is a little flick added to the stems of letters and is often regarded as being more readable, particularly in the print industry. However sans serif fonts are more popular on the web, as they are more readable in small sizes and allow web designers to fit more text onto a screen. Another family, cursive fonts is also available, but should be used sparingly as large amounts of text written in this way can be beautiful to look at, but extremely hard to read. We cannot be sure that every computer on which our wonderful site is viewed has the same fonts available to it, so we need to keep to “web-safe” fonts. The bad news is that these are often quite plain and uninteresting, but if we want our site to be accessible, we must restrict ourselves to them.

Colours
In the same way as with fonts, there are some general guidelines for the use of colours in websites. Originally, most computers could only display 16 colours. Nowadays, most computers can display 16 million colours or more, but there is no rule that says that all of these should appear on the same page! In fact the opposite is the case. Current advice is that two or three colours are enough, unless you are a qualified graphics artist and can deal with the complexities of colour mixing and matching. The adage “less is more” really applies to the use of both colour and fonts. In general if the background is dark, then the text should be light and vice-versa.

Inserting Images
Many modern digital cameras are capable of resolutions of 5 Mega pixels and more, which gives us excellent quality, but huge file sizes. Images must be resized and compressed to a size that will download quickly, or our viewers will become bored and go to another site. File sizes over 100 KB are regarded as too large for easy and quick download. Many free online graphics packages can perform this compression task very efficiently with almost no visible degradation of picture quality. If you really do want someone to see a picture in all its glory, one solution is to display a small version with a link to the real picture and a warning, indicating that it will take some time to download.

Cross Platform/Browser Compatibility
This refers to the fact that sites appear differently when viewed on different platforms and/or browsers. Although most people use either Internet Explorer or Mozilla/Firefox, there are over 100 browsers available at present, not including different versions of the most common ones and sites can look remarkably different when viewed on different browsers or versions of the same browser. This is a really difficult issue for professional web developers and we cannot be expected to be experts in this field, as major companies spend significant amounts of time and money to ensure that their sites work well in different environments. However, some common sense rules will help to make sure that our sites are reasonably compliant. Here are some of these guidelines:

  • Keep the layout of the site simple.
  • Use lowercase filenames only with no spaces.
  • Do not use the spacebar to separate items on the page, use tables instead (you can hide the lines so the table acts as a placeholder and the user does not need to know that the material is actually in a table).
  • Use web-safe fonts and colours.
  • Do not use any features that require special server-side extensions to be installed, as you have no control over these. A typical example of this is the hover button feature available with Microsoft FrontPage. It may look fine on your computer, but will not always display on other computers.
  • Take every opportunity to view your site from other people’s computers. This may appear to be pretentious on your part, but it may allow you to find that some particular feature that looks fine at home will not work on another platform or browser.
  • Use the feature in the web editing software, if available, for checking cross browser compatibility. Dreamweaver has this facility.
  • Check with www.w3.org to see if your site complies with current standards (Not for the faint-hearted, but useful, as it is the organisation that sets the standards in this area).

Useful Design Resources