website design fundamentals
TRANSCRIPT
![Page 1: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/1.jpg)
Website DesignWebsite DesignFundamentalsFundamentals
Michele BeislerMichele Beisler
2006 FIRST Robotics 2006 FIRST Robotics Competition KickoffCompetition Kickoff
January 7, 2006January 7, 2006
![Page 2: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/2.jpg)
OutlineOutline
Site PlanningSite Planning Visual Design Visual Design Using Graphics and PicturesUsing Graphics and Pictures Bells and WhistlesBells and Whistles Technical InformationTechnical Information
![Page 3: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/3.jpg)
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
![Page 4: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/4.jpg)
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
![Page 5: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/5.jpg)
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?
![Page 6: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/6.jpg)
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
![Page 7: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/7.jpg)
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
![Page 8: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/8.jpg)
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
![Page 9: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/9.jpg)
Visual DesignVisual Design
What looks good?What looks good?
ConsistencyConsistency
is a good goal for any designis a good goal for any design
![Page 10: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/10.jpg)
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
![Page 11: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/11.jpg)
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
![Page 12: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/12.jpg)
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
![Page 13: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/13.jpg)
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/
![Page 14: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/14.jpg)
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
![Page 15: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/15.jpg)
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
![Page 16: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/16.jpg)
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
![Page 17: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/17.jpg)
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
![Page 18: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/18.jpg)
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
![Page 19: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/19.jpg)
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
![Page 20: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/20.jpg)
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
![Page 21: Website Design Fundamentals](https://reader033.vdocuments.us/reader033/viewer/2022052321/5562d2f5d8b42a49398b4d59/html5/thumbnails/21.jpg)