Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,816 views

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
  • Be the first to comment

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.

×