So You Want a Web Page!

1
So You Want a Web Page!
2
What is a Web Page?

• According to Webopedia, a web page is
• A document on the World Wide Web.
• A Web site is really a bunch of Web pages linked
  together by clickable hyperlinks.

3
Web Design Examples

• http//users.nac.net/falken/annoying/main.html
• http//www.un.org/events/workshop/dpi-unitar/2003/
  dreamweaver/bad-design.htm

4
Web Design Features

• General Design
• Backgrounds
• Text
• Navigation
• Links
• Graphics
• Blinking and animations
• Junk

5
Bad Web Design Examples

• http//valweb.org/
• http//www.scopesys.com/
• http//www.augsburg.edu/index.html
• http//www.mewspage.pwp.blueyonder.co.uk/
• http//www.oc.ca.gov/

6
Good Web Design Examples

• http//americanhistory.si.edu/westpoint/index.html
  
• http//www.apple.com/
• http//musicstem.com/
• http//www.immuexa.com/

7
Elements of Effective Web Design

• Simplicity
• Consistency
• Identity
• Content
• User-friendly navigation
• Visual Appeal
• Compatibility

8
Top 10 Do's and Don'ts

1. Keep graphics files small
2. Keep text files small
3. Design for easy reading
4. Design for all screen resolutions
5. Use "ALT" Tags On Graphics
6. Include contact information on every page
7. Keep your site fresh
8. Use small pages
9. Be backward compatible
10. Test your site as visitors will see it

9
Plan Your Website

• There are 3 critical phases in the design process
• Information design
• Site design
• Page design

10
Information Design

• Goals
• Audience
• Objectives
• Interactivity
• Tools
• Inventory
• Organization
• Planning

11
Assignment

• Identify the purpose and audience for your
  website.

12
Site Design

• Organization
• Navigation
• Interaction/Functionality
• Overall Usability/Accessibility

13
Organization
14
Navigation

• Navigation bars
• Place-finding tools
• Breadcrumbs
• Site maps

15
Interactivity/Functionality

• When planning for a site's functionality, ask
  yourself which of the following the site will
  require
• Search features
• Forms for submitting information
• Streaming media capabilities

16
Usability/Accessibility

• Usability refers to how easy a site is to use and
  how well it functions. http//www.useit.com/alert
  box/9605.html
• Accessibility refers to the practice of making
  pages on the Internet accessible to all users,
  especially those with disabilities.
  http//webaim.org/intro/

17
Assignment

• List the major sections and subsections for your
  website

18
Page Design

• Create some thumbnail sketches of the pages in
  the site.
• Create detailed page mock-ups or rough sketches
  of the pages in the site.
• Create a web-based prototype

19
Layout Guidelines

• Alignment
• Visual Hierarchy
• Balance
• Repetition/Consistency
• Proximity
• Contrast

20
Resources

• http//irt.austincc.edu/webdev/
• Accessibility
• http//www.accessify.com/tools-and-wizards/
• http//webaim.org/intro/
• http//www.w3.org/WAI/
• Colors on the Web
• http//www.colorsontheweb.com/
• http//wellstyled.com/tools/colorscheme2/index-en.
  html
• http//www.colorschemer.com/online.html
• http//colorblender.com/
• Interactivity
• http//www.dynamicdrive.com/
• http//www.hotscripts.com/
• http//javascriptkit.com/cutpastejava.shtml
• Graphics
• http//www.sxc.hu/home
• http//istockphoto.com/index.php
• Other Useful Links