So You Want a Web Page!So You Want a Web Page!

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.

Web Design Examples

• http://users.nac.net/falken/annoying/main.html

• http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/bad-design.htm

Web Design Features

• General Design

• Backgrounds

• Text

• Navigation

• Links

• Graphics

• Blinking and animations

• Junk

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/

Good Web Design Examples

• http://americanhistory.si.edu/westpoint/index.html

• http://www.apple.com/

• http://musicstem.com/

• http://www.immuexa.com/

Elements of Effective Web Design

• Simplicity

• Consistency

• Identity

• Content

• User-friendly navigation

• Visual Appeal

• Compatibility

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

Plan Your Website

There are 3 critical phases in the design process

› Information design › Site design› Page design

Information Design

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

Assignment

• Identify the purpose and audience for your website.

Site Design

• Organization

• Navigation

• Interaction/Functionality

• Overall Usability/Accessibility

Organization

Navigation

• Navigation bars

• Place-finding tools

• Breadcrumbs

• Site maps

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

Usability/Accessibility

• Usability refers to how easy a site is to use and how well it functions. http://www.useit.com/alertbox/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/

Assignment

• List the major sections and subsections for your website

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

Layout Guidelines

• Alignment

• Visual Hierarchy

• Balance

• Repetition/Consistency

• Proximity

• Contrast

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› http://www.alvit.de/handbook/ - Web Developer's Handbook› http://www.tonyyoo.com/protolize/ › http://www.alistapart.com/ - A List Apart: For People who Make Websites