Elements of Style for Web Design

1. Elements of Style for Web Design http://www.stanford.edu/~cquinn/papers/bostonpaper.html

2. 9/14/2009: Starter • Go to the following website http://www.msy.com.au/ • Answer the questions below about this site. • What is the purpose of this site? Sales? Information? Entertainment? • Would you buy from this site?

3. In The Elements of Style, Strunk and White talk about style: [One might] often suppose that style is a garnish for the meat of prose, a sauce by which a dull dish is made palatable. Style has no such separate entity; it is non-detachable, unfilterable. The beginner should approach style realizing that it is himself he is approaching, no other; and he should begin by turning resolutely away from all devices that are popularly believed to indicate style - all mannerisms, tricks, adornments. The approach to style is by way of plainness, simplicity, orderliness, sincerity

4. Outline • Principles of Composition Definition to the steps that one must take in designing a web. Items are considered in the natural flow of the design process. • Rules of Usage Guidelines for developing content across the entire web site. • An Approach to Style Specific items for the individual web page design • A Few Matters of Form Do’s and Don’ts to remember

5. Elementary Principles of Composition • What is the purpose? • Who is the Audience? • What is the Competition doing? • What will your pages say? • How will the pages look? • What is your timeline? • Who can test your site?

6. Elementary Rules of Usage • Make sure your links work. • Page content should be limited. • Consider white-space balance • Maintain stylistic coherence with graphics • Avoid dead-end links • Place important information at or near the top of the page • Indicate size on large files that will be downloaded • Place links on the word that describes where the link goes - never on the word "here" • Avoid "generic web information" • Make titles very descriptive

7. An Approach to Style • Consider Position of Graphics vs. Text • Number of links in a paragraph • Location of "content” • Continuity of design • Level Indication • Ease of traversal • Mapping use of information to design of information • Breadth vs. Depth • Provide a search mechanism

8. A Few Matters of Form • Don't put "Under Construction" on a page full of information. • In a similar vein don't have a link to a page that just says "Under Construction • Don't use icons/images/designs that are unrelated to what you do or what the button does - make sure there is a connection. • Don't use a background that interferes with the message • Don't forget ALT tags on images, text equivalents for audio files, text only versions of your pages, information about video in the cases where someone can't see video. • Provide webmaster information on at least the home page. Timestamp where appropriate. • Don't steal someone else's graphics. This doesn't mean you can't create a page with a graphic someone else created. You should just get permission to do so.