Design concepts
•
13 recomendaciones•2,067 vistas
This document provides guidance on key web design principles such as: - Using simplicity, clarity and focus in design and writing. - Applying design techniques like alignment, proximity and use of white space. - Considering typography, color schemes, layout and use of multimedia. - Testing designs through usability studies and across browsers to ensure quality user experience.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (6)
Similar a Design concepts
Similar a Design concepts (20)
Más de kdmcBerkeley at UC Berkeley
Último
Último (20)
Design concepts
- 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
- 6. What we design for We think user will: • Read • Read • Read • Pause for reflection • Click carefully chosen link
- 7. What users actually do
- 8. Eyetrack eyetrack.poynter.org What are people really looking at?
- 9. Eyetrack
- 10. What does this kind of information architecture do to someone’s brain?
- 11. Actionable Lessons from Eyetracking Studies Users initially look at the top left and upper portion of the page before moving down and to the right.
- 12. A headline has less than a second of a site visitor’s attention. White space is good.
- 13. Shorter paragraphs perform better than long ones. Large blocks of text are avoided.
- 14. Lists hold reader attention longer.
- 15. Ideal line length for human eye/best comprehension is around 420px. 740 px 440 px
- 16. Bigger images get more attention.
- 17. Navigation tools work better at the top of the page. Search: Definitely at top, best top-right.
- 18. But rules are made to be broken.
- 19. Actionable Lessons from Eyetracking Studies bit.ly/eyetrack-actionable
- 20. The Basics • Concept • Color • Dimensions
- 21. Concept - Wireframes • Similar to storyboarding • Define the basic architecture • What’s most important?
- 22. 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
- 23. Wireframes • Should NOT look pretty • NO thought to color, graphics, fonts • Visio, OmniGraffle, Illustrator, index cards
- 24. 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
- 25. CSS Drive Palettes cssdrive.com/imagepalette
- 27. Adobe’s Kuler
- 28. Mondrianum Integrates palettes from Kuler into the OS X color picker
- 29. The color wheel - get to know complements, triads, value, saturation, etc. bit.ly/color-schemes
- 30. Dimensions/Resolution • How wide should my design be? • Current standard is 1024 pixels wide • Avoid horizontal scrolling!
- 31. NEW WIDTH=970
- 32. Know Your Audience - Browser Resolutions Text
- 33. Know Your Audience - Browser Resolutions Text
- 34. Web Developer’s Extension for FF/Chrome
- 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. The Golden Rectangle and Web Design
- 58. Creating the Golden Section 1” 1”
- 59. Creating the Golden Section 1” x 1.618 1”
- 60. Creating the Golden Section 1.618” 1” 3/5 2/5
- 61. Nesting the Golden Section
- 62. Nesting the Golden Section
- 63. Nesting the Golden Section
- 64. Nesting the Golden Section
- 65. Nesting the Golden Section
- 66. Fibonacci in ferns, chambered nautilus
- 67. Chambered Nautilus Spiral
- 68. Chambered Nautilus Spiral
- 69. “New” Twitter
- 70. The Golden Section 3/5 2/5
- 71. The Golden Section 2/5 3/5 3/5 2/5
- 73. 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
- 74. There’s a difference between breathing room and giant gaps
- 85. Equal spaces between elements
- 86. Equal spaces between elements
- 88. Align edges and simplify type to streamline
- 89. Align edges and simplify type to streamline
- 90. Align edges and simplify type to streamline
- 91. All of this can be summed up as: The C.R.A.P. Principle • Contrast • Repetition • Alignment • Proximity
- 92. The C.R.A.P. Principle Contrast: Major sections differentiated by color
- 93. The C.R.A.P. Principle Repetition: Repeating design elements down a page reinforces their meaning
- 94. The C.R.A.P. Principle Alignment: Vertical and Horizontal
- 95. The C.R.A.P. Principle Proximity: Related elements closely grouped
- 99. Navigation
- 100. User doesn’t need the whole subway map
- 101. Simplify
- 102. Typography
- 103. Serif Serif Serif
- 104. Serif
- 106. Sans-Serif
- 107. Serif Sans More readable More scannable - body text - headlines / signage Very small print Small print easier to hard to read read Traditional Modern
- 108. Serif
- 109. Sans-Serif
- 110. Mixed
- 111. Common Web Fonts Constraint: Fonts commonly installed on users’ computers
- 112. Type Hierarchy • Contrast made for a reason • Signal another level of information • Similar ‘levels’ or kinds of information should receive the same type treatment
- 113. Keeping it Simple • Will focus the reader’s attention on other visual elements of your page • Will help the reader process your page
- 116. Designing Copy
- 117. Designing Copy Write half as much as you want. Then cut that in half.
- 118. Designing Copy Write half as much as you want. Then cut that in half.
- 119. Embedded Multimedia
- 120. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
- 121. Embedded Multimedia Embedded in Site Standard Site Nav and Branding Best Use of Tools
- 122. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
- 123. Embedded Multimedia HTML/CSS Embedded in Story Standard Site Nav and Branding Best Use of Tools Flash
- 124. Inline Multimedia
- 125. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
- 126. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
- 127. Inline Multimedia Embedded in Story Standard Site Nav and Branding Quick Context
- 128. Story Design
- 129. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
- 130. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
- 131. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
- 132. Story Design Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
- 133. Story Design 3/5 2/5 Contrasting Type Narrow Columns Related Content Embedded Media 2/5 3/5
- 134. Story Design Contrasting Type Narrow Columns Related Content Embedded Media
- 135. Story Design Contrasting Type Narrow Columns Related Content Inline Media
- 136. Tools
- 137. Crazyegg.com - like heatmap, but for clicks
- 138. 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)
- 139. 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
- 140. User Testing Browser Testing
- 141. Firefox 3.5
- 142. MSIE 5.5
- 143. User Testing • Formal - Hire a firm • Informal - Ask friends to perform tasks • Videotape, blind mirrors • Morae software techsmith.com/morae • loop11.com
- 144. Browser Testing • Test on both Windows and Mac • Test on multiple browsers • Test at several resolutions • Know your audience (if possible) • What screen size do they have? • Do they have broadband?
- 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.
Notas del editor
- 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.