The aim of education
is the knowledge not of fact, but of values
COMP213 Web Interface Design

Web Design Tips

  • bullet Use simple sans-serif fonts (Arial, Verdana) for the body of the document, they are easy on the eyes.
  • bullet Don't distort pictures, crop/resize them in Photoshop.
  • bullet Don't allow text to (almost) touch pictures or areas with a different background color, create some white space between them.
  • bullet Don't use underlined text if it's not a hyperlink.
  • bullet Don't leave an empty space in the middle or at the top of the page, it's where the visitors' eyes go first.
  • bullet Use only light colors or watermark (faded) images in the background and make sure text is easy to read on top.
  • bullet Don't use very large fonts for the headings and/or the body.
  • bullet Spellcheck the page.
  • bullet Use harmonious colors chosen from palettes built using online tools.
  • bullet Add a copyright line at the bottom of the page to create a visual clue for the end of the scrolling.
  • bullet Align elements on a page along common vertical and/or horizontal lines for a tidy look.
  • bullet Avoid centered designs, they are good for older or romantic moods, but left aligned and asymmetrical designs are cooler.
  • bullet Pick up an appropriate color scheme for the topic, a zen/spa atmosphere needs a light background and airy layout, a rock band website benefits from a reverse-video setting with a dark background.
  • bullet Design for an approximately 970 px screen width, using a div container (layer) that you can center for dividing the leftover white space on larger displays.
  • bullet Keep the design sober by avoiding useless animations, marquees, background songs, etc.
  • bullet Create a focal point for the page (an interesting picture, a brighter colored area) to capture the visitors' interest right away.
  • bullet Create contrast in larger areas of text through the use of italic, bold, different sizes of fonts and serif (for titles) / sans-serif (for blocks of text) typefaces.
  • bullet Avoid using more than 3 font families on a page/site.
  • bullet Learn and use the box model in CSS and take advantage of the border, padding and margin properties.
  • bullet Use relative paths to your resources and test your website on a mobile device (has no C: E: H: etc. drives)
  • bullet Left-align fields on a form and don't make them much larger than the expected input.
  • bullet Right-align labels for the fields on a form, this way they are close to where the user input occurs and easier to read.
  • bullet Change the text on your form buttons, "Register Now" is more inviting than "submit", "Clear Form" better than "reset".