Web Design Principles
Designing educational websites
Larysa Nadolny
Educational Technology Specialist
CCIU
Agenda
1. Creating a web page
2. Web design basics
3. Copyright laws
4. Getting more help
Agenda
1. Creating a web page
2. Web design basics
3. Publishing to the web
4. Getting more help
Web Design Programs
Mozilla
Composer
many
others…
Microsoft
Word
Adobe
Dreamweaver
Microsoft
FrontPage
Netscape
Composer
Agenda
1. Creating a web page
2. Web design basics
3. Copyright laws
4. Getting more help
Web Design Basics
Planning
Essentials
Visuals
Goals
Title
Layout
Content
Page content
Design
Structure
Link to
homepage
Images
Maintenance
Author
Revised date
http://www.webstyleguide.com/
Advanced
design
Web Design Basics
Planning
Goals
Content
Structure
Maintenance
Web Design Basics
Essentials
Title
Page content
Link to
homepage
Author
Revised date
Web Design Basics
Visuals
Layout
Design
Images
Advanced
Design
Distractions
 Click HERE!
Distractions
• Avoid loud or bright colors.
• Avoid special fonts
Imagine trying to read a couple of paragraphs of this!
• Avoid italics and underline; unless absolutely necessary.
• Strive for proportional relationships among fonts.
Too Big
• Avoid animated images.
Too Small
Agenda
1. Creating a web page
2. Web design basics
3. Copyright laws
4. Getting more help
Copyright Laws
Technology and Learning Chart
http://www.mediafestival.org/copyright_chart.pdf
Cyberbee (elementary and middle school)
http://www.cyberbee.com/cb_copyright.swf
Education World Article
http://www.education-world.com/a_curr/curr280.shtml
Agenda
1. Creating a web page
2. Web design basics
3. Copyright laws
4. Getting more help
Getting Help
Web Style Guide, 2nd. Edition: This edition is free online, but it also can be
purchased at Amazon.com
http://www.webstyleguide.com/
Digital Web Magazine article “The Principles of Design” By McClurg-Genevese
http://www.digital-web.com/articles/principles_of_design/
Award Winning Websites “Webby Awards”
http://www.webbyawards.com/
Award Winning Websites “American Design Awards”
http://www.americandesignawards.com/
Getting Help
HTML lessons for students
http://www.goodellgroup.com/tutorial/index.html
Web Teacher Blog
http://www.webteacher.ws/
Middle School Web Design Course Article
http://www.adobe.com/devnet/education/articles/empowering_learners.html