FIT3084: Page Design

In the previous lecture:

• Before touching a computer keyboard, sit down and work out a web site design brief.
  
  
• Many web sites have similar page types.
  You can use these conventions to assist a user in understanding your site.
  
  
• Use original content on your web site.
  It looks better and avoids unecessary legal problems.

In this lecture:

• The relationship between web and print layout
• Layout for the special needs of online viewers
• Providing consistent and clear web layouts

The moment you've all been waiting for... time to design a web page!

Visual Hierarchy

Create a strong and consistent visual hierarchy which leads the viewer's eye around a page. Your tools: layout, typography, illustration.

Consider the covers of these magazines. What does your eye focus on first? Second? Third? Fourth?

Usually the eye catches elements in this order: large shapes and blocks of colour (images etc.) graphics content major heading content minor heading content sections of body text This is a visual hierarchy!

An example...

Which page design is preferable? Why? Where does the eye focus? How is the visual hierarchy established?

Part of the result of a well-known study of eye tracking over an image entitled An Unexpected Visitor, by I.E. Repin. The study was conducted by Yarbus 1967. The viewer was asked to judge the age of the figures in the painting.	Tracking the eye over a newspaper sheet. (http://www.sol.lu.se/)	Tracking the eye over a web page. (http://www.sol.lu.se/)

Importance of Contrast

Contrast is used to assist in achieving these broad goals for layout and composition...

Balance
(Left and right, top and bottom, front and back)

Gridding
(Elements should line up)

Proportion
(Certain ratios are more pleasing than others)

Square	1:1			Kasimir Malevich (1878 - 1935) Black Square and Red Square, 1915 Oil on Canvas, 28x17.5", Museum of Modern Art, NY.
Square root	1:1.414
Golden Rectangle	1:1.618			A golden rectangle can always be subdivided into a square and another golden rectangle.
Double Square	1:2

Aesthetic proportions have been studied for thousands of years from ancient Egypt through the Greek and Roman empires, during the Renaissance... right up until the present day.

The Buddha. In many cultures, some proportions are considered sacred or divine and incoporated into religious music, art and architecture. http://www.rubymala.com/content/geometry/geometry.htm	Orders of classical columns. Columns are sub-divided repeatedly into thirds. Image from Classical Architecture: A complete handbook, Adams & Brentnall, 2002. http://grandtradition.net/introduction-classical-architecture	Proportions of the human figure. Da Vinci's study of proportions of a man based on the work of the Roman architect Vitruvius.

Consistency

Choose a layout style for your pages and apply it across your site

Choose a graphical style for your pages and apply it across your site

Page Dimensions

Computer screens are small and of low-resolution compared to print media.

Computer screens are cluttered with browser borders, menu bars, control strips, scroll bars.

The smallest common monitor size is 640x480 pixels.

Be aware of the monitor sizes used by your target audience.

People may want to print your web pages onto A4 paper - especially if they contain lots of text!

Page Length

Pay great attention to page content that appears "above the fold". What does this mean? Why is this necessary?   But a user can scroll can't they? Scrolling down through a web page is disorienting. Scrolling across a web page is frustrating. Scrolling both across and down a web page is quite ridiculous! Avoid scrolling if possible.

The proper page length to employ will depend on:

• The way in which people will usually view your page
  (browse online vs. print out)
  
  
• The type of document content
  (In some cases you need to keep info. on a topic on the same page. Usually (not always) it is wise to avoid more than four screenfulls of material on a single page.)
  
  
• The bandwidth available to the audience
  
  
• The screen size of the audience

Minimize the damage of long pages by:

• providing visual breaks (such as horizontal rules or paragraph spaces) within single screenfulls
  
  
• providing back to top links
  
  
• providing subheadings within single screenfulls

Web pages must be free-standing

Pages may be accessed at random so each page needs to make sense on its own.

Every web page needs to answer the following basic questions:

• What?
  Informative title (in the text and title bar)
  
  
• Who?
  Creator's identity
  
  
• When?
  Date of creation and/or modification
  
  
• Where?
  Link to the site homepage and/or a major index
  If relevant country/company of origin (see Who?)

	What: Yahoo!7   When: Tuesday August 4, 2009   Where: yahoo7.com.au news and features clickable links to various places including home
	Who: Yahoo7! Pty. Ltd.

Page Headers & Footers

Page headers and footers may help the user by:

• providing consistently located navigation bars
  
  
• providing consistent "What? Who? When? Where?" information
  
  
• providing a consistent look and feel for a site

...yes, page headers and footers are an excellent means of providing consistency!

(Make these clear, but not so large that they dominate or waste precious screen real-estate)

XHTML assistance

Plain XHTML is not really suitable for complex page layout tasks.

• Frames provide convenient (but currently unfashionable) ways to implement headers, footers and menus.
  
  
• Tables provide convenient ways to locate text and images properly within a page.
  
  
• Cascading Style Sheets allow for accurate positioning of page elements and are the preferred method for complex page layout tasks.

Making Decisions about Page Architecture

• What navigation system will be used?
  
  
• How will each page look?
  
  
• Choose colours, fonts and other layout elements if not already specified.
  
  
• How will these sit together?
  
  
• How will all this maintain the site look and feel?
  
  
• Sketch many alternative layouts and refine them - use a pencil for heaven's sake!
  
  
• How will the page architecture enable the site to meet its goals and convey its message?

....only now is it time to sit down and enter XHTML!

• Web page layout bears much in common with print media layout.
• Additional considerations centre largely around the need to allow for the properties of computer monitors.
• Provide consistent and clear layouts for all the pages on your site.

Courseware | Lecture notes

©Copyright Alan Dorin 2009