Basic Elements of Website Design: Session I

1
Basic Elements of Website Design Session I

• Eva Agbada
• Prepared for
• TC-210 Instructional Communications
• Spring 2008

2
At a glance

• Website Project
• Session I
• Elements of Website Design
• Straight XHTML with Notepad
• Session II
• Elements of Website Design (continued)
• More XHTML with Dreamweaver
• Session III
• Publishing your Website
• FTP using Dreamweaver
• Using a hosted website

3
You Need a Plan

• Purpose and Scope?
• Why are people going to visit this site?
• What are the short and long term goals of the
  site?
• What types of tasks will these visitors perform?
• Umbrella site?
• Sub-site? Are you only creating a piece of a
  broader site?
• Audience
• Who is (are) the target audience(s)?
• What are their limitations?

4
The Window

• Turn your paper sideways 43 aspect ratio.
• Display sizes
• 640x480
• 800x600
• 1024x768
• Prevent horizontal scrolling
• Keep important info Before the Scroll

5
File Size

• Page Size (in bytes that is)
• Download Speed/Optimize graphics
• Smaller Size Faster Download

6
Color

• Be consistent and predictable
• Bluelink redstop
• Fit the purpose of the site
• 216 Web-Safe Colors
• http//html-color-codes.com
• Only 3-4 colors per page
• Aim for high contrast

7
Font

• Browser Defaults
• Limit to 2 fonts
• Keep sizing of text consistent
• Verdana (sans serif) Georgia (serif) optimized
  for the web

8
Backgrounds

• Human Eye is most comfortable with
• Black on White
• Color on White
• White on Color
• Avoid Background Images, Patterned Backgrounds
• Set White Backgrounds to White

9
Writing

• Short - 50 less than print
• Pyramid Structure
• Chunks
• Subheads
• Bullets
• Links (non-linear)
• Name and Logo in view
• Provide a printable version (if needed)

10
Navigation

• Can the user answer these questions
• Where am I right now?
• Where else can I go from here?
• How can I get there?
• How will I get back?
• ---Jennifer Fleming Web Navigation, Designing
  the User Experience (OReilly 1998)

11
Navigation Cont.

• She goes on to sayNavigation should
• Be Easily learned
• Remain consistent
• Provide feedback
• Use clear and understandable labels
• Offer alternatives
• Require an economy of action and time