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

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

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

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 Your School

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

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

Know Resources & Abilities What technical knowledge does your team have? What tools and resources does your team have access to? TIME Software Web authoring tools Image editing tools Animation tools Hardware Camera Other People

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 2004 Media Day Build Competition

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

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

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

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

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/

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

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

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

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

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

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

Review Plan your website ahead of time Make it easy to understand and navigate Make it easy on eye and the brain 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

Good Luck!