• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this document? Why not share!

Preview Class Handout "

on

  • 566 views

 

Statistics

Views

Total Views
566
Views on SlideShare
566
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Preview Class Handout " Preview Class Handout " Document Transcript

    • Technology Training: Basics of Web Design Summary Overview...........................................................................................................................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 & Prototypes............................................................................................4 Layout – Principles of Web Design.........................................................................5 Print to Web............................................................................................................5 Accessibility.............................................................................................................6 Revise...............................................................................................................................7 Get a Second Opinion.............................................................................................7 Spring Cleaning.......................................................................................................7 Resources........................................................................................................................8 General...................................................................................................................8 Content....................................................................................................................8 Layout.....................................................................................................................8 Accessibility.............................................................................................................8 Examples of Websites............................................................................................8 © 2009 Santa Clara University 1 of 9 preview-class-handout3031.doc Technology 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 preview-class-handout3031.doc Technology 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 preview-class-handout3031.doc Technology 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 navigation o Create effective homepage o Avoid dead-end pages o Multiple access points − Sketch page layout − Site maps: site architecture Site Map Example Design Mockups & Prototypes © 2009 Santa Clara University 4 of 9 preview-class-handout3031.doc Technology Training: 554-5430 or 554-5014 www.scu.edu/training
    • Layout – Principles of Web Design − Fixed width vs. liquid o 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 navigation o Break pages into thematic sections © 2009 Santa Clara University 5 of 9 preview-class-handout3031.doc Technology 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 preview-class-handout3031.doc Technology Training: 554-5430 or 554-5014 www.scu.edu/training
    • Dos and Don’ts Revise Get a Second Opinion − Solicit user feedback o Comment box/form o E-mail webmaster o 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 preview-class-handout3031.doc Technology Training: 554-5430 or 554-5014 www.scu.edu/training
    • Resources General − 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 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 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.ht m − 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 Beauty o http://cssbeauty.com/ − No Resolution © 2009 Santa Clara University 8 of 9 preview-class-handout3031.doc Technology Training: 554-5430 or 554-5014 www.scu.edu/training
    • o http://cssliquid.com/ − Web Design - Design Gallery o http://webdesign.about.com/od/layout/ig/Web-Design-Design-Gallery/ © 2009 Santa Clara University 9 of 9 preview-class-handout3031.doc Technology Training: 554-5430 or 554-5014 www.scu.edu/training