Basic Design Tips

for Web Pages

Alignment

• Left, right, center• Choose one alignment and

use it on the entire page• Align form elements, table

elements, navigational buttons, images, etc.

Alignment

Tables

• Use inside borders only as needed• Use flush left or flush right for

items in a table• For layout purposes, you can have

more than one line in a cell by using the <br> tag

Table Borders

Proximity

• refers to the relationships that items develop when they are close together

• Make sure there isn’t too much space between a heading and the text that belongs with it

Proximity Example:

Proximity and Alignment

Repetition

• repeating certain elements ties parts of the site together

• Navigation buttons can be repeated

• A left edged background on all pages of a site

• The color or style or size of a font for headings

Repetition

Contrast

• If two elements such as type, rules, graphics, color, texture, etc., are not the same, make them very different

• Dark to light or light to dark• Create a focal point

When you think you are finished,

• Proofread,• Correct spelling errors and

grammatical errors• Check all links