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!

Layout of a web page is not that different to layout of printed matter.
(But obviously there are additional aspects to be considered.)

Visual Hierarchy

Create a strong and consistent visual hierarchy which leads the viewer's eye around a page.

Tools: layout, typography, illustration

Example: Consider a page of a magazine such as Cleo

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!

(We can study the way the eye moves over a printed page in order to learn about how people process graphical and textual information.)

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
Square root	1:1.414
Golden Rectangle	1:1.618
Double Square	1:2

An example...

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

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.

Don't design your pages to depend on monitor sizes larger than this!

Be aware that 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 which 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 on-line 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?)

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)

HTML assistance

HTML is not really suitable for complex page layout tasks.

• Frames provide convenient ways to implement headers, footers and menus.
  
  
• Tables provide convenient ways to locate text and images properly within a page.

• 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 2008