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

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