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

Website and UX Design

Amy Kvistad
July 22, 2017

Website and UX Design

Updated presentation given at WordCamp Boston, July 2017.

Amy Kvistad

July 22, 2017
Tweet

More Decks by Amy Kvistad

Other Decks in Design

Transcript

  1. Website and UX Design –
    From a Designer's Perspective
    WordCamp Boston| July 2017
    @amykvistad | Amy Kvistad

    View full-size slide

  2. Outline
    • Overview
    • Research and discovery
    • Design and development
    • Deliver and after launch
    • Designing for performance
    • Tools of the trade
    • Implementing in WordPress

    View full-size slide

  3. VISUAL
    DESIGN
    Typography
    Color
    Space
    Texture
    Imagery

    View full-size slide

  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.

    View full-size slide

  5. Example of visual design from usability.gov

    View full-size slide

  6. USER
    EXPERIENCE
    DESIGN
    User needs
    User behaviors
    Site usefulness
    Ease of use
    Enjoyable

    View full-size slide

  7. User Experience Honeycomb − Peter Morville
    User Experience
    Honeycomb

    View full-size slide

  8. Web Design Process

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Discovering client objectives
    The process starts with discovering client objectives
    Learn about the website requirements

    View full-size slide

  12. Discovering the website audience
    • Discovering the website users
    • Are you reaching the right
    users?

    View full-size slide

  13. Content Audit

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Navigation Guidelines
    Keep it simple
    Card sorting
    Internal page links
    Search

    View full-size slide

  17. Content Strategy
    The creation, curation, and
    maintenance of text, images,
    audio, and video.

    View full-size slide

  18. Deliverables

    View full-size slide

  19. Deliverables

    View full-size slide

  20. DEVELOP
    potential solutions
    Content development, implementation and review

    View full-size slide

  21. Deliverables
    Wireframes focus on space allocation
    and prioritizing of content
    Source: Usability.gov

    View full-size slide

  22. Deliverables

    View full-size slide

  23. DELIVER
    solutions that work
    Launch website and performance optimization

    View full-size slide

  24. Designing for Performance

    View full-size slide

  25. Images are the biggest culprit for bloated web pages.
    − Ethan Marcotte

    View full-size slide

  26. Designing for Accessibility

    View full-size slide

  27. 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.

    View full-size slide

  28. 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

    View full-size slide

  29. Tools of the Trade

    View full-size slide

  30. 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.

    View full-size slide

  31. Implementing in WordPress

    View full-size slide

  32. Child Theme WordPress customizer

    View full-size slide

  33. Research and discovery
    Design and development
    Deliver and after launch
    Designing for performance
    Tools of the trade
    Implementing in WordPress

    View full-size slide

  34. Information Architecture vs Interaction Design – What Are the Differences? By Norbert Chong

    View full-size slide

  35. Thank You!
    WordCamp Boston| July 2017
    @amykvistad | Amy Kvistad

    View full-size slide