Printable Stylebook


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Printable Stylebook

  1. 1. Sun Foundation Web Design Guidelines and Style Book What is the goal of this stylebook? Our aim is to create a user-centered design model that will keep current users and draw new ones. Who is the audience for this stylebook? Our stylebook is addressed to all the volunteers who will dedicate their time to updating and maintaining the Sun Foundation site. Table of Contents P. 2. Introduction: How to Use Guidelines. P. 3. Planning: How to Get Started. P. 4. Design: How to Create the Desired Effect P. 5 - 10. Production: How to Build the Pieces. P. 11. Maintenance: How to Keep Users Coming Back. P. 12 - 14. Assessment: How to Evaluate the Site. P. 15. Bibliography: Research Used to Develop This Style Book.
  2. 2. P. 2. Introduction How should these guidelines be used?  To provide the best web design solutions, always use our guidelines with a user-centered mindset.  Specifically, employ user feedback to determine if there is a better solution than the one offered here.  Always consider how a decision will impact the user. How are these guidelines organized?  The organization is according to the web site development process.  There are5 phases in this process: Planning, Design, Production, Maintenance, and Assessment. What are these guidelines based on?  The basis is current, published research in the field of web design.  Refer to the Bibliography. How can I print these guidelines?  A printable version of the Sun Foundation Web Design Guidelines and Style Book has been provided.  You will find the link at the bottom of the index page.
  3. 3. P. 3. Planning What do I want the site to accomplish?  The site should effectively communicate the identity, credibility, and purpose of the Sun Foundation.  It should also successfully recruit both students and volunteers to participate in Sun Foundation programs.  This should be achieved by a clear explanation of the above elements to users.  In addition, plan ways to make the site useful, relevant, interesting and engaging to users. Who are my users, and what do they want and need?  Users come from a rural area and use small monitors, slow modems, and usually have older I. E. or Netscape browsers. They include people of all ages.  They need a site that loads quickly with limits on file size and color settings. Specifically, create images to load progressively. Code them to include height and width specifications, and include alt tags. Exclude frames so users can bookmark easily.  They want important information to be the easiest to find. They also want to easily perform tasks: volunteering, registering for classes and researching topics of interest. How can I take advantage of the web medium?  Select a tone that is at times serious and at times fun.  Select a visual presentation that addresses the artistic and earthy quality of the foundation.  Provide search features and links to similar sites.  Provide ways to actively engage users.  Create quality, thought provoking content without bias.
  4. 4. P. 4. Design Is the home page designed effectively?  It tells visitors what the site does  It offers a directory of the site’s main contents.  It offers a summary of the most important news and promotions.  It provides a search feature. Does navigation design enable users to move around easily?  Labels clearly indicate link function.  Links look the same, are in the same place, and go the same place from/on every page.  Each page has the same link to home and high-level site categories.  Links don’t distract from page title or graphics.  Site map is provided. Is content organized so users easily find what they need?  Use effective headings that tell users what follows.  Use inverted pyramid writing style, and limit/chunk text.  Use abstracts or contents tables at the top of long pages.  Separate links from text blocks.  Design for readability: font Arial, 12pt. or higher, and paragraphs aligned left.  Provide a way to print related pages. What consistent, visual style is used to appeal to my audience?  The image-safe area is 600x400 pixels to avoid scroll.  The top and left parts of all pages are for identity and navigation.  Images project an identity of nature and artistry.  Content is presented efficiently and clutter-free.
  5. 5. P. 5. Production How do you prepare the site?  Use the following directory structure: The Sun Foundation Home Page • Purpose • Mission • List of Major Contributors • Historical Background • Strategic Targets • References • Links • Ants • • Links • • Tools •
  6. 6. Calendar of Events • Staff Bios Page • Links P. 6. Production cont. How do you prepare the site? cont.  Use the following directory structure: cont. • Administrative Bios Page • • (Key Biographies) • • Board Members • Programs • Links • Clean Water Celebration • • Funky Frogfest • • Organtic BioHumas Farming • • Living Upstream • • School Regranting Program • • Blacksmithing Workshops • Links • Beginning
  7. 7. P. 7. Production cont. How do you prepare the site? cont.  Use the following directory structure: cont. • • Trammel Lighting Devices • • Flora and Design • Tour of the Grounds • Links • Rock and Fossil Collecting • • Ceramics • • Insects • • Blackfeet Tepe • • Pavilion • • Performance Barn • • Great White Oak • P. 8. Production cont. How do you prepare the site? cont.  Use the following directory structure: cont. • Signed Boulder •
  8. 8. Membership • Link • Individual Contribution Form • • Business Contribution Form • • Arts and Science In The Woods Registration Form • • Art And Science Consent Form • • Alternative Ways of Giving • NewsLetter • Links • Clean Water Celebration • • Living Upstream • • Organic BioFarming P. 9. Production cont. How do you prepare the site? cont.  Use the following directory structure: cont. • • School Regranting Program • • Art And Science In the Woods Program • • Art and Science In th Woods Class List • • Art and Science In th Woods Sponsors •
  9. 9. • Wish List • Sponsors • Link • Art and Science In the Woods Sponsors • Feedback • Table Of Contents •  Use the above file naming conventions so names describe contents, and you know what files contain without opening.  Use generated page templates.  Separate content from interface. P. 10. Production cont. How do you prepare the site? cont.  Make content printable separately.  Use relative links – not full URLs so links test easier.  Use meta tags with useful key words and page descriptions. How do you prepare images?  Use jpg for photos and gif for limited colors.
  10. 10.  Reduce file size by using smallest images that still look nice.  Reduce color palate as much as is practical.  Use 72dpi files of 5k or smaller.  Have 20k or less total on image files per page.  Reuse images to take advantage of browser cache. How do you achieve final testing?  A 28.8k modem should load page in 15 seconds.  Check the site in Internet Explorer, Netscape, and Opera.  Test the site on the destination server.  Observe users accomplishing a set of tasks.  Make a backup CD. P. 11. Maintenance What do you need to do now that the site is up and running?  Tell users what’s new when content changes.  Check and maintain links weekly.  Respond to users who give feedback.  Track site activity monthly using ***ask mark***  Adapt the site every three months applying user feedback and site activity statistics to update for usability. How do you continue to attract and engage users?
  11. 11.  Update meta tags when appropriate.  Announce the site to relevant news groups and bulletin boards.  Advertise on major sites.  Advertise in magazines, on radio and on television. P. 12. Assessment When do you use this assessment tool?  Use this tool prior to any major site revisions.  Use this tool after any major site revisions. How do you use this assessment tool?  The following is an example using the tool on the currently (2-18-01) published Sun Foundation site.  Successful assessment should be 90% or higher Yes.  Current site assessment is 21% Yes.
  12. 12. Sun Foundation Site Analysis Check-list: 1. Does the home page tell visitors what the site does? No 2. Does the home page offer a directory of the site’s main contents? Yes 3. Does the home page offer a summary of the most important news and No promotions? 4. Does the home page provide a search feature? No 5. Does the site have consistent and effective navigation including a site map, No and appropriate links to other primary pages? 6. Does the site have internal and external search features? No 7. Does the site use standard link colors (blue with purple or red visited) with no No orphaned pages or broken links? 8. Are navigation and information separated? No 9. Does the site provide links to related sites? Yes 10. Does the site provide the proper Sun Foundation identity and purpose? Yes 11. Does the site establish credibility for the Sun Foundation? Yes 12. Does the site provide news coverage about Sun Foundation events? No 13. Is the site valuable, useful, or fun? Yes 14. Is the site innovative? No 15. Does the site involve the visitor and does it respond to the visitor? No 16. Does the writing engage the reader and provoke thought? No 17. Does the site provide quality content? Yes 18. Is the content free of bias (gender, race, religion, etc.)? Yes 19. Is the site visually appealing? No 20. Does the site get and sustain the user’s attention? No 21. Do the design and style reflect and compliment the content? No 22. Do the design and style of the site enhance the delivery of information? No 23. Is there consistency in the design format? No 24. Are the pages clean and uncluttered? No 25. Is the site properly organized so that primary topics are separated and similar No subtopics are linked appropriately? 26. Are the most frequently visited pages easiest to access? Yes 27. Is there a limit on the content of each area? No 28. Is the content organized in inverted pyramid format? No 29. Is text chunked and formatted for readability? No 30. Is there an abstract or Table of Contents at the top of all long pages? No 31. Are headers useful? No 32. Do the pages load in 15 seconds or less? Yes 33. Does the site look appropriate in a reasonable variety of browsers? Yes 34. Does the site utilize simple, sensible, lowercase URL’s? No 35. Does the site exclude framed pages that are difficult to bookmark, etc.? Yes 36. Does the site avoid multiple fonts and new technology that users are not No prepared to use?
  13. 13. 37. Does the site require minimal scroll even with small monitors? No 38. Does the site avoid distractions like continuous animation or sound files? Yes 39. Is there a text only option for viewing? No 40. Is it possible to print content without navigation or other unnecessary objects? No 41. Is the author of each page clearly identified? No 42. Is the site updated so all information is current? No 43. Is the site properly spell checked? No
  14. 14. P. 15. Bibliography Brown , Luanne. On the Road to Good Web Design 1996. Henke, Harold. Design of HCIzine Web Page 1996. Neilsen, Jakob. Designing Web Usability. Indianapolis:New Riders Publishing, 2000. Nielsen, Jacob. Top Ten Web Design Mistakes. Jakob Nielsen's Alertbox 1996. Web Design Guidelines 1999.