Web Page Design

1
Web Page Design
2
HTML

• Web Pages written in HTML (Hypertext Mark-up
  Language).
• Browser reads and interprets code
• Ex
• HTML Code Tags are used to control the
  content and format of web pages.
• Display Tags are used to control the content and
  format of web pages.
• HTML used to
• Define font size and type Emphasis
• Create Tables Organizing and formatting
• Create Lists Organizing
• Insert Graphics Visual Aids
• Add Links
• Relatively hard to create pages

3
Web-Editor Programs

• Ex MS FrontPage and Adobe GoLive
• WYSIWYG What You See Is What You Get (more or
  less)
• Similar to using old Word Processor Programs
• You type text, Web-Editor writes code
• You Type Tags are used to control the content
  and format of web pages.
• Web-Editor Writes Tags are used to
  control the content and format of
  web pages.
• No HTML knowledge required
• Easy to make web-pages

4
Process

• Analyze Audience
• Background
• Equipment
• Designing Sites and Pages
• Navigation
• Maintenance
• Launch the Site FTP to server
• Register the Site
• Maintain your Site

5
Designing Effective Sites

• Aim for Simplicity
• Choose color scheme consisting of a few colors
  (Not 256).
• Want high contrast between text and background
• Black text on white background easiest to read
• Avoid loud/busy backgrounds
• Do Have Consistent
• Navigation
• Colors
• Design
• Avoid
• Long passages of text
• Pages more than 2-3 screens long
• Horizontal Scrolling
• Meaningless graphics

6
Linking

• Do More information on designing web pages
• Do Not Click here for more information on
  designing web pages
• Do use standard formats for links (i.e.,
  underlined blue text)
• Think about how your site should be accessed
• Linear (sequence important)
• Random (want specific piece of information)
• Ask permission to link

7
Images

• Use small images/thumbnails for faster downloads
• Save image in dimensions to display on screen
• Reducing image size in browser makes image
  dimensions smaller, but doesnt reduce file size
  or download time.
• Reducing physical image size in graphics program
  makes dimensions smaller, and reduces file size
  and download times.
• Appropriate graphics Usually hard to create/find
• Meaningless graphics Usually easy to find

8
Page Layout

• Header
• Title of page
• Organization
• Navigation
• Side Navigation Bar
• Body
• Chunks of text
• Appropriate Images
• Anchors for navigation within page
• Bottom/Footer
• Navigation
• Links
• Author/Revision Information
• Mail to Link for Feedback
• Tables for controlling formatting?
• Printable?

9
Where do I start?

• Critically analyze web sites that you like and do
  not like and determine why
• Critically analyze web sites with a purpose
  similar to yours
• Establish design constraints based on site
• Colors
• Headers
• Footers
• Layouts
• Develop content
• Develop web page
• Test web page using different
• Browsers
• Computers
• Monitors
• Revise

10
Sample Web Pages

• My Homepage
• Engineering 111
• Engineering 331
• ThermoNet
• Mike Markels Web Design Tutorial