Computers

Classes

Students

Teachers

Parents

Workshop Links

Web Design

What's out there?

In this activity you will examine existing school web sites to help you get a sense of what has already been created.

What's out there?

Back to top

Overview of design principles

Design Principles (pdf format)
Design Principles (HTML format)

The following links will provide additional information on basic web design principles:

Back to top

General Web Design:

Usablity Tips:  This tutorial or usability by Out Front lists 12 usability tips.
www.outfront.net/

OutFront Web Design Tips:  This basic tutorial is written in simple non-technical language.  It walks you through the entire design process in straight forward easy to follow steps.  This site is highly recommended.
www.outfront.net/

Web Style Guide:  This is a web version of the Web Style Guide, 2nd edition published by Yale University Press.  It is very well done and has an incredible amount of useful information on the entire web design process.
www.webstyleguide.com/

Website Tips:  This site is rich with resources about website design.  It is highly recommended!
www.websitetips.com/

Back to design techniques
Back to top

Color

Color Matters:  A very basic introduction to color theory.  Color scheme is an important element of your design and this page can help you pick appropriate colors.
www.colormatters.com/

Web Safe Color Chart:  This printable color chart of web safe colors is a very useful reference.
www.websitetips.com/

Website Tips:  The site has many useful links about color.  The topics range from information about color blindness to the psychology of color.  This site is highly recommended!
www.websitetips.com/

Using Color on Your Site: This tutorial on color by OutFront has good basic information on color in your web site:
www.outfront.net/

Color Schemes:  Information about color schemes from "Color Matters"
www.colormatters.com/

Back to design techniques
Back to top

Accessibility

AWARE:  Accessible Web Authoring Resources and Education (AWARE) provides information and links concerning web site accessibility.
aware.hwg.org/

CAST:  CAST (Center for Applied Special Technology) is an excellent resource for learning more about universal design and accessibility.
cast.org/

Vischeck:  This site simulates color blindness.  You can test your pages and/or images to see how a colorblind person would see them.  It also has a lot of information about colorblindness.  It is from a lab at Stanford University. 
www.vischeck.com/

Back to design techniques

Back to top

Navigation

Web Developer Notes:  This site gives an excellent tutorial on website navigation
www.webdevelopersnotes.com/

Madiros:  Good tips on how to design effective navigation in your website.
www.mardiros.net/

Back to design techniques
Back to top

Graphics

Grantastic Designs:  This outstanding site has a lot of very helpful design information including this page on using graphics in a web site.
www.grantasticdesigns.com/

Graphics and Palettes:  This is part Joe Gillespie's site on web design.  It offers a really nice introduction to graphics on the web.
www.wpdfd.com/ 

Scan Tips:  This page has an incredible amount of information about how to scan images.  Wayne Fulton fully explains the concept of image resolution and how it relates to image size and quality both for printing and web page use.
www.scantips.com/

Back to design techniques
Back to top

Identifying the audience and purpose for your web site:

In this activity you will take time write down some ideas to help guide you through the web site design process.  

Purpose  (pdf format)
Purpose  (HTML  format)

If you need more help with this section , read the OutFront section on this topic

Back to top

Navigation/file structure:

Designing the navigation of your web site is a difficult task.  This activity will help to guide you through this process.  It is also important to organize your files properly.  In the second part of this activity you will learn to do that effectively and efficiently.  

Filestructure (pdf format)

Web Style Guide:  Site Structure  This guide has an incredible amount of information including this section on site structure
www.webstyleguide.com

Jessettdesign  This site has easy to use information about website design.  This section on file structure is very helpful
www.jessett.com

Back to top

Drawing page templates:

Consistency is a key factor in web design.  In this section you will use graph paper or a grid to draw a homepage and content page template.  The web sites below have some good sample drawings:

Sample template diagram page:  This is a another good example of a template design page for a  web site.
www.outfront.net/tutorials_02/design/

Back to top

Links and Graphics:

Links:

Links are an essential component for navigating a web site.  In addition to linking within your site, linking to other web sites will greatly enhance your page.  In this activity you will learn how create links.   

Links:  (pdf format)
Links:  (HTML  format)

Graphics:

Using graphics can greatly enhance a web page.  However, it is important to consider three things, appropriateness, copyright issues, and web friendliness.  In this activity, you will learn where to find copyright friendly graphics and some basic graphic manipulation skills to help make your graphics more web friendly.  

Graphics:  (pdf format)
Graphics:  (HTML format)

Back to top

Writing for the web:

The instructor will give a PowerPoint presentation of an overview of some basic web principles for writing for the Internet. A web based version of this presentation has been provided for your convenience 

Writing Principles (pdf format)
Writing Principles (HTML format)

The following sites offer helpful information on this topic:
Writing for the Web:  These tips from OutFront cover the basics of how to write for the web.
www.outfront.net/

How Users Read on the Web:  This article by usability guru Jacob Nielsen clearly talks about how the typical user reads information on the web.
www.useit.com

Back to top

Tutorials

Acten:  This animated tutorial will walk you through the FrontPage basics.  It is a good resource for students as well.
www.actden.com/

Florida Gulf Coast University:  This site has excellent tutorials on many popular programs in addition to FrontPage.  It is well worth exploring!
www.fgcu.edu/support/office2000/

Back to top

Brittonkill CSD           Tamarac Secondary       Tamarac Elementary