Lecture 5a: Visual and Graphic Design

What You Will Learn Today

1. Use page layout principles to arrange page elements.
2. Use typography to produce legible, consistent text.
3. Explain how colour contrast and depth affect viewing and file sizes.
4. Discuss the relationship among image size, type and resolution.

Page Layout

• Different areas of the page should be used for information and content, navigation, advertisement, pictures, decoration, white space, etc.
  • A large percent of the page should be used for essential content and not wasted on other things the user doesn't need/want.
  • To plan page layout, it is useful to create many sketches of possible layouts using paper and pencil, and then choose the best one.
• Page layout should be consistent (similar for a group of pages with similar content).
  • Create a page layout template or grid that can be used for many pages.
• Navigation elements should be consistent in and clearly indicated by their shape, colour and position.
• Frames can be used for navigation and page layout but are generally discouraged.
• Alignment (horizontal and vertical) and proximity (nearness) help to group similar items.
  • Use tables to precisely align and arrange content. Most corporate sites use tables for page layout.
  • Hide table and cell borders with border="0" cellpadding="0" cellspacing="0".
• White space (empty, but not necessarily white) improves readability, reduces clutter and focuses attention.
  • Use cellpadding and cellspacing to add white space to tables. Use vspace and hspace to add space around images.
• The top of the screen should show the most important, frequently used information so the user does not need to scroll.
  • The center of the screen draws attention more than the top, bottom or sides.
• HTML was designed to be platform-independent and separate meaning from presentation.
  • Accept the fact that different browsers will display your page differently.
• Test that your page displays well using common screen resolutions.
  • Although many users now have 1024x768 or larger screens, it is safer to design for 640x480 or 800x600.
  • Some screen space is used by browser window controls such as title and menu bar, tool bars and scroll bars.
  • Productivity tip: Visual/graphics designers should invest in a monitor with the highest possible screen resolution.

Typography

• Typography is the use of different fonts. A typeface is a design for a set of characters.
  • Serif fonts like Times New Roman and Garamond improve the readability of small text.
  • Sans serif fonts like Arial, Helvetica and Verdana are usually best used for headings.
  • Monospaced fonts like Courier use the same space for every letter; they are best used for aligning letters or code.
  • Proportionally spaced fonts save page space by using less space for thin letters like i and l.
• Avoid using too many different font sizes, typefaces and weights on the same page or site.
  • Decorative fonts can be useful for attractive headings but should be used sparingly.
• If a browser does not have a specified font, it will display text using a default font.
  • Use the default font or specify alternatives in case your preferred font is unavailable.
  • To be sure of an exact font or use special effects like shadows, you can use an image containing text.
  • Avoid creating graphical text because it takes much longer to download.
  • e.g. is a 4 KB .gif file. (The HTML of this entire lecture is only 8 KB.)
• Stylesheets give much more control over text formatting and layout than the <font> tag.

Colour

• Monitors, televisions, projectors and coloured theatre lights emit light and use additive colour mixing (Red+Green+Blue=White).
• Paints and printed inks absorb light and use subtractive colour mixing (Cyan+Magenta+Yellow=Black).
• Complementary colours are opposites which provide maximum contrast.
  • red-cyan, blue-yellow, green-magenta, black-white
• When creating a colour scheme, choose a small number of colours that work well together.
• In a link, you can use three attributes change link colours: link (unvisited), alink (active) and vlink (visited).
  • Using non-default link colours usually confuses users, even if you use consistent and distinguishable colours.

Colour Depth

• Every pixel on the screen uses a certain number of bits for displaying its colour. More bits means more possible colours for that bit.
  • All modern monitors can display at least 256 colours (each pixel takes 8 bits or 1 byte).
  • Almost all monitors can now display 65,536 colours (16 bits). Many can display up to 4 billion colours (32 bits).
• HTML colours use one byte each for red, green and blue, for up to 16 million colours (24 bits).
  • Red, green and blue values each range from 00 (no colour) to ff (maximum colour) to produce six hexadecimal digits.
  • By mixing different amounts of red, green and blue you can produce nearly any colour. Common colours to remember:
    •  red "#ff0000"   green "#00ff00"   blue "#0000ff" white "#ffffff"
    • cyan "#00ffff" magenta "#ff00ff" yellow "#ffff00" black "#000000"
• Also see the web colours simulations for the browser safe or Web palette colours, additional colours, and all HTML colours.
  • These 216 colours keep file sizes small and will be displayed correctly on almost any computer.
  • Converting a full-colour image to fewer bits will reduce the file size but may produce unpleasant dithering and banding.

Images

• Important: Keep image file sizes small so they will download quickly.
• Image file size is determined by bits per pixel, number of pixels, and amount of compression.
  • .jpg, .gif and .png files are compressed. .bmp files are large because they do not use compression.
  • Compression of simple images like diagrams is greater than compression of photos and complex, realistic images.
  • A high amount of compression saves more space but may visibly distort the image.
• Photos are best saved as jpeg files for clearest images. Diagrams and icons should be .gif or .png.
• Reuse the same images on several pages so they only need to be downloaded once into the browser's cache.
• Use small (scaled and cropped) thumbnail images which are linked to full-sized images.
• Use width and height attributes on every image so the browser can leave a space for the image and immediately display the text.

To Do After Class

• Browse the list of final project topics, list possible topics for your website, and write down considerations.
  Select your topic based on the considerations and start writing your project proposal.
• References: Hofstetter Ch. 16, CIYF3 Module 8B, Nielsen Ch. 2, Sklar Unit B, Cary Ch. 3, Reding/Vodnik Unit G