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/m
ain.html
• http://www.un.org/events/workshop/dpi
-unitar/2003/dreamweaver/baddesign.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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Keep graphics files small
Keep text files small
Design for easy reading
Design for all screen resolutions
Use "ALT" Tags On Graphics
Include contact information on every page
Keep your site fresh
Use small pages
Be backward compatible
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
›
›
›
•
Colors on the Web
›
›
›
›
•
http://www.dynamicdrive.com/
http://www.hotscripts.com/
http://javascriptkit.com/cutpastejava.shtml
Graphics
›
›
•
http://www.colorsontheweb.com/
http://wellstyled.com/tools/colorscheme2/index-en.html
http://www.colorschemer.com/online.html
http://colorblender.com/
Interactivity
›
›
›
•
http://www.accessify.com/tools-and-wizards/
http://webaim.org/intro/
http://www.w3.org/WAI/
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