• Save
Design & Usability Basics
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Design & Usability Basics

on

  • 1,159 views

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

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

Statistics

Views

Total Views
1,159
Views on SlideShare
1,159
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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

Design & Usability Basics Presentation Transcript

  • 1. Laura Ruel September 2009 The basics of Design & Usability for Web sites
  • 2. What we’ll discuss today SEO Design Usability
  • 3. Two factors to discuss: Page titles Descriptions and keyword SEO introduction
  • 4. In design view or code view of Dreamweaver, you always should complete the title tag. Page titles
  • 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. 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. For keyword tags, use: http://freekeywords.wordtracker.com 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. 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. Design of any media Modular Design Typography Pacing Proximity Alignment
  • 10. Cognitive Proportion Preferences
  • 11. Cognitive Proportion Preferences 1 : 1.618 square Golden Section double square
  • 12. The Golden Section 1” 1”
  • 13. The Golden Section 1” 1” x 1.618
  • 14. The Golden Section 1” 1.618”
  • 15. The Golden Section
  • 16. Chambered Nautilus Spiral
  • 17. Human Proportions
  • 18. Architectural Proportions
  • 19. Architectural Proportions
  • 20. “ The Divine Proportion”
  • 21. Proximity Group related items together
  • 22. Alignment Elements should have some visual connection to another element on the page/screen
  • 23. Typography
  • 24. The main contrast
  • 25. Serif type
  • 26. Novelty type
  • 27. Anatomy of type
  • 28. Anatomy of type ascender Typography
  • 29. Anatomy of type baseline Typography
  • 30. Leading / line spacing
  • 31. Tracking
  • 32. Tracking
  • 33. Kerning
  • 34. Type contrast typeface case size reverse weight position italic texture color rotation
  • 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. Color, contrast and dimension Take the time to go through this interactive presentation that simplifies the concepts of color use for journalists. http://www.poynterextra.org/cp/
  • 37. A little history…. 216 Web “Safe” Colors http://www.websitetips.com/color/colourchart.html
  • 38. Kuler
  • 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. 5 Usability Tips to know
  • 41. Start with a storyboard. Usability tip #1
  • 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. Usability tip #3 Don’t trap (or confuse) your user. Remember… One place Two clicks Three levels
  • 44. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  • 45. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  • 46. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  • 47. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  • 48. Usability tip #4 White space wins Eyetracking research from the Nielsen/Norman group
  • 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. Usability tip #5 Feature faces