JSConfHawaii 2019: How to make your website not ugly
•
5 likes•1,123 views
VIDEO: https://www.youtube.com/watch?v=F4G2i4eS7x0 If you’re a programmer who has ever found themselves inadvertently (perhaps unwillingly!) straddling the line between design and code, this is the talk for you. Even with zero design training or background, there are numerous small, simple and practical ways you can vastly improve the look and usability of a website. In this talk, we’ll explore 10 of them together, using research and proven solutions to see how the impact as a whole for both clients and users is greater than the sum of its parts.
Recommended
Recommended
More Related Content
More from Hilary Stohs-Krause
More from Hilary Stohs-Krause (9)
Recently uploaded
Recently uploaded (20)
JSConfHawaii 2019: How to make your website not ugly
- 1. How to Make Your Website Not Ugly Basic UX for Programmers Hilary Stohs-Krause Ten Forward Consulting in Madison, WI @hilarysk
- 2. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites About me ● Former journalist (including stint as a newspaper designer) ● Full-stack developer in Madison, WI at Ten Forward Consulting ● Primarily work with startups ● Read the second book of the Stormlight Archive in one day
- 3. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites This is a real website … from 1996.
- 5. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites You know more than you think you do.
- 6. Why design matters ● Usability ● Credibility2 ● Interest3,4
- 8. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DISCLAIMER: (Because of course.) There are always exceptions.
- 9. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites We have a lot to cover. http://tinyurl.com/hawaii-no-ugly-sites
- 10. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites 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
- 11. 1 to 4
- 12. WORDS: make speech visual
- 13. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visual 1. Let your text breathe. ● Length: 60 to 100 characters per line5 ● Line-height: 1.4 ● Padding: At least 15px
- 16. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visual ● Contrast: Don’t put yellow text on a white background6 ● Size: Minimum 16px (depending on typeface) 2. Make your text legible.
- 19. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visual ● Highlight key content ● Subheads, with lowercase and uppercase letters7 ● Bulleted lists 3. Make your text scannable.
- 22. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visual ● Limit number of typefaces (2 or 3) ● Limit colors (two to three, not including shades) ● Use more complex fonts for headers, more basic for text 4. Keep the decoration to a minimum.
- 26. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visible Breathing room, legible, scannable, simple
- 27. 5 to 6
- 29. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites IMAGES: use appropriately ● Labels: The rule, NOT the exception8 ● Work best in navigation or menu ● Avoid icons with conflicting meanings 5. Icons
- 30. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites Think fast: What’s the icon for “share”?
- 32. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites IMAGES: use appropriately ● Banner blindness ● Integrate with content ● Informative and/or relevant 6. Photos and graphics
- 36. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites WORDS: make speech visible Breathing room, legible, scannable, simple IMAGES: use appropriately Icons sparingly, photos and graphics integrated
- 37. 7 to 10
- 39. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DESIGN: think logically ● Alternate between small, medium and wide ● Quality > originality (in most cases) ● Find something that works, and use it as a model 7. Use patterns
- 42. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DESIGN: think logically ● F-shape reading pattern 8. Progressive disclosure
- 44. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DESIGN: think logically ● F-shape reading pattern10 8. Progressive disclosure ● Top to bottom = important to less important ● Above the fold11 ● Avoid putting key content in traditional ad areas
- 46. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DESIGN: think logically ● Links, buttons ● Alert messages ● Forms 9. Be consistent ● Tables ● Header typefaces / sizes
- 48. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites DESIGN: think logically ● Bugs trump beauty ● Back-end impacts front-end 10. Functionality is part of design
- 49. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites Design is where science and art break even. - Robin Mathew, design entrepreneur “
- 51. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites 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
- 53. @hilaryskhttp://tinyurl.com/hawaii-no-ugly-sites Additional information Citations 1. http://www.epolitics.com/2014/06/05/screenshots-political-website-really-looked-like-1994/ 2. https://simson.net/ref/2002/stanfordPTL.pdf 3. https://www.tandfonline.com/doi/abs/10.1080/01449290500330448 4. https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ 5. https://www.usability.gov/get-involved/blog/2006/08/line-length-and-onscreen-reading.html 6. http://webaim.org/resources/contrastchecker/ 7. https://www.blog.theteamw.com/2009/12/23/100-things-you-should-know-about-people-19-its-a-myth-that-all-capital-letters- are-inherently-harder-to-read/ 8. https://www.usertesting.com/blog/user-friendly-ui-icons/ 9. https://www.fastcompany.com/3031872/why-isnt-there-a-standard-share-button 10. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ 11. https://resources.infolinks.com/static/eyetracking-whitepaper.pdf