Technology Training:Basics of Web Design
SummaryOverview.........................................................................................................................2Preplan............................................................................................................................2
Purpose.................................................................................................................2
Audience................................................................................................................2
Formatting & Hosting.............................................................................................3
Plan & Organize..............................................................................................................3Content..................................................................................................................3
Pages & Files........................................................................................................4
Site Map Example.................................................................................................4
Design.............................................................................................................................4Mockups & Prototpyes...........................................................................................4
Layout – Principles of Web Design........................................................................5
Print to Web...........................................................................................................5
Accessibility...........................................................................................................5
Revise..............................................................................................................................6Get a Second Opinion...........................................................................................6
Spring Cleaning.....................................................................................................6
Resources.......................................................................................................................7General..................................................................................................................7
Content..................................................................................................................7
Layout....................................................................................................................7
Accessibility...........................................................................................................7
Examples of Websites...........................................................................................7
© 2009 Santa Clara University 1 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Overview
PreplanPurposeWebsites function to:
Present information (catalogs, profiles) Gather data (forms, surveys) Facilitate collaboration and discussion (wikis, forums)
The Web as a format The best format to reach your goals? What aspects of the web will you utilize? The best format to reach your audience?
AudienceYour target audience
Why would they use your website? What kinds of information will they need to access? How easily can they find what they need? How easily can they get what they need?
Accessibility: how easily can they get what they need? Disability Usability Device independence
© 2009 Santa Clara University 2 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Formatting & HostingWeb Publishing options @ SCU
Hosting Options @ SCU
Plan & OrganizeContentChoose appropriate content
Text Images Video and other media
Keep your audience in mind Short and simple Intro. Body. Conclusion. Repeat. Use keywords Drive user action (Read More, Contact Us, etc.)
Proofread No spelling/grammatical errors
Revise Is it clear? Is there a simpler way to say this? Is there a shorter way to say this? Is it necessary?
Get a second opinion
© 2009 Santa Clara University 3 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Pages & Files Project folder for notes, sketches, content, etc. List and group pages into categories
o Primary navigationo Create effective homepageo Avoid dead-end pageso Multiple access points
Sketch page layout Site maps: site architecture
Site Map Example
DesignMockups & Prototypes
© 2009 Santa Clara University 4 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Layout – Principles of Web Design
Fixed width vs. liquido Varying screen resolutions
Teasers and links vs. scrolling Balance graphics and text Web-safe colors
Print to Web Linear vs. Non‐linear Author‐driven vs. Reader‐driven Not everything can be converted Organize layout to maximize web capabilities
o Keep content from print in the same section o Use table of contents for navigationo Break pages into thematic sections
© 2009 Santa Clara University 5 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Accessibility
Web Content Accessibility Guidelines Text Alternatives for Non-Text Alternatives for Time-based Media Adaptable Distinguishable Keyboard Accessible Well-timed Avoid Seizures Navigable Readable Predictable Input Assistance Compatible
© 2009 Santa Clara University 6 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Dos and Don’ts
ReviseGet a Second Opinion Solicit user feedback
o Comment box/formo E-mail webmastero Focus groups
Office of Communications and Marketing Colleagues
Spring Cleaning Check monthly or quarterly Look for broken links Keep content fresh
o Commonspot automated freshnesss Replace images frequently
o Update content: update images
© 2009 Santa Clara University 7 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
ResourcesGeneral Web Publishing at Santa Clara University
o http://www.scu.edu/webpublishing/ Commonspot Help
o http://www.scu.edu/webpublishing/cms/ Before You Start a Website
o http://webdesign.about.com/od/beforeyoustartawebsite/ Before_You_Start_a_Website.htm
Building a Web Page for the Totally Losto http://webdesign.about.com/od/beginningtutorials/a/aa033103a.htm
Web Design Basicso http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm
Content Writing and Editing for the Web
o http://www.scu.edu/webpublishing/content/writing.cfm Writing for the Web
o http://websitetips.com/webcontent/
Layout Commonspot Design Resources
o http://www.scu.edu/webpublishing/design/ Web Layout Basics
o http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm#s5
Accessibility What do the Accessibility Guidelines Mean to Me?
o http://webdesign.about.com/od/accessibility/a/accessibility_g.htm Usability on the Web
o http://webdesign.about.com/od/usability/Usability_on_the_Web.htm Web Accessibility
o http://webdesign.about.com/od/accessibility/ Web_Accessibility_Web_Usability.htm
WDG Accessibility Tipso http://htmlhelp.com/design/accessibility/tips.html
Web Accessibility Initiative (WAI)o http://www.w3.org/WAI/
Examples of Websites CSS Beauty
o http://cssbeauty.com/ No Resolution
o http://cssliquid.com/
© 2009 Santa Clara University 8 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training
Web Design - Design Galleryo http://webdesign.about.com/od/layout/ig/Web-Design-Design-Gallery/
© 2009 Santa Clara University 9 of 9 document.docTechnology Training: 554-5430 or 554-5014 www.scu.edu/training