Website DesignWebsite DesignFundamentalsFundamentals

Michele BeislerMichele Beisler

2006 FIRST Robotics 2006 FIRST Robotics Competition KickoffCompetition Kickoff

January 7, 2006January 7, 2006

OutlineOutline

Site PlanningSite Planning Visual Design Visual Design Using Graphics and PicturesUsing Graphics and Pictures Bells and WhistlesBells and Whistles Technical InformationTechnical Information

Site PlanningSite Planning

Determine site goalsDetermine site goals Analyze your audienceAnalyze your audience Analyze the “competition”Analyze the “competition” Know your own abilities and resourcesKnow your own abilities and resources Site MapSite Map

Site Goals and GuidelinesSite Goals and Guidelines

Why are you creating this site?Why are you creating this site? What do you hope to achieve with this site?What do you hope to achieve with this site? What action do you want the audience to What action do you want the audience to

take as a result of visiting?take as a result of visiting? What restrictions or guidelines must be What restrictions or guidelines must be

followed when designing the site?followed when designing the site? FIRST RoboticsFIRST Robotics Your SchoolYour School

Audience AnalysisAudience Analysis

Who are you trying to reach?Who are you trying to reach? AgeAge Language and CultureLanguage and Culture Level of educationLevel of education Access to Web (High-speed? Dial-up?)Access to Web (High-speed? Dial-up?) Familiarity with the WebFamiliarity with the Web

What are they looking for at your site?What are they looking for at your site? InformationInformation ServicesServices CommunityCommunity

Are there multiple audiences?

Analyze the “Competition”Analyze the “Competition”

Look at sites with similar contentLook at sites with similar content FIRST Robotics TeamsFIRST Robotics Teams

Where do they excel or fall shortWhere do they excel or fall short FIRST Robotics Teams web site design FIRST Robotics Teams web site design

award winnersaward winners

Know Resources & AbilitiesKnow Resources & Abilities

What technical knowledge does your team have?What technical knowledge does your team have? What tools and resources does your team have What tools and resources does your team have

access to?access to? TIMETIME SoftwareSoftware

• Web authoring toolsWeb authoring tools• Image editing toolsImage editing tools• Animation toolsAnimation tools

Hardware Hardware • CameraCamera

Other PeopleOther People

Site MapSite Map

All the pages and all the links of the All the pages and all the links of the current sitecurrent site

Boxes for pages, lines for linksBoxes for pages, lines for links Shows how “deep” your site isShows how “deep” your site is

Home

Schedule

Album

Members

Sponsors

2005

2004 Media Day

Build

Competition

Visual DesignVisual Design

What looks good?What looks good?

ConsistencyConsistency

is a good goal for any designis a good goal for any design

Elements of Visual DesignElements of Visual Design CompositionComposition

White Space White Space • Avoid “information overload” syndromeAvoid “information overload” syndrome• Helps readers scan/find info quicklyHelps readers scan/find info quickly

ColorColor Make websites easy on the eyesMake websites easy on the eyes

FontsFonts Use common fontsUse common fonts Limit number of fonts per page and per siteLimit number of fonts per page and per site Use the same fonts consistently throughout the siteUse the same fonts consistently throughout the site

MotionMotion Coolness factor if not overdoneCoolness factor if not overdone Use to enhance contentUse to enhance content

Using Graphics and PicturesUsing Graphics and Pictures

Make your site more attractiveMake your site more attractive Keep picture file size small to keep page Keep picture file size small to keep page

loading time shortloading time short Use file types of .jpg and .gifUse file types of .jpg and .gif

Bells and WhistlesBells and Whistles

Flash AnimationFlash Animation Special software needed to create filesSpecial software needed to create files

CountersCounters Keeps track of number of hits to your siteKeeps track of number of hits to your site Check with your Web host server for Check with your Web host server for

compatibilitycompatibility Search for free counters online Search for free counters online

SoundSound Adds another dimension to your siteAdds another dimension to your site

Web Site ExamplesWeb Site Examples

Regional Award WinnersRegional Award Winnershttp://intiernovi503.com/http://intiernovi503.com/http://http://www.boilerinvasion.orgwww.boilerinvasion.org http://http://www.titanrobotics.netwww.titanrobotics.net// http://www.fireteam.org/http://www.fireteam.org/

Championship Award WinnerChampionship Award Winnerhttp://www.team188.com/ http://www.team188.com/

Technical InformationTechnical Information

Steps to getting website onlineSteps to getting website online Domain nameDomain name Web hostingWeb hosting Website creation softwareWebsite creation software Uploading your siteUploading your site

Domain NameDomain Name

Free domain nameFree domain name Sub domain name of existing siteSub domain name of existing site

• Example: Example: www.geocities.com/your-Yahoo!-IDwww.geocities.com/your-Yahoo!-ID

www.yourdomain.comwww.yourdomain.com Register unique domain name for $8 to $25 Register unique domain name for $8 to $25

per yearper year Choose from .com, .net, .org, .biz, .info, .usChoose from .com, .net, .org, .biz, .info, .us Search internet to select company to work Search internet to select company to work

withwith• Example: www.gate.com $7.95/yr domain regExample: www.gate.com $7.95/yr domain reg

Web HostingWeb Hosting

Find a web hosting service – Here is Find a web hosting service – Here is where your website will residewhere your website will reside FreeFree

• Size limitationsSize limitations• May be hidden costsMay be hidden costs• Advertising on your siteAdvertising on your site

PrivatePrivate• Costs vary from $10+ per monthCosts vary from $10+ per month• No unwanted advertisingNo unwanted advertising• More disk spaceMore disk space

Free Web HostingFree Web Hosting

www.geocities.yahoo.comwww.geocities.yahoo.com www.freewebs.comwww.freewebs.com www.topcities.comwww.topcities.com www.angelcities.comwww.angelcities.com Or you can search for free web hosting Or you can search for free web hosting

here – www.freewebspace.nethere – www.freewebspace.net

Web Creation SoftwareWeb Creation Software

Most PopularMost Popular Microsoft Front PageMicrosoft Front Page Macromedia DreamweaverMacromedia Dreamweaver

Free web creation softwareFree web creation software Search the InternetSearch the Internet

Online TemplatesOnline Templates Usually costs moneyUsually costs money Search the Internet for optionsSearch the Internet for options

Uploading Your SiteUploading Your Site

Send files to web hosting serverSend files to web hosting server Final step in website creationFinal step in website creation Check site online to make sure it looks Check site online to make sure it looks

and works the way you want it toand works the way you want it to

ReviewReview

Plan your website ahead of timePlan your website ahead of time Make it easy to understand and navigateMake it easy to understand and navigate Make it easy on eye and the brainMake it easy on eye and the brain The better the planning up front, the easier it The better the planning up front, the easier it

will be to create your sitewill be to create your site Get a domain name and web hosting Get a domain name and web hosting

serviceservice Build and upload your websiteBuild and upload your website

Don’t forget to update and improve your site Don’t forget to update and improve your site over timeover time