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
