Preview Class Handout "

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