Design & Usability Basics


Published on

This presentation is about the Basics of Design & Usability for Web sites. It discusses topics such as SEO, Design, and Usability.

Published in: Education, Technology, Design
  • 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

Design & Usability Basics

  1. 1. Laura Ruel September 2009 The basics of Design & Usability for Web sites
  2. 2. What we’ll discuss today SEO Design Usability
  3. 3. Two factors to discuss: Page titles Descriptions and keyword SEO introduction
  4. 4. In design view or code view of Dreamweaver, you always should complete the title tag. Page titles
  5. 5. Search engines put the most weight on page titles. Pages must have distinct titles. Whatever is at the beginning of the title tag is considered most relevant. Words that are in your site URL are BOLD in search engine results. Page titles
  6. 6. Meta description tags are also called snippets. Location of code for these is important. They always should be at the top of your page. Best to put them below to the title tag. In Dreamweaver: Insert • HTML • Head Tags • Meta Put most specific, descriptive words first. Based on the search engine, a certain number of words can be used – if you go beyond that number, search engines will truncate (…)the text. This number is usually between 10 and 12 words. Meta tags
  7. 7. For keyword tags, use: In Dreamweaver: Insert • HTML • Head Tags • Keywords Again, it is best to put most descriptive word first. FYI: There is some talk that keyword tags are ineffective. Keyword tags
  8. 8. Design basics What are good aesthetics for journalism on the Web? Although the basic concepts of good design DO still apply, we also are testing and trying to define how users relate to multimedia – Poynter and DiSEL projects. Consider frame of mind, expectations of the user. Let design drive technology. All aesthetics MUST be relevant to the news value of the presentation.
  9. 9. Design of any media Modular Design Typography Pacing Proximity Alignment
  10. 10. Cognitive Proportion Preferences
  11. 11. Cognitive Proportion Preferences 1 : 1.618 square Golden Section double square
  12. 12. The Golden Section 1” 1”
  13. 13. The Golden Section 1” 1” x 1.618
  14. 14. The Golden Section 1” 1.618”
  15. 15. The Golden Section
  16. 16. Chambered Nautilus Spiral
  17. 17. Human Proportions
  18. 18. Architectural Proportions
  19. 19. Architectural Proportions
  20. 20. “ The Divine Proportion”
  21. 21. Proximity Group related items together
  22. 22. Alignment Elements should have some visual connection to another element on the page/screen
  23. 23. Typography
  24. 24. The main contrast
  25. 25. Serif type
  26. 26. Novelty type
  27. 27. Anatomy of type
  28. 28. Anatomy of type ascender Typography
  29. 29. Anatomy of type baseline Typography
  30. 30. Leading / line spacing
  31. 31. Tracking
  32. 32. Tracking
  33. 33. Kerning
  34. 34. Type contrast typeface case size reverse weight position italic texture color rotation
  35. 35. The purpose of type Convey specific information Type Hierarchy Contrast made for a reason Signal another level of information Similar ‘levels’ or kinds of information should receive the same type treatment different ‘levels’ of information should be treated differently
  36. 36. Color, contrast and dimension Take the time to go through this interactive presentation that simplifies the concepts of color use for journalists.
  37. 37. A little history…. 216 Web “Safe” Colors
  38. 38. Kuler
  39. 39. When in doubt, keep thing simple. Will focus the reader’s attention on other visual elements of your page Will help the reader process your page The essence of simplicity
  40. 40. 5 Usability Tips to know
  41. 41. Start with a storyboard. Usability tip #1
  42. 42. Usability tip #2 Have one navigation scheme and stick to it. Never move (or eliminate) navigation. For initial navigation: top • sides • bottom When navigation fails, you can’t even get there.
  43. 43. Usability tip #3 Don’t trap (or confuse) your user. Remember… One place Two clicks Three levels
  44. 44. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  45. 45. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  46. 46. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  47. 47. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  48. 48. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  49. 49. Usability tip #4 White space wins White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.
  50. 50. Usability tip #5 Feature faces