Transcript Web Design
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 TIPS FONTS • 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 TIPS COLORS • 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 KIS principle (Keep It Simple!) GRAMMAR & SPELLING PROOF, PROOF, PROOF… REVISE, REVISE, REVISE … Good Luck!!