Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Website and UX Design

Ac19443f8100bfa924c352a78ebb8bb2?s=47 Amy Kvistad
July 22, 2017

Website and UX Design

Updated presentation given at WordCamp Boston, July 2017.


Amy Kvistad

July 22, 2017

More Decks by Amy Kvistad

Other Decks in Design


  1. Website and UX Design – From a Designer's Perspective WordCamp

    Boston| July 2017 @amykvistad | Amy Kvistad
  2. Outline • Overview • Research and discovery • Design and

    development • Deliver and after launch • Designing for performance • Tools of the trade • Implementing in WordPress
  3. VISUAL DESIGN Typography Color Space Texture Imagery

  4. Usability.gov defines visual design as “strategically implementing images, colors, fonts,

    and other elements,” in order to enhance a design or interaction, and engage users.
  5. Example of visual design from usability.gov

  6. USER EXPERIENCE DESIGN User needs User behaviors Site usefulness Ease

    of use Enjoyable
  7. User Experience Honeycomb − Peter Morville User Experience Honeycomb

  8. Web Design Process

  9. Double diamond design process model from the UK Design Council.

  10. DISCOVER insights into the problem Research and discovery Understanding the

    project and audience
  11. Discovering client objectives The process starts with discovering client objectives

    Learn about the website requirements
  12. Discovering the website audience • Discovering the website users •

    Are you reaching the right users?
  13. Content Audit

  14. DEFINE the area to focus upon Information architecture and UX

  15. None
  16. Navigation A key part of information architecture is navigation.

  17. Navigation Guidelines Keep it simple Card sorting Internal page links

  18. Content Strategy The creation, curation, and maintenance of text, images,

    audio, and video.
  19. Deliverables

  20. Deliverables

  21. DEVELOP potential solutions Content development, implementation and review

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. Deliverables Wireframes focus on space allocation and prioritizing of content

    Source: Usability.gov
  29. Deliverables

  30. Case Study

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. DELIVER solutions that work Launch website and performance optimization

  40. None
  41. Designing for Performance

  42. Images are the biggest culprit for bloated web pages. −

    Ethan Marcotte
  43. None
  44. None
  45. None
  46. None
  47. None
  48. Designing for Accessibility

  49. Accessibility for Visual Design − Nick Babich As the W3C

    guidelines state, color shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Designers should use color to highlight or complement what is already visible.
  50. 1. Provide equivalent alternatives to auditory and visual content. 2.

    Don't rely on color alone. 3. Use markup and style sheets and do so properly. 4. Clarify natural language usage 5. Create tables that transform gracefully. 6. Ensure that pages featuring new technologies transform gracefully. 7. Ensure user control of time-sensitive content changes. 8. Ensure direct accessibility of embedded user interfaces. 9. Design for device-independence. 10. Use interim solutions. 11. Use W3C technologies and guidelines. 12. Provide context and orientation information. 13. Provide clear navigation mechanisms. 14. Ensure that documents are clear and simple. W3C Web Accessibility Guidelines
  51. Tools of the Trade

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. Photon is an image acceleration and editing service for sites

    hosted on WordPress.com or on Jetpack-connected WordPress sites. That means less load on your host and faster images for your readers.
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. Implementing in WordPress

  72. Child Theme WordPress customizer

  73. None
  74. None
  75. None
  76. None
  77. Research and discovery Design and development Deliver and after launch

    Designing for performance Tools of the trade Implementing in WordPress
  78. Information Architecture vs Interaction Design – What Are the Differences?

    By Norbert Chong
  79. Thank You! WordCamp Boston| July 2017 @amykvistad | Amy Kvistad