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

5. 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?

6. 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

7. 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

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

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

10. 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

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

13. Web Site Examples Regional Award Winners http://intiernovi503.com/
Championship Award Winner

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

15. Domain Name Free domain name www.yourdomain.com
Sub domain name of existing site
Example:
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: $7.95/yr domain reg

16. 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

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

18. 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

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

21. Good Luck!