Uploaded bykdmcBerkeley at UC Berkeley
Design concepts
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.
More Related Content
![Community Sector Provincial Forum - St. John's [2010-10-01]](https://cdn.slidesharecdn.com/ss_thumbnails/communitysectorprovincialforum-st-johns-2010-10-01-101001144925-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Directions - Council for Vocational Services Society - Halifax [2010-10-07]](https://cdn.slidesharecdn.com/ss_thumbnails/directions-councilforvocationalservicessociety-halifax2010-10-07-101007084802-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Design concepts
- 1.
- 2. Web Design Principles • Multimedia packages • News sites • Story components • Redesigns • Blogs • Print
- 3. Simplify “Don’t Make MeThink” != “Dumb it down”
- 4. How Not ToDo It
- 5.
- 6. What we designfor We think user will: • Read • Read • Read • Pause for reflection • Click carefully chosen link
- 7.
- 8. Eyetrack eyetrack.poynter.org What are people really looking at?
- 9.
- 10. What does this kindof 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 hasless than a second of a site visitor’s attention. White space is good.
- 13. Shorter paragraphs performbetter than long ones. Large blocks of text are avoided.
- 14. Lists hold readerattention longer.
- 15. Ideal line lengthfor human eye/best comprehension is around 420px. 740 px 440 px
- 16. Bigger images get more attention.
- 17. Navigation tools workbetter 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 NOTlook 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
- 26.
- 27.
- 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.
- 32. Know Your Audience- Browser Resolutions Text
- 33. Know Your Audience- Browser Resolutions Text
- 34. Web Developer’s Extensionfor FF/Chrome
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 51. The Golden Rectangleand Web Design
- 52. The Golden Rectangleand Web Design
- 53. The Golden Rectangleand Web Design
- 54. The Golden Rectangleand Web Design
- 55. The Golden Rectangleand Web Design
- 56. The Golden Rectangleand Web Design
- 57. The Golden Rectangleand Web Design
- 58. Creating the GoldenSection 1” 1”
- 59. Creating the GoldenSection 1” x 1.618 1”
- 60. Creating the GoldenSection 1.618” 1” 3/5 2/5
- 61. Nesting the GoldenSection
- 62. Nesting the GoldenSection
- 63. Nesting the GoldenSection
- 64. Nesting the GoldenSection
- 65. Nesting the GoldenSection
- 66. Fibonacci in ferns, chamberednautilus
- 67. Chambered Nautilus Spiral
- 68. Chambered Nautilus Spiral
- 69.
- 70.
- 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 roomand giant gaps
- 81.
- 82.
- 83.
- 84.
- 85. Equal spaces betweenelements
- 86. Equal spaces betweenelements
- 87.
- 88. Align edges andsimplify type to streamline
- 89. Align edges andsimplify type to streamline
- 90. Align edges andsimplify type to streamline
- 91. All of thiscan be summed up as: The C.R.A.P. Principle • Contrast • Repetition • Alignment • Proximity
- 92. The C.R.A.P. Principle Contrast: Majorsections differentiated by color
- 93. The C.R.A.P. Principle Repetition: Repeatingdesign elements down a page reinforces their meaning
- 94. The C.R.A.P. Principle Alignment: Verticaland Horizontal
- 95. The C.R.A.P. Principle Proximity: Relatedelements closely grouped
- 96.
- 97.
- 98.
- 99.
- 100. User doesn’t needthe whole subway map
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 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.
- 109.
- 110.
- 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.
- 117. Designing Copy Write halfas much as you want. Then cut that in half.
- 118. Designing Copy Write halfas much as you want. Then cut that in half.
- 119.
- 120. Embedded Multimedia Embedded inSite Standard Site Nav and Branding Best Use of Tools
- 121. Embedded Multimedia Embedded inSite 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.
- 125. Inline Multimedia Embedded inStory Standard Site Nav and Branding Quick Context
- 126. Inline Multimedia Embedded inStory Standard Site Nav and Branding Quick Context
- 127. Inline Multimedia Embedded inStory Standard Site Nav and Branding Quick Context
- 128.
- 129. Story Design Contrasting Type NarrowColumns Related Content Embedded Media
- 130. Story Design Contrasting Type NarrowColumns Related Content Embedded Media
- 131. Story Design Contrasting Type NarrowColumns Related Content Embedded Media
- 132. Story Design Contrasting Type NarrowColumns 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 NarrowColumns Related Content Embedded Media
- 135. Story Design Contrasting Type NarrowColumns Related Content Inline Media
- 136.
- 137. Crazyegg.com - likeheatmap, but for clicks
- 138. Convert PSD designsto 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.
- 142.
- 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 • Teston 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 SiteSuck? 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 SiteSuck? 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.
Editor's Notes
- #4 Balancing act b/w info overload and simplicity. Everyone wants a piece of the homepage action. Every design decision is weighed against business needs.
- #5 Everyone wants their stuff on the homepage. You have to represent the whole pub, but simplicity has to win.
- #6 Yahoo couldn’t help but cram every part of their business onto the homepage. Google resisted valiantly.
- #8 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
- #9 ... and how do we know they do this?
- #13 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.
- #14 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.
- #15 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.
- #16 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.
- #17 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.
- #18 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.
- #19 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.
- #20 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.
- #21 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.
- #22 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.
- #46 De Vinci’s “Man Inscribed In A Circle”
- #47 The Birth of Venus (Botticelli)
- #71 Mondrian’s Composition with Red, Yellow and Blue
- #73 What’s with this?
- #74 Elements should have some visual connection to another element on the page/screen. Major elements - align edges to one another
- #75 Elements should have some visual connection to another element on the page/screen. Major elements - align edges to one another
- #76 Elements should have some visual connection to another element on the page/screen. Major elements - align edges to one another
- #89 Leave some breathing room, but watch for uncomfortably open spaces
- #90 White space used judiciously can be comfortable. Don’t over-use centering
- #93 Subway stop in Coimbra, Portugal Where am I? How did I get here? Be direct ... Simplify and streamline Be consistent!
- #113 Never use bold, italic, cap, small caps, or script on large amounts of body text. Tiny fonts drive people nuts. Simplify ... Be consistent!
- #114 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
- #142 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.