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

Website and UX Design - From a Designer's Perspective

Website and UX Design - From a Designer's Perspective

Presentation given at WordCamp Portland, Maine on May 27, 2017.

Website design and User Experience principles applied to WordPress websites.

Amy Kvistad

May 27, 2017

More Decks by Amy Kvistad

Other Decks in Design


  1. Website and UX Design –
    From a Designer's Perspective
    WordCamp Portland, Maine | May 27, 2017
    @amykvistad | Amy Kvistad

    View Slide

  2. About me
    Amy Kvistad is a freelance web designer with a background in graphic
    design; and co-organizer for the Boston WordPress meetup. She delves
    into typography, layout, and clean design across a wide range of
    industries. Her design process is customer-focused, research driven,
    and adaptable. She loves warm weather and racing on sailboats.

    View Slide

  3. Summary
    Website design and UX principles applied to WordPress websites –
    from a designer's perspective.
    The process starts with discovering client objectives and the website
    audience. This informs decisions on colors, fonts, and layout. A mood
    board helps to communicate the design direction for the website and
    user research informs decisions on website navigation and content
    hierarchy. Tools of the trade include color, stock photo and icon
    resources. Implementing these design discoveries into your WordPress
    website is not as hard as you think.

    View Slide

  4. Outline
    Research and discovery
    Design and development
    Deliver and after launch
    Tools of the trade
    Implementing in WordPress

    View Slide

  5. Questions
    Who in the room is a…
    web designer?
    UX designer?

    View Slide

  6. Overview

    View Slide

  7. Website Visual Design
    Visual design blends typography, color, space, texture, and imagery to
    create a website’s look and feel. Because it’s the first thing they see,
    visual design gives visitors their first impression of your site and often,
    your company.
    It’s also essential for communicating your brand and effectively
    marketing your products and services.

    View Slide

  8. Responsive Design
    Web users access content in a variety of ways. Therefore, it’s crucial to
    have a website that adapts to provide a great experience for every
    visitor, whether they’re on a desktop, tablet, or phone.
    Responsive design improves site effectiveness and increases customer

    View Slide

  9. User Experience Design
    User experience design focuses on the needs and behaviors of website
    users, determining the appropriate strategy and framework to ensure
    that users find the site useful, easy to use, and enjoyable to visit.

    View Slide

  10. User Interface Design
    User interface design involves the application of visual design to the
    structure and function determined in the user experience and
    interaction design steps.
    This process is not just about making the site look good, it’s about
    visually guiding the user on each page and across the site.

    View Slide

  11. Interaction Design
    These days, we don’t just surf the web—we type, click, scroll, tap, and
    swipe. Computers now fit in our pockets and play a huge role in our
    daily lives.
    Interaction design considers all the ways people engage with devices
    and content, and incorporates elements that make user interaction
    more natural, pleasurable, and useful.

    View Slide

  12. Web Design Process

    View Slide

  13. View Slide

  14. Step 1
    Research and Discovery

    View Slide

  15. Research
    Research involves gathering data and synthesizing that data in order to
    improve usability and reach our goals and objectives.
    It helps us learn more about our client and the project.

    View Slide

  16. Discovering client objectives
    • The process starts with discovering client objectives
    • Website questionnaire
    • Talk with your client to find what their vision is for the website
    • Look at competitor sites
    • Learn about the website requirements
    • What are the website goals?
    • Will your client be adding new functionality?

    View Slide

  17. Discovering the website audience
    • Discovering the website audience
    • You need to know who your user is so that you can make a usable website for
    • Are you reaching the right audience?
    • Develop personas

    View Slide

  18. Step 2

    View Slide

  19. Information Architecture
    Information architecture is the structure behind a well-thought-out
    application or website.
    IA results in categorization, schema, mapping, and navigation that is
    intuitive and user-friendly.

    View Slide

  20. View Slide

  21. Navigation
    • Based on research of the website audience you can set up website
    navigation for audience personas
    • Make it easy to reach relevant content
    • Make it findable
    • Provide more than one way to get to your content
    • Top navigation links
    • Footer navigation links
    • Image links
    • Text links
    • Keep SEO keywords in mind

    View Slide

  22. Navigation Guidelines
    • Keep it simple
    • Have 3-5 top navigation links
    • Use breadcrumbs, footer navigation or go to top of page navigation
    • Use card sorting to categorize topics to a few top levels
    • Use internal text page links to network your pages together – this
    improves SEO, gives more life to older posts/pages and helps users
    access info
    • Have a search box

    View Slide

  23. Content Organization
    • A content audit shows you all the information on your website – use
    this to group content into categories – as few as possible
    • Discover content that should link to other categories
    • Set up post categories to organize
    • Use words that will improve SEO
    • Keep it simple with as few post categories as possible
    • Keep users in mind when organizing

    View Slide

  24. Content Strategy
    Content strategy plans for the creation, curation, and maintenance of
    text, images, audio, and video.
    It also defines the tone and character of a business, in order to engage
    specific user groups and achieve business objectives.

    View Slide

  25. Step 3
    Design and Development

    View Slide

  26. Designing
    • Using the research you did and the client requirements:
    • Sketch out page layouts with user in mind
    • Set up a good page hierarchy – headings, paragraphs, break up text for
    • Choose images with the right tone and compliment the content
    • Be consistent – rounded corners or square
    • Use your brand colors
    • Use your fonts

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Case Study

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Step 4
    Deliver and After Launch

    View Slide

  43. View Slide

  44. Tools of the Trade

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. Implementing in WordPress

    View Slide

  60. Child Theme WordPress customizer

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. Wrapping up
    • Start with research and discovery
    • Learn requirement and who your users are
    • Design and structure the website
    • Use tools of the trade to make the job easier

    View Slide

  68. Thank You!
    WordCamp Portland, Maine | May 27, 2017
    @amykvistad | Amy Kvistad

    View Slide