Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,198
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.







Transcript

  • 1. Web Design Principles Scot Hacker, Josh Williams
  • 2. Web Design Principles • Multimedia packages • News sites • Story components • Redesigns • Blogs • Print
  • 3. Simplify “Don’t Make Me Think” != “Dumb it down”
  • 4. How Not To Do It
  • 5. Simplicity FTW
  • 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. What we design for We think user will: • Read • Read • Read • Pause for reflection • Click carefully chosen link
  • 8. What users actually do
  • 9. Eyetrack eyetrack.poynter.org What are people really looking at?
  • 10. Eyetrack
  • 11. What does this kind of information architecture do to someone’s brain?
  • 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. A headline has less than a second of a site visitor’s attention. White space is good.
  • 14. Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
  • 15. Lists hold reader attention longer.
  • 16. Lists hold reader attention longer.
  • 17. Ideal line length for human eye/best comprehension is around 420px. 740 px 440 px
  • 18. Bigger images get more attention.
  • 19. Navigation tools work better at the top of the page. Search: Definitely at top, best top-right.
  • 20. But rules are made to be broken.
  • 21. Actionable Lessons from Eyetracking Studies bit.ly/eyetrack-actionable
  • 22. The Basics • Concept • Color • Dimensions
  • 23. Concept - Wireframes • Similar to storyboarding • Define the basic architecture • What’s most important?
  • 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. Wireframes • Should NOT look pretty • NO thought to color, graphics, fonts • Visio, OmniGraffle, Illustrator, index cards
  • 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. CSS Drive Palettes cssdrive.com/imagepalette
  • 28. Colorblender colorblender.com
  • 29. Adobe’s Kuler
  • 30. Mondrianum Integrates palettes from Kuler into the OS X color picker
  • 31. The color wheel - get to know complements, triads, value, saturation, etc. bit.ly/color-schemes
  • 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. NEW WIDTH=970
  • 34. Know Your Audience - Browser Resolutions Text
  • 35. Know Your Audience - Browser Resolutions Text
  • 36. Web Developer’s Extension for Firefox
  • 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. Just because newer phones have better browsers doesn’t mean users wouldn’t still prefer a mobile stylesheet.
  • 39. Same blog page on iPhone with and without WPTouch theme installed
  • 40. Proportion/ Layout
  • 41. The Golden Section
  • 42. The Golden Section
  • 43. The Golden Section
  • 44. The Golden Section
  • 45. The Golden Section
  • 46. Human Proportions
  • 47. Human Proportions
  • 48. “The Divine Proportion”
  • 49. “The Divine Proportion”
  • 50. The Golden Rectangle and Web Design
  • 51. The Golden Rectangle and Web Design
  • 52. The Golden Rectangle and Web Design
  • 53. The Golden Rectangle and Web Design
  • 54. The Golden Rectangle and Web Design
  • 55. The Golden Rectangle and Web Design
  • 56. The Golden Rectangle and Web Design
  • 57. Creating the Golden Section 1” 1”
  • 58. Creating the Golden Section 1” x 1.618 1”
  • 59. Creating the Golden Section 1.618” 1” 3/5 2/5
  • 60. Nesting the Golden Section
  • 61. Nesting the Golden Section
  • 62. Nesting the Golden Section
  • 63. Nesting the Golden Section
  • 64. Nesting the Golden Section
  • 65. Fibonacci in ferns, chambered nautilus
  • 66. Chambered Nautilus Spiral
  • 67. Chambered Nautilus Spiral
  • 68. The Golden Section 3/5 2/5
  • 69. The Golden Section 2/5 3/5 3/5 2/5
  • 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. There’s a difference between breathing room and giant gaps
  • 72. Align elements horizontally
  • 73. Align elements horizontally
  • 74. ... and vertically
  • 75. ... and vertically
  • 76. Equal spaces between elements
  • 77. Equal spaces between elements
  • 78. An alignment (and typography) mess
  • 79. Align edges and simplify type to streamline
  • 80. Align edges and simplify type to streamline
  • 81. Align edges and simplify type to streamline
  • 82. All of this can be summed up as: The C.R.A.P. Principle • Contrast • Repetition • Alignment • Proximity
  • 83. The C.R.A.P. Principle Contrast: Major sections differentiated by color
  • 84. The C.R.A.P. Principle Repetition: Repeating design elements down a page reinforces their meaning
  • 85. The C.R.A.P. Principle Alignment: Vertical and Horizontal
  • 86. The C.R.A.P. Principle Proximity: Related elements closely grouped
  • 87. Trapped white space
  • 88. Trapped white space
  • 89. Comfortable white space
  • 90. Navigation
  • 91. User doesn’t need the whole subway map
  • 92. Simplify
  • 93. Where Am I? Front
  • 94. Where Am I? Front
  • 95. Where Am I? Section
  • 96. Where Am I? Front
  • 97. Where Am I? Front
  • 98. Where Am I? Section
  • 99. Where Am I? Blog
  • 100. Typography
  • 101. Serif Serif Serif
  • 102. Serif
  • 103. Sans-Serif Sans-Serif Sans-Serif
  • 104. Sans-Serif
  • 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. Serif
  • 107. Sans-Serif
  • 108. Mixed
  • 109. Common Web Fonts Constraint: Fonts commonly installed on users’ computers
  • 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. Keep it Simple • Will focus the reader’s attention on other visual elements of your page • Will help the reader process your page
  • 112. Designing Copy
  • 113. Designing Copy Write half as much as you want. Then cut that in half.
  • 114. Designing Copy Write half as much as you want. Then cut that in half.
  • 115. Embedded Multimedia
  • 116. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
  • 117. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
  • 118. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
  • 119. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
  • 120. Inline Multimedia
  • 121. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
  • 122. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
  • 123. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
  • 124. Story Design
  • 125. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
  • 126. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
  • 127. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
  • 128. Story Design Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
  • 129. Story Design 3/5 2/5 Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
  • 130. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
  • 131. Story Design Contrasting Type Narrow Columns Related Content Inline Media
  • 132. Tools
  • 133. Crazyegg.com - like heatmap, but for clicks
  • 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. 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. 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. 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. 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. User Testing Browser Testing
  • 140. Firefox 3.5
  • 141. MSIE 5.5
  • 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. 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. • Browsers: Internet Explorer, FireFox, Safari, Chrome • Platforms: Windows, Mac OS, Linux • Screen Resolutions: 800x600, 1024x768, 1152x768
  • 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. 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.