Lecture 5a: Visual
and Graphic Design
What You Will Learn Today
- Use page layout principles to arrange page
- Use typography to produce legible, consistent
- Explain how colour contrast and
depth affect viewing and file sizes.
- Discuss the relationship among image size, type and resolution.
- 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
- 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
- Frames can be used for navigation and page layout but are generally
- 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
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
- HTML was designed to be platform-independent and separate meaning
- Accept the fact that different browsers will display your page
- 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 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,
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
- 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
- Decorative fonts can be useful for attractive headings but should be used
- If a browser does not have a specified font, it will display text using a
- 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.
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
- 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
- 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.
- 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)
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
- 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.
- 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
- 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.
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
- References: Hofstetter Ch. 16, CIYF3 Module 8B, Nielsen Ch. 2, Sklar
Unit B, Cary Ch. 3, Reding/Vodnik Unit G