Website Design

Document Sample
Website Design Powered By Docstoc
					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          Are there multiple
       Community            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
 Allthe pages and all the links of the
  current site
 Boxes for pages, lines for links
 Shows how “deep” your site is

               Sponsors

                                    Build
        Home   Members
                          2004   Media Day
                Album
                          2005   Competition
               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
       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
     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
 Find
 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
 Oryou can search for free web hosting
 here – www.freewebspace.net
        Web Creation Software
 Most   Popular
     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