Design and Storyboards

Elements of Good Web Site Design With Thanks to Blue Web'n: http://www.kn.pacbell.com/wired/bluewebn/rubric.cfm

1.  Format of The Site

User Friendly 
-Clear focus, easy to understand and use, includes relevant, clearly labeled hyperlinks

Ease and Speed of Upload

-Graphics enhance information, text is easy to read. 

-Background is muted  and coordinates with text colors and graphics. 

-Page is narrow enough for someone with a low resolution monitor.

2.  Appearance of the Site

-Attractive and creative use of graphics and colors

4.  Content of the Site

-Credible, believable, accurate, complete, and current

4.  Usefulness of the Site

-Content is meaningful, difficult to convey, and/or extraordinarily good

5.  Richness of the Site

-Information is powerful and interesting enough to draw visitors for another visit.

Here are the Top 10 reasons why websites don't get awards (and annoy their visitors):

10. Broken images and links.
9. Spelling and grammar mistakes.
8. Slow Pages.
7. Using a HTML generator program to make your pages so that it looks generic.
6. Stupid Java applets.
5. Colored text on a colored or patterned background.
4. More than 1 ad banner on the page.
3. Your entire site is on a single 3-megabyte page.
2. Extraneous content and fluff.
1. Music.
 
ETC.
"Click Here to Enter"  This wastes your visitor's first impression and their time.
"Under Construction" notices.  If it's not finished, don't post it live yet.

Failure to Check Site on Different Platforms and Browsers.  Your site and fonts may look completely weird on Firefox or a Macintosh.

 This tutorial is adapted from  www.selfpromotion.com. 

Web Design Hosting, Publishing, Etc.

Web Hosting

All the files for your website are kept on one or more computers called web servers The server computer is said to be a host for your site. In other words, they look after your site and ensure it is available 24/7.

The web hosting requirements for any site vary according to the technology used to create it. The standard of service varies greatly from one company to the next. The speed and reliability of service and the level of customer support provided are both very important.  Thanks to http://www.redfoxwebdesign.com.au/index.html

What is a Domain Name?

Your domain name is an address where Internet users can find you on the web. An example is www.yourbusiness.com.au.

You should have a unique domain name for your website. There are certain rules in place regarding what names you can register particularly if you want a ".com.au" name. Redfox can register your domain name or you can do it yourself.  Thanks to http://www.redfoxwebdesign.com.au/index.html

Web Monkey for Kids Article on Hosting

www.godaddy.com

Westciv Complete CSS Guide (CSS is an alternative to HTML)
http://www.westciv.com/courses/index.html

Filamentality: create a Web-based activity you can share with others
http://www.kn.pacbell.com/wired/fil/

Tech Tamers Website Design Resources
http://www.techtamers.com/free_resources/followup/webcreatebs.htm

UCLA Teaching Assistant Training Program
http://www.oid.ucla.edu/Tatp/tutorials/tutorials-frame.htm

Education Online for Computers: Web Development Links
www.educationonlineforcomputers.com/links/Free-Web-Development-Training/

Teachers Net: Make Your Own Web Page
http://www.teachers.net/manual/

Top Ten Mistakes in Web Design
http://www.useit.com/alertbox/990502.html

SNOW Web Page Design Tools
http://snow.utoronto.ca/resources/education/edwebdes.html

Evaluating Websites: The Good, The Bad and The Ugly
http://lib.nmsu.edu/instruction/eval.html

Oswego Schools Educational Web Design
http://www.oswego.org/staff/cchamber/webdesign/edwebdesign.htm

Web Design with Dreamweaver

http://academiccomputing.stanford.edu/pubs/Docs/dreamweaver/

Web Design Links by ASPIRA

http://ctc.aspira.org/Toolkits.html#web

Add Free Video To Your Web Site

Thanks to Linda Roeder at About.com

Web Page Advice for Education Professionals

Less is More -Having a more content based web page containing the basics rather than a flashy page with many images and sounds makes it easier for your visitors to navigate.

Content, Content, Content -Your web page should have something meaningful to say.

Contact Information -A visitor should find how to contact you whether it be your e-mail address, phone number, or snail mail (postal address). Your should also include your name and your business affiliation.

Create Menus -If your web page will have multiple pages, then create a simple menu with clear choices.

Be Consistent -If you are placing a link to e-mail you at the bottom of your page, then consider placing it at the bottom of all your pages in the same spot.

Copyright Notices -Place appropriate copyright notices at the bottom of each page. Always ask someone for permission to use their picture or sound.

Plan -Consider planning your page on paper before sitting down in front of the computer.

Naming Files -When saving, name your files so that you will remember what is what. (Ex. Schedule page should be named schedule.html)

Linking -If you are linking to other web pages make sure you have checked those web sites yourself. In essence, you are endorsing that site as one with good information. Legally, you need to have the site administrator's permission to link to their page.

Disclaimers -Add a disclaimer if you or the people you are representing are stating opinions not those of your group, employer or school district.

Pictures -Do NOT post identifying information or photographs of children. Consider using photos where children are involved in a project and you see their hands working on that project.

Review -Have a co-worker, friend, or family member review your site before you save it onto the server.

Biggest Mistakes in Web Design Many thanks to http://www.nonprofittips.com/badwebdesign/

1. Believing people care about you and your web site.

These ladies are laughing at you.  Nobody cares about you or your site. Really. What visitors care about is getting good information.

2. A man from Mars can’t figure out what your web site is about in less than 4 seconds.

You should be able to look at the home page of any site and figure out what the site is about within four seconds.

3. Using design elements that get in the way of your visitors.

Would you strangle a visitor to your home? hy are you using design elements  that keep the visitor from getting to the good stuff?

4. Navigational failure.

All visitors  must be able to answer:

Where am I?
Where have I been?
Where can I go next
Where’s the Home Page?

Navigation must be simple and consistent.

DON'TS:

~use different types of navigation on the same site;

~link to the page you're already on;

~links worded so poorly the visitor doesn’t know where he’ll go if he clicks;

~ no links back to the home page; etc.

5. Site lacks "Heroin" Content.

Why is heroin the ultimate product? Because people would crawl through the sewers and beg to buy it.  How many web sites have heroin content?  The best sites get people to come back again and again. You’ll know  “heroin” when you see it.  The best way to get people to come back to your site again and again is by having great information and updating it often.   How do you create Heroin Content? The answer depends on what your audience wants.

~ Do you know your target audience? Does your content match your audience’s expectations?

~  What's  the purpose of your site?

~  What information do I have that would cause anybody to visit my site a second or fourth time?" This is extremely important.

~   Is the content accurate?

~   Can people find the information  they’re looking for?

6. Forgetting the purpose of text.

Don’t use small text. "If people can’t see it, they will flee it."  

Text is Text. Don’t use graphics or Flash for text.

Gimme contrast. For instance, a blue and black text on a green background hurts the eyes.

 7. Too much material on one page.

Yes, it’s called a web page, but that doesn’t mean you have to cram all your material on one page.    It’s impossible for the eye to settle on one thing if you do. People get confused and people leave. Most folks don’t like to scroll.  

  8. Misunderstanding graphics.

Some of the mistakes include using too many animated GIF’s, large graphics, ugly background images, lack of contrast, inappropriate graphics, etc.

__________________________

Web designers can use a variety of software to build a website.  District 11 and Mann use FrontPage, but others use HTML, PowerPoint, Word, Dreamweaver, Publisher, CSS and other programs.

Make a Web Page with PowerPoint

Build a Web Page with PowerPoint 2000

Convert a PowerPoint Show to HTML

Putting A PowerPoint Presentation on the Web

Creating Web Pages with Word  

Quick Step Word for Web  

Word Web Pages

General Web Development

Education Online for Computers

Efuse - The friendly place to learn how to build a web site

Tutorials for Beginners

Spider Dance Web Development For Educators

Web Standards

What Every Web Site Owner Should Know About Standards: A Web Standards Primer

THE LEARN PAGE of the Web Standards Project

How To Build Websites.com

Web Standards Group

Zeldman Designing with Web Standards

Maxdesign Web Standards Checklist

Boag World Practical Advice for Those Managing Web Sites

The Importance of Web Standards

WinWriters-Using Web Standards to Create HTML Files

A Practical Start to Using Web Standards

Cascading Style Sheets (CSS)

Introduction to CSS

CSS Tutorial

Complete CSS Guide

 StyleMaster Demo

World Wide Web

Consortium

W3 Schools 

CSS How To

Page Resource

CSS Tutorials

Writing Efficient CSS

Graphics Sites

A+B+C Graphics
Backgrounds, balls, lines, buttons, and banners.
http://www.abcgiant.com/  

A1 Icon
Site contains icons, backgrounds, animated gifs, bars & lines, balls, buttons, clip art, fonts and more.
http://www.free-graphics.com/  

Acid Fonts
http://www.acidcool.com/  

Amanda's Castle
Find graphics for dragons, fairies, magic, scary, animations, etc.
http://www.dd.com.au/people/ajhome.html  

AndyArt
Free animated gifs, arrows, backgrounds & textures, buttons, bullet points, counter digits, letters, and lines and rules.
http://www.screamdesign.com/  

Animation Arthouse
Dragons, mandalas, ravens, caterpillars, snakes, spiders, and bars.
http://www.animation.arthouse.org/index.html  

Ariel's Studio
Buttons, bars, sets, jewel sets, blade pros, and tiles.
http://www.dragonmyth.com/ariel/index.htm  

Back At Ya
Background sets in many categories. Site includes a search engine to search this site.
http://www.backatya.com/    

Background City
A new theme each month and a great selection from which to select from.
http://www.backgroundcity.com/  

Backgrounds by Carel
More than 600 backgrounds.
http://www.bycarel.com/bbyc/index.html  

Backgrounds by Julie
http://julie.itgo.com/backgrounds/

Backgrounds by Marie
Site contains some of the following categories: classic painters sets, jeweled sets, unique sets, family & Victorian sets, floral sets, scenic sets, various animal sets, angelic & cherub sets, birthday sets, wedding sets, children sets, miscellaneous sets, muted seamless sets, tiled backgrounds, Thanksgiving sets, Christmas sets, and a color chart picker & tutorial.
http://www.artistic-designers.com/bkgds/

More Graphics Sites

Becky's Wildlife & Fantasy Art!
Wildlife and fantasy artwork. There are graphics and tips for making a web page. 
http://www.wildlife-fantasy.com/  

Bisman's Free Web Graphics
http://www.bimsan.net/  

Clip Art
A site for clip art for Webmasters & Web Site Designers. You will find custom backgrounds, horizontal rules, animated globes, etc.
http://www.ClipartConnection.com/

Colormaker
Help with background colors for your web pages.
http://www.bagism.com/colormaker/

Dreambook
Select to your a guest page created by Dreambook in exchange for placing a banner ad on your page.
http://www.dreambook.com

Holiday Clip Art
Contains links to other sites.
http://members.cyberz.net/jkeepes/holiday.htm

Icon Bazaar
Large site with images that have clean edges and transparent backgrounds.
http://www.iconbazaar.com

Sun Microsystems
Free scripts from the developers of Java.
http://java.sun.com/openstudio/index.html

The Amazing Picture Machine
http://www.ncrtec.org/picture.htm

The Counter
Free counter for web sites.
http://www.thecounter.com

MediaBuilder
One of my favorite sites. Build custom 3-D text, banners and much more.
http://www.mediabuilder.com/index.html

Web Places Clip Art Review
This is an index of free image sites.
http://www.webplaces.com/html/clipart.htm

The Lycos Image Gallery
The gallery contains 80,000 FREE images, including clip art (much of it really neat, retro clip art) as well as
hard-to-find (and difficult-to-scan) photographs of athletes, movie stars, presidents, and much more.
http://www.lycos.com/picturethis/

The World of Animated Communications
Create banners and advertisements for your web site.
http://www.animation.com