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.

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

1,015 views

Published on

To craft well-designed websites, you have to know 50 names for “blue” and the difference between a font and a typeface. You probably have a degree in illustration or graphic design, or maybe you attended some hip code school in Oakland and call yourself a User Experience Architect.

Right?

Nope! In fact, there are numerous small, simple and practical ways to vastly improve the look and usability of a website, no matter how creative you are(n’t). In this talk, we’ll explore ten of them together, and see how the impact as a whole for both clients and users is greater than the sum of its parts. Make your websites more attractive, easier to use and better designed without feeling like you’re wasting your time or effort.

Published in: Design

How to Make Your Website Not Ugly: 10 Simple UX Tenets for Non-Designers

  1. 1. How to Make Your Website Not Ugly 10 Simple UX Tenets for Non- Designers Hilary Stohs-Krause Ten Forward Consulting in Madison, WI Twitter: @hilarysk
  2. 2. About me Former journalist (including newspaper designer) Full-stack developer in Madison at Ten Forward Consulting, Inc. Primarily work with startups, often not a big budget for design @hilarysk
  3. 3. We’ve got a lot to cover. @hilarysk
  4. 4. WORDS: make speech visible, No. 1 to 4 Breathing room, legible, scannable, simple IMAGES: use appropriately, No. 5 & 6 DESIGN: think logically, No. 7 to 10 Icons sparingly, photos and graphics integrated Patterns, progressive disclosure, consistency, functionality @hilarysk
  5. 5. @hilarysk
  6. 6. You know more than you think you do. @hilarysk
  7. 7. Why design matters Usability Credibility Interest @hilarysk
  8. 8. If usability engineers designed a nightclub, it would be clean, quiet, brightly lit, with lots of places to sit down, plenty of bartenders, menus written in 18-point sans-serif, and easy-to-find bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other.” - Joel Spolsky, founder of Trello “ @hilarysk
  9. 9. No. 1 to 4
  10. 10. WORDS: make speech visual @hilarysk
  11. 11. WORDS: make speech visual 1. Let your text breathe. Text-box width: 400 to 800 pixels, or 60 to 100 characters per line Line-height: At Ten Forward Consulting, our standard is 1.4. Padding between text-boxes: At least 15px in any direction. @hilarysk
  12. 12. @hilarysk WORDS: make speech visual 1. Let your text breathe.
  13. 13. @hilarysk WORDS: make speech visual 1. Let your text breathe.
  14. 14. WORDS: make speech visual Contrast: Don’t put yellow text on a white background Size: Minimum 16px (depending on font) 2. Make your text legible. @hilarysk
  15. 15. WORDS: make speech visual 2. Make your text legible. @hilarysk
  16. 16. WORDS: make speech visual 2. Make your text legible. @hilarysk
  17. 17. WORDS: make speech visual Highlight key content Subheads, with lowercase and uppercase letters Bulleted lists 3. Make your text scannable. @hilarysk
  18. 18. WORDS: make speech visual 3. Make your text scannable. @hilarysk
  19. 19. WORDS: make speech visual 3. Make your text scannable. @hilarysk
  20. 20. WORDS: make speech visual Limit number of typefaces/fonts (2 or 3) Limit colors (3 to 5, including grays) Use more complex fonts for headers, more basic sans-serif for text 4. Keep the decoration to a minimum. @hilarysk
  21. 21. WORDS: make speech visual 4. Keep the decoration to a minimum. @hilarysk
  22. 22. WORDS: make speech visual 4. Keep the decoration to a minimum. @hilarysk
  23. 23. Let’s recap. @hilarysk
  24. 24. WORDS: make speech visible Breathing room, legible, scannable, simple @hilarysk
  25. 25. No. 5 & 6
  26. 26. IMAGES: use appropriately @hilarysk
  27. 27. IMAGES: use appropriately 99% of the time, should be accompanied by a label Work best in navigation or menu (like a list of characteristics) Avoid icons with conflicting meanings 5. Icons @hilarysk
  28. 28. IMAGES: use appropriately 5. Icons @hilarysk via https://bold.pixelapse.com/
  29. 29. IMAGES: use appropriately Banner blindness Integrate with content Be informative and/or relevant 6. Photos and graphics @hilarysk
  30. 30. IMAGES: use appropriately 6. Photos and graphics @hilarysk
  31. 31. IMAGES: use appropriately 6. Photos and graphics @hilarysk
  32. 32. Let’s recap again. @hilarysk
  33. 33. WORDS: make speech visible Breathing room, legible, scannable, simple IMAGES: use appropriately Icons sparingly, photos and graphics integrated @hilarysk
  34. 34. No. 7 to 10
  35. 35. DESIGN: think logically @hilarysk
  36. 36. DESIGN: think logically Alternate between small, medium and wide Quality trumps originality (in most cases) Find something that works, and use it as a model 7. Use patterns @hilarysk
  37. 37. DESIGN: think logically 7. Use patterns @hilarysk
  38. 38. DESIGN: think logically 7. Use patterns @hilarysk
  39. 39. DESIGN: think logically F-shape reading pattern Top to bottom = important to less important Above the fold Avoid putting key content in traditional ad areas 8. Progressive disclosure @hilarysk
  40. 40. DESIGN: think logically 8. Progressive disclosure @hilarysk
  41. 41. DESIGN: think logically 8. Progressive disclosure @hilarysk
  42. 42. DESIGN: think logically Links, buttons Alert messages Forms Tables 9. Be consistent @hilarysk
  43. 43. DESIGN: think logically 9. Be consistent @hilarysk
  44. 44. DESIGN: think logically It doesn’t matter if it looks good and is easy to use if it doesn’t work. Back-end impacts front-end 10. Functionality is part of design @hilarysk
  45. 45. DESIGN: think logically 10. Functionality is part of design @hilarysk Design is where science and art break even.” - Robin Mathew, design entrepreneur “
  46. 46. Final recap. @hilarysk
  47. 47. WORDS: make speech visible Breathing room, legible, scannable, simple IMAGES: use appropriately DESIGN: think logically Icons sparingly, photos and graphics integrated Patterns, progressive disclosure, consistency, functionality @hilarysk
  48. 48. Resources @hilarysk
  49. 49. Resources @hilarysk General UX Myths Nielsen Norman Group Additional What’s the perfect width for your online content? How do people evaluate a website’s credibility? Readability: the Optimal Line Length Making Your Icons User-Friendly: A Guide to Usability in UI Design Share: The Icon No One Agrees On 8 Guidelines For Better Readability On The Web Color Contrast Checker
  50. 50. Thanks! @hilarysk

×