WEB DESIGN

TIPS FOR DESIGNING A WEB PAGE

PURPOSE OF WEBSITE

To inform

To persuade

To market/sell

To entertain

To advocate

KNOW YOUR PURPOSE!

CONTENT• Easy to read

• Eye-catching

• Easy to scan

• No text in images or over images

• Emphasize important points• Bold• Colored font• Lists –bullets or

numbers

DESIGN PRINCIPLES

1. Alignment

2. Proximity

3. Repetition

4. Contrast

5. Grammar/Spelling

ALIGNMENT• Items on the page are lined up with each other

• 2 types of alignment

• Horizontal• Vertical

• Choose 1 type of each

• Use tables with invisible borders

• Professional look• Keeps elements aligned correctly

BE CONSISTENT!

PROXIMITY• Relationships which develop when items

are close to each other

• Examples:

• Title/Subtitle• Picture/Caption• Heading (article title)/Article

• Group items together which are related

REPETITION• Some elements must be the same on every page

• Use the same layout on every page

• Repetition of elements give a unified, smooth look and transition from page to page

• Navigation buttons• Colors• Style• Illustrations• Format• Layout• Typography

CONTRAST• What draws the eye onto the page

• Designs to consider

• Style• Colors• Arrangement• Graphics

• Create a focal point

DESIGN TIPSFONTS

• Serif (Times New Roman) *with tails*

• vs

• Sans Serif (Verdana) *no tails

• Sans serif is easier to read on screen

• Use a font scheme of no more than 3 fonts throughout pages

• Font size 8-14

• Left align is best (except titles)

• Don’t underline text-hyperlinks are underline

• Use same color for titles and text throughout

ALL PAGES SHOULD BE THE SAME

DESIGN TIPSCOLORS

• Use complementary colors – no more than 3 colors

• Think of a house- 3 colors:• Main house• Trim• Accent color

– doors & shutters

• Light backgrounds with dark fonts is best

• Stay away from bright colors and colors which are difficult to read such as RED and YELLOW

DESIGN TIPS

Navigation

• Where am I?

• Where have I been?

• Where can I go?

• Should answer all 3 questions

• Should be the same on every page

DESIGN TIPS

White Space

• Page should be evenly distributed

• Allow some space between graphics and text so the page doesn’t look cluttered

• Use squint test

• Stand back, squint eyes and see how

it looks from that view for layout and white space

DESIGN TIPS

Have a paper plan!

Apply KISS principle (Keep It Simple Stupid!)

GRAMMAR & SPELLING

PROOF, PROOF, PROOF…

REVISE, REVISE, REVISE …

To, Too, Two

Your, You’re

Good Luck!!