Technology Training:Basics of Web Design

SummaryOverview.........................................................................................................................2

Preplan............................................................................................................................2

Purpose.................................................................................................................2

Audience................................................................................................................2

Formatting & Hosting.............................................................................................3

Plan & Organize..............................................................................................................3

Content..................................................................................................................3

Pages & Files........................................................................................................4

Site Map Example.................................................................................................4

Design.............................................................................................................................4

Mockups & Prototpyes...........................................................................................4

Layout – Principles of Web Design........................................................................5

Print to Web...........................................................................................................5

Accessibility...........................................................................................................5

Revise..............................................................................................................................6

Get a Second Opinion...........................................................................................6

Spring Cleaning.....................................................................................................6

Resources.......................................................................................................................7

General..................................................................................................................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

Preplan

Purpose

Websites 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?

Audience

Your 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 & Hosting

Web Publishing options @ SCU

Hosting Options @ SCU

Plan & Organize

Content

Choose 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

Design

Mockups & 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

Revise

Get a Second Opinion

Solicit user feedbacko 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

Resources

General

Web Publishing at Santa Clara Universityo http://www.scu.edu/webpublishing/

Commonspot Helpo http://www.scu.edu/webpublishing/cms/

Before You Start a Websiteo http://webdesign.about.com/od/beforeyoustartawebsite/

Before_You_Start_a_Website.htm Building a Web Page for the Totally Lost

o http://webdesign.about.com/od/beginningtutorials/a/aa033103a.htm Web Design Basics

o http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm

Content

Writing and Editing for the Webo http://www.scu.edu/webpublishing/content/writing.cfm

Writing for the Webo http://websitetips.com/webcontent/

Layout

Commonspot Design Resourceso http://www.scu.edu/webpublishing/design/

Web Layout Basicso 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 Webo http://webdesign.about.com/od/usability/Usability_on_the_Web.htm

Web Accessibilityo http://webdesign.about.com/od/accessibility/

Web_Accessibility_Web_Usability.htm WDG Accessibility Tips

o http://htmlhelp.com/design/accessibility/tips.html Web Accessibility Initiative (WAI)

o http://www.w3.org/WAI/

Examples of Websites

CSS Beautyo http://cssbeauty.com/

No Resolutiono 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