Website Design Fundamentals
Download
Report
Transcript Website Design Fundamentals
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