Designing Web Pages

Layout and Composition

Defining Good Design

• Users are pleased by the design but drawn to the content• Design should not be a hindrance

from scanning the page for the information required

Defining Good Design

• Users can move about easily via intuitive navigation• Main navigation block should be

clearly visible on the page• Each link should have a descriptive

title

Defining Good Design

• Users recognize each page as belonging to the site• Cohesive theme or style should exist

across all the pages of a site• Hold the web site together

Web Page Anatomy

Web Page Anatomy

• Containing Block• Contents of the page

• Logo• Identity, colors• Should sit at the top

of each page of the website

• Increases brand recognition

• Each page belongs to the site

Web Page Anatomy

• Navigation• Easy to find and

use• Expected at the

top of the page• May be vertical or

horizontal

• Content• Focal point of the

design

Web Page Anatomy

• Footer• Bottom of page• Contains copyright

information, contact, legal information, links to main sections of site

• Should indicate to viewers that you have reached the bottom of the page

Web Page Anatomy

• White Space• Area of the page

that’s not covered by type or illustrations

• Design will feel closed in without it

• Gives the webpage “breathing room”

• Guides users eyes around the page

• Creates balance and unity

Grid Theory

• The Golden Ratio or Divine Proportion

• A line can be bisected using the golden ratio by dividing its length by 1.62

Grid Theory

• Compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing

The Rule of Thirds

• Simplified version of the Golden Ratio

• A line bisected by the golden ratio is divided into two sections

The Rule of Thirds

• Place the elements of a webpage on this drawing

• Large main rectangle is the Content Block

• Place the biggest block first

The Rule of Thirds