1. Website Design Fundamentals Michele Beisler 2006 FIRST Robotics Competition Kickoff January 7, 2006

2. Outline  Site Planning  Visual Design  Using Graphics and Pictures  Bells and Whistles  Technical Information

3. Site Planning  Determine site goals  Analyze your audience  Analyze the “competition”  Know your own abilities and resources  Site Map

4. Site Goals and Guidelines  Why are you creating this site?  What do you hope to achieve with this site?  What action do you want the audience to take as a result of visiting?  What restrictions or guidelines must be followed when designing the site? FIRST Robotics FIRST Robotics Your School Your School

5. Audience Analysis  Who are you trying to reach? Age Age Language and Culture Language and Culture Level of education Level of education Access to Web (High-speed? Dial-up?) Access to Web (High-speed? Dial-up?) Familiarity with the Web Familiarity with the Web  What are they looking for at your site? Information Information Services Services Community Community Are there multiple audiences?

6. Analyze the “Competition”  Look at sites with similar content FIRST Robotics Teams FIRST Robotics Teams  Where do they excel or fall short FIRST Robotics Teams web site design award winners FIRST Robotics Teams web site design award winners

7. Know Resources & Abilities  What technical knowledge does your team have?  What tools and resources does your team have access to? TIME TIME Software Software Web authoring toolsWeb authoring tools Image editing toolsImage editing tools Animation toolsAnimation tools Hardware Hardware CameraCamera Other People Other People

8. Site Map  All the pages and all the links of the current site  Boxes for pages, lines for links  Shows how “deep” your site is Home Schedule Album Members Sponsors 2005 2004Media Day Build Competition

9. Visual Design What looks good? Consistency is a good goal for any design

10. Elements of Visual Design  Composition White Space White Space Avoid “information overload” syndromeAvoid “information overload” syndrome Helps readers scan/find info quicklyHelps readers scan/find info quickly  Color Make websites easy on the eyes Make websites easy on the eyes  Fonts Use common fonts Use common fonts Limit number of fonts per page and per site Limit number of fonts per page and per site Use the same fonts consistently throughout the site Use the same fonts consistently throughout the site  Motion Coolness factor if not overdone Coolness factor if not overdone Use to enhance content Use to enhance content

11. Using Graphics and Pictures  Make your site more attractive  Keep picture file size small to keep page loading time short  Use file types of.jpg and.gif

12. Bells and Whistles  Flash Animation Special software needed to create files Special software needed to create files  Counters Keeps track of number of hits to your site Keeps track of number of hits to your site Check with your Web host server for compatibility Check with your Web host server for compatibility Search for free counters online Search for free counters online  Sound Adds another dimension to your site Adds another dimension to your site

13. Web Site Examples  Regional Award Winners http://intiernovi503.com/ http://www.boilerinvasion.org http://www.titanrobotics.net/ http://www.fireteam.org/  Championship Award Winner http://www.team188.com/

14. Technical Information Steps to getting website online  Domain name  Web hosting  Website creation software  Uploading your site

15. Domain Name  Free domain name Sub domain name of existing site Sub domain name of existing site Example: www.geocities.com/your-Yahoo!-IDExample: www.geocities.com/your-Yahoo!-ID  www.yourdomain.com www.yourdomain.com Register unique domain name for $8 to $25 per year Register unique domain name for $8 to $25 per year Choose from.com,.net,.org,.biz,.info,.us Choose from.com,.net,.org,.biz,.info,.us Search internet to select company to work with Search internet to select company to work with Example: www.gate.com $7.95/yr domain regExample: www.gate.com $7.95/yr domain regwww.gate.com

16. Web Hosting  Find a web hosting service – Here is where your website will reside Free Free Size limitationsSize limitations May be hidden costsMay be hidden costs Advertising on your siteAdvertising on your site Private Private Costs vary from $10+ per monthCosts vary from $10+ per month No unwanted advertisingNo unwanted advertising More disk spaceMore disk space

17. Free Web Hosting  www.geocities.yahoo.com www.geocities.yahoo.com  www.freewebs.com www.freewebs.com  www.topcities.com www.topcities.com  www.angelcities.com www.angelcities.com  Or you can search for free web hosting here – www.freewebspace.net www.freewebspace.net

18. Web Creation Software  Most Popular Microsoft Front Page Microsoft Front Page Macromedia Dreamweaver Macromedia Dreamweaver  Free web creation software Search the Internet Search the Internet  Online Templates Usually costs money Usually costs money Search the Internet for options Search the Internet for options

19. Uploading Your Site  Send files to web hosting server  Final step in website creation  Check site online to make sure it looks and works the way you want it to

20. Review  Plan your website ahead of time Make it easy to understand and navigate Make it easy to understand and navigate Make it easy on eye and the brain Make it easy on eye and the brain The better the planning up front, the easier it will be to create your site The better the planning up front, the easier it will be to create your site  Get a domain name and web hosting service  Build and upload your website Don’t forget to update and improve your site over time Don’t forget to update and improve your site over time