Web Design Principles
     Scot Hacker, Josh Williams
Web Design Principles
•   Multimedia packages
•   News sites
•   Story components
•   Redesigns
•   Blogs
•   Print
Simplify
“Don’t Make Me Think” != “Dumb it down”
How Not To Do It
Simplicity
  FTW
“Don’t Make Me Think”
                 Steve Krug

• Usage should be obvious, self-explanatory

• Remove the ????s
• Is th...
What we design for
             We think user will:


• Read
• Read
• Read
• Pause for reflection
• Click carefully chosen ...
What users actually do
Eyetrack
       eyetrack.poynter.org




What are people really looking at?
Eyetrack
What does this
kind of information
architecture do to
 someone’s brain?
Actionable Lessons from
              Eyetracking Studies
                    bit.ly/actionable-eyetrack




Users initial...
A headline has less than a second of a site
 visitor’s attention. White space is good.
Shorter paragraphs perform better than long
   ones. Large blocks of text are avoided.
Lists hold reader attention longer.
Lists hold reader
attention longer.
Ideal line length for human eye/best
  comprehension is around 420px.



                740 px




                 440 px
Bigger images
  get more
  attention.
Navigation tools work better at the top of the page.
      Search: Definitely at top, best top-right.
But rules are
 made to be
  broken.
Actionable Lessons from
  Eyetracking Studies
   bit.ly/eyetrack-actionable
The Basics

• Concept
• Color
• Dimensions
Concept - Wireframes

• Similar to
  storyboarding
• Define the basic
  architecture
• What’s most
  important?
HOME PAGE


                                                        NAVIGATION


                                         ...
Wireframes


• Should NOT look pretty
• NO thought to color, graphics, fonts
• Visio, OmniGraffle, Illustrator, index cards
Working with Color




• Palettes should be comfortable
• Use high contrast for text, but avoid highest
  contrast
• White...
CSS Drive Palettes
  cssdrive.com/imagepalette
Colorblender
  colorblender.com
Adobe’s Kuler
Mondrianum

Integrates palettes
from Kuler into the
OS X color picker
The color wheel - get to know
complements, triads, value, saturation, etc.
         bit.ly/color-schemes
Dimensions/Resolution

•   How wide should my design be?

•   As of July 2006, 77% of users have 1024 or higher

•   Curre...
NEW WIDTH=970
Know Your Audience - Browser Resolutions




                   Text
Know Your Audience - Browser Resolutions




                   Text
Web Developer’s Extension for Firefox
Don’t Forget
  Mobile
•   Smartphone marketshare
    keeps rising

•   Smartphone browsers
    keep getting better

•   If...
Just because newer phones have better
browsers doesn’t mean users wouldn’t still
         prefer a mobile stylesheet.
Same blog page on iPhone with and without WPTouch theme installed
Proportion/
  Layout
The Golden Section
The Golden Section
The Golden Section
The Golden Section
The Golden Section
Human Proportions
Human Proportions
“The Divine
Proportion”
“The Divine
Proportion”
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
The Golden Rectangle and Web Design
Creating the Golden Section

         1”



 1”
Creating the Golden Section

         1” x 1.618



 1”
Creating the Golden Section

               1.618”



 1”



         3/5            2/5
Nesting the Golden Section
Nesting the Golden Section
Nesting the Golden Section
Nesting the Golden Section
Nesting the Golden Section
Fibonacci in ferns,
chambered nautilus
Chambered Nautilus
     Spiral
Chambered Nautilus
     Spiral
The Golden Section




3/5            2/5
The Golden Section




2/5         3/5

      3/5            2/5
Alignment & Spacing

•   Major elements - align edges to one another

•   Leave some breathing room, but watch for
    unc...
There’s a
difference
 between
breathing
room and
giant gaps
Align elements horizontally
Align elements horizontally
... and vertically
... and vertically
Equal spaces between elements
Equal spaces between elements
An alignment (and typography) mess
Align edges and simplify type to streamline
Align edges and simplify type to streamline
Align edges and simplify type to streamline
All of this can be summed up as:
         The C.R.A.P. Principle



• Contrast
• Repetition
• Alignment
• Proximity
The C.R.A.P. Principle
Contrast:
Major sections differentiated by color
The C.R.A.P. Principle

Repetition:

Repeating design
elements down a page
reinforces their meaning
The C.R.A.P. Principle
Alignment:
Vertical and Horizontal
The C.R.A.P. Principle


Proximity:
Related elements closely grouped
Trapped white space
Trapped white space
Comfortable white space
Navigation
User doesn’t need the whole subway map
Simplify
Where Am I?
 Front
Where Am I?
 Front
Where Am I?
 Section
Where Am I?
 Front
Where Am I?
 Front
Where Am I?
 Section
Where Am I?
  Blog
Typography
Serif
Serif
Serif
Serif
Sans-Serif
Sans-Serif
 Sans-Serif
Sans-Serif
Serif              Sans
More readable      More scannable
- body text        - headlines / signage

Very small print   Sma...
Serif
Sans-Serif
Mixed
Common Web Fonts
 Constraint: Fonts commonly installed
        on users’ computers
Type Hierarchy
•   Contrast made for a
    reason

•   Signal another level of
    information

•   Similar ‘levels’ or ki...
Keep it Simple

•   Will focus the reader’s
    attention on other visual
    elements of your page

•   Will help the rea...
Designing Copy
Designing Copy
Write half as
much as you
want. Then cut
that in half.
Designing Copy
Write half as
much as you
want. Then cut
that in half.
Embedded Multimedia
Embedded Multimedia
Embedded in Site

Standard Site Nav
and Branding

Best Use of Tools
Embedded Multimedia
Embedded in Site

Standard Site Nav
and Branding

Best Use of Tools
Embedded Multimedia
                     HTML/CSS
Embedded in Story

Standard Site Nav
and Branding

Best Use of Tools

  ...
Embedded Multimedia
                    HTML/CSS
Embedded in Story

Standard Site Nav
and Branding

Best Use of Tools

   ...
Inline Multimedia
Inline Multimedia
Embedded in Story

Standard Site Nav
and Branding

Quick Context
Inline Multimedia
Embedded in Story

Standard Site Nav
and Branding

Quick Context
Inline Multimedia
Embedded in Story

Standard Site Nav
and Branding

Quick Context
Story Design
Story Design
Contrasting Type

Narrow Columns

Related Content

Embedded Media
Story Design
Contrasting Type

Narrow Columns

Related Content

Embedded Media
Story Design
Contrasting Type

Narrow Columns

Related Content

Embedded Media
Story Design
Contrasting Type

Narrow Columns

Related Content

Embedded Media     2/5   3/5
Story Design
                               3/5   2/5
Contrasting Type

Narrow Columns

Related Content

Embedded Media   ...
Story Design
Contrasting Type

Narrow Columns

Related Content

Embedded Media
Story Design
Contrasting Type

Narrow Columns

Related Content

Inline Media
Tools
Crazyegg.com - like heatmap, but for clicks
Convert PSD designs to HTML


• Do it by hand (requires skills worth having)
• Use a service such as PSD2HTML (human)
• Us...
When to use Flash
      - Upsides -
• Advanced interactivity not possible with
  other technologies
• Wide compatibility -...
When to use Flash
     - Downsides -
• The web is all about text
• Flash is proprietary - not W3C standard
• Flash is a bi...
Vocabulary
• Know your way around the environment -
  spend some time at Web Industry Jargon
• bit.ly/web-jargon
• Bounce ...
Web Design Resources

• So many out there, but here are a couple:
• Web Design References bit.ly/designreferences
• Awesom...
User
           Testing



Browser
 Testing
Firefox 3.5
MSIE 5.5
User Testing
• Formal or informal
• Hire a firm, or just sit with family members
  and have them attempt various tasks such...
Browser Testing
• Test on both Windows and Mac
• Test on multiple browsers
• Test at several resolutions
• Know your audie...
• Browsers:
  Internet Explorer, FireFox, Safari, Chrome

• Platforms:
  Windows, Mac OS, Linux

• Screen Resolutions:
  8...
Does My Site Suck?
                     bit.ly/site-suck

•   Our pages take more than four
    seconds to load

•   It ta...
Does My Site Suck?
                         bit.ly/site-suck

•   Our site uses pop-up windows

•   We don't analyze our l...
Upcoming SlideShare
Loading in...5
×

Design concepts

4,471
-1

Published on

This presentation is an overview of general web design principles for journalists, including best practices in layout, typography, color selection, and more.

Published in: Technology, Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,471
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide


  • Balancing act b/w info overload and simplicity. Everyone wants a piece of the homepage action. Every design decision is weighed against business needs.
  • Everyone wants their stuff on the homepage. You have to represent the whole pub, but simplicity has to win.

  • Yahoo couldn’t help but cram every part of their business onto the homepage. Google resisted valiantly.

  • People don’t read pages, they scan.
    Everyone’s in a hurry. People don’t need to read everything. We’re good at scanning
    Looks around feverishly for anything that is:
    A) Vaguely interesting ... B) Clickable
    Finds a halfway-decent match, and click If it doesn’t pan out, clicks the Back button and tries again
  • ... and how do we know they do this?



  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.


  • Users initially look at the top left and upper portion of the page before moving down and to the right.
    A headline has less than a second of a site visitor's attention. ... White space is good.
    Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    Lists hold reader attention longer. Bigger images get more attention.
    Ideal line length for human eye/best comprehension is around 420px
    Navigation tools work better when placed at the top of the page.

























  • De Vinci’s “Man Inscribed In A Circle”


  • The Birth of Venus (Botticelli)























  • Mondrian’s Composition with Red, Yellow and Blue


  • What’s with this?

  • Elements should have some visual connection to another element on the page/screen.
    Major elements - align edges to one another
  • Elements should have some visual connection to another element on the page/screen.
    Major elements - align edges to one another
  • Elements should have some visual connection to another element on the page/screen.
    Major elements - align edges to one another












  • Leave some breathing room, but watch for uncomfortably open spaces
  • White space used judiciously can be comfortable.
    Don’t over-use centering


  • Subway stop in Coimbra, Portugal
    Where am I? How did I get here? Be direct ... Simplify and streamline
    Be consistent!



















  • Never use bold, italic, cap, small caps, or script on large amounts of body text.
    Tiny fonts drive people nuts. Simplify ... Be consistent!
  • Don’t over-do it with font changes
    Small type encourages reading, while larger type promotes lighter scanning. -Eyetrack
    Links should be obvious
    Differentiate visited and unvisited links



























  • I can’t see numbers in these images.
    We stop “seeing” our own sites. We assume others have the same browsers, OSes, bandwidth we do.
    We become color blind.







  • Design concepts

    1. 1. Web Design Principles Scot Hacker, Josh Williams
    2. 2. Web Design Principles • Multimedia packages • News sites • Story components • Redesigns • Blogs • Print
    3. 3. Simplify “Don’t Make Me Think” != “Dumb it down”
    4. 4. How Not To Do It
    5. 5. Simplicity FTW
    6. 6. “Don’t Make Me Think” Steve Krug • Usage should be obvious, self-explanatory • Remove the ????s • Is this clickable? • Is this the navigation? • Where the @#$&* is that which I seek?
    7. 7. What we design for We think user will: • Read • Read • Read • Pause for reflection • Click carefully chosen link
    8. 8. What users actually do
    9. 9. Eyetrack eyetrack.poynter.org What are people really looking at?
    10. 10. Eyetrack
    11. 11. What does this kind of information architecture do to someone’s brain?
    12. 12. Actionable Lessons from Eyetracking Studies bit.ly/actionable-eyetrack Users initially look at the top left and upper portion of the page before moving down and to the right.
    13. 13. A headline has less than a second of a site visitor’s attention. White space is good.
    14. 14. Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
    15. 15. Lists hold reader attention longer.
    16. 16. Lists hold reader attention longer.
    17. 17. Ideal line length for human eye/best comprehension is around 420px. 740 px 440 px
    18. 18. Bigger images get more attention.
    19. 19. Navigation tools work better at the top of the page. Search: Definitely at top, best top-right.
    20. 20. But rules are made to be broken.
    21. 21. Actionable Lessons from Eyetracking Studies bit.ly/eyetrack-actionable
    22. 22. The Basics • Concept • Color • Dimensions
    23. 23. Concept - Wireframes • Similar to storyboarding • Define the basic architecture • What’s most important?
    24. 24. HOME PAGE NAVIGATION CANDIDATES/ FINANCING MESSAGING LOGO TRANSPARENT POLITICS, A DISTRICT ISSUES LINK TO FINANCING LINK TO MESSAGING LINK TO HOMEPAGE CITIZEN MEDIA PROJECT LINK TO LINK TO C/I PAGE PAGE PAGE DISTRICT PAGE CANDIDATE CANDIDATE BLOG UPDATES POMBO IMAGE MCNERNY LINK TO BLOG LATEST POSTS, SELECTED BY LINK TO C/I PAGE IMAGE ADMINISTRATOR MAP LINK TO C/I PAGE LINK TO DISTRICT PAGE HEADLINE LINK TO POSTING VIDEO STILL IMAGE LINK TO VIDEO LINK TO CLIP IMAGE MEDIA UPDATES ROTATING IMAGES, VIDEO STILLS VIDEO OUTSIDE NEWS FEEDS IMAGE STILL ROTATING HEADLINES LINK TO LINK TO IMAGE VIDEO CLIP FOOTER LINK TO ABOUT PAGE * LINK TO CITMEDIA PAGE * LINK TO SUGGESTIONS EMAIL FORM * LINK TO CONTACT US EMAIL FORM
    25. 25. Wireframes • Should NOT look pretty • NO thought to color, graphics, fonts • Visio, OmniGraffle, Illustrator, index cards
    26. 26. Working with Color • Palettes should be comfortable • Use high contrast for text, but avoid highest contrast • White text on black OK for large elements, but fatiguing for longer passages
    27. 27. CSS Drive Palettes cssdrive.com/imagepalette
    28. 28. Colorblender colorblender.com
    29. 29. Adobe’s Kuler
    30. 30. Mondrianum Integrates palettes from Kuler into the OS X color picker
    31. 31. The color wheel - get to know complements, triads, value, saturation, etc. bit.ly/color-schemes
    32. 32. Dimensions/Resolution • How wide should my design be? • As of July 2006, 77% of users have 1024 or higher • Current standard is 1024 pixels wide • Avoid horizontal scrolling!
    33. 33. NEW WIDTH=970
    34. 34. Know Your Audience - Browser Resolutions Text
    35. 35. Know Your Audience - Browser Resolutions Text
    36. 36. Web Developer’s Extension for Firefox
    37. 37. Don’t Forget Mobile • Smartphone marketshare keeps rising • Smartphone browsers keep getting better • If your site’s content and form is properly separated, building stylesheets for mobile isn’t hard
    38. 38. Just because newer phones have better browsers doesn’t mean users wouldn’t still prefer a mobile stylesheet.
    39. 39. Same blog page on iPhone with and without WPTouch theme installed
    40. 40. Proportion/ Layout
    41. 41. The Golden Section
    42. 42. The Golden Section
    43. 43. The Golden Section
    44. 44. The Golden Section
    45. 45. The Golden Section
    46. 46. Human Proportions
    47. 47. Human Proportions
    48. 48. “The Divine Proportion”
    49. 49. “The Divine Proportion”
    50. 50. The Golden Rectangle and Web Design
    51. 51. The Golden Rectangle and Web Design
    52. 52. The Golden Rectangle and Web Design
    53. 53. The Golden Rectangle and Web Design
    54. 54. The Golden Rectangle and Web Design
    55. 55. The Golden Rectangle and Web Design
    56. 56. The Golden Rectangle and Web Design
    57. 57. Creating the Golden Section 1” 1”
    58. 58. Creating the Golden Section 1” x 1.618 1”
    59. 59. Creating the Golden Section 1.618” 1” 3/5 2/5
    60. 60. Nesting the Golden Section
    61. 61. Nesting the Golden Section
    62. 62. Nesting the Golden Section
    63. 63. Nesting the Golden Section
    64. 64. Nesting the Golden Section
    65. 65. Fibonacci in ferns, chambered nautilus
    66. 66. Chambered Nautilus Spiral
    67. 67. Chambered Nautilus Spiral
    68. 68. The Golden Section 3/5 2/5
    69. 69. The Golden Section 2/5 3/5 3/5 2/5
    70. 70. Alignment & Spacing • Major elements - align edges to one another • Leave some breathing room, but watch for uncomfortably open spaces • Elements should have some visual connection to another element on the page/screen • Don’t over-use centering
    71. 71. There’s a difference between breathing room and giant gaps
    72. 72. Align elements horizontally
    73. 73. Align elements horizontally
    74. 74. ... and vertically
    75. 75. ... and vertically
    76. 76. Equal spaces between elements
    77. 77. Equal spaces between elements
    78. 78. An alignment (and typography) mess
    79. 79. Align edges and simplify type to streamline
    80. 80. Align edges and simplify type to streamline
    81. 81. Align edges and simplify type to streamline
    82. 82. All of this can be summed up as: The C.R.A.P. Principle • Contrast • Repetition • Alignment • Proximity
    83. 83. The C.R.A.P. Principle Contrast: Major sections differentiated by color
    84. 84. The C.R.A.P. Principle Repetition: Repeating design elements down a page reinforces their meaning
    85. 85. The C.R.A.P. Principle Alignment: Vertical and Horizontal
    86. 86. The C.R.A.P. Principle Proximity: Related elements closely grouped
    87. 87. Trapped white space
    88. 88. Trapped white space
    89. 89. Comfortable white space
    90. 90. Navigation
    91. 91. User doesn’t need the whole subway map
    92. 92. Simplify
    93. 93. Where Am I? Front
    94. 94. Where Am I? Front
    95. 95. Where Am I? Section
    96. 96. Where Am I? Front
    97. 97. Where Am I? Front
    98. 98. Where Am I? Section
    99. 99. Where Am I? Blog
    100. 100. Typography
    101. 101. Serif Serif Serif
    102. 102. Serif
    103. 103. Sans-Serif Sans-Serif Sans-Serif
    104. 104. Sans-Serif
    105. 105. Serif Sans More readable More scannable - body text - headlines / signage Very small print Small print easier to hard to read read Traditional Modern
    106. 106. Serif
    107. 107. Sans-Serif
    108. 108. Mixed
    109. 109. Common Web Fonts Constraint: Fonts commonly installed on users’ computers
    110. 110. Type Hierarchy • Contrast made for a reason • Signal another level of information • Similar ‘levels’ or kinds of information should receive the same type treatment
    111. 111. Keep it Simple • Will focus the reader’s attention on other visual elements of your page • Will help the reader process your page
    112. 112. Designing Copy
    113. 113. Designing Copy Write half as much as you want. Then cut that in half.
    114. 114. Designing Copy Write half as much as you want. Then cut that in half.
    115. 115. Embedded Multimedia
    116. 116. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
    117. 117. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
    118. 118. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
    119. 119. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
    120. 120. Inline Multimedia
    121. 121. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
    122. 122. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
    123. 123. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
    124. 124. Story Design
    125. 125. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
    126. 126. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
    127. 127. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
    128. 128. Story Design Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
    129. 129. Story Design 3/5 2/5 Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
    130. 130. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
    131. 131. Story Design Contrasting Type Narrow Columns Related Content Inline Media
    132. 132. Tools
    133. 133. Crazyegg.com - like heatmap, but for clicks
    134. 134. Convert PSD designs to HTML • Do it by hand (requires skills worth having) • Use a service such as PSD2HTML (human) • Use software such as SiteGrinder (auto)
    135. 135. When to use Flash - Upsides - • Advanced interactivity not possible with other technologies • Wide compatibility - 95% of users have a recent Flash player installed. • Ability to customize interfaces goes beyond what HTML can do.
    136. 136. When to use Flash - Downsides - • The web is all about text • Flash is proprietary - not W3C standard • Flash is a binary blob - search engines can now index Flash content, but not well. • Accessibility challenges • Much harder to update content • Flash should NOT be used to “jazz up” a page
    137. 137. Vocabulary • Know your way around the environment - spend some time at Web Industry Jargon • bit.ly/web-jargon • Bounce Rate, Cache, CMS, Framework, Dither, Doctype, DOM, Element, XML, HTTPS, IFRAME, Markup, Permalink, Selector.....
    138. 138. Web Design Resources • So many out there, but here are a couple: • Web Design References bit.ly/designreferences • Awesome collection of tools bit.ly/designtools1 • Smashing Mag: smashingmagazine.com • And of course kdmc.berkeley.edu
    139. 139. User Testing Browser Testing
    140. 140. Firefox 3.5
    141. 141. MSIE 5.5
    142. 142. User Testing • Formal or informal • Hire a firm, or just sit with family members and have them attempt various tasks such as “Find the political opinion page” or “Register with the site and leave a comment on an article.” • Videotape, blind mirrors • Morae software techsmith.com/morae
    143. 143. Browser Testing • Test on both Windows and Mac • Test on multiple browsers • Test at several resolutions • Know your audience (if possible) • Which plugins do they have installed? • Do they have broadband?
    144. 144. • Browsers: Internet Explorer, FireFox, Safari, Chrome • Platforms: Windows, Mac OS, Linux • Screen Resolutions: 800x600, 1024x768, 1152x768
    145. 145. Does My Site Suck? bit.ly/site-suck • Our pages take more than four seconds to load • It takes longer than four seconds for the man from Mars to understand what our site is about. • Our site makes visitors register before they can enter. • I don't know if our site looks the same in the major browsers.
    146. 146. Does My Site Suck? bit.ly/site-suck • Our site uses pop-up windows • We don't analyze our log files. • We never conduct user testing. • Our site uses scrolling, blinking, fading, or moving text. • Our site has lots of dead links. • Lots more at URL above.

    ×