Web Design

WEB DESIGNTIPS FOR DESIGNING A WEB PAGE

PURPOSE OF WEBSITETo informTo persuadeTo market/sellTo entertainTo 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 PRINCIPLES1. Alignment2. Proximity3. Repetition4. Contrast5. 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 TIPSNavigation• Where am I?• Where have I

been?• Where can I go?

• Should answer all 3 questions

• Should be the same on every page

DESIGN TIPSWhite 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 TIPSHave a paper plan!Apply KIS principle (Keep It Simple!)

GRAMMAR & SPELLINGPROOF, PROOF, PROOF…REVISE, REVISE, REVISE …

Good Luck!!