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
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
Sponsors
Home
Build
Members
2004
Media Day
2005
Competition
Album
Schedule
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


Fonts




Make websites easy on the eyes
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

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
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
a web hosting service – Here is
where your website will reside
 Find

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


Microsoft Front Page
Macromedia Dreamweaver
 Free

Popular
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