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.

Ac19443f8100bfa924c352a78ebb8bb2?s=128

Amy Kvistad

May 27, 2017
Tweet

Transcript

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

    Portland, Maine | May 27, 2017 @amykvistad | Amy Kvistad
  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.
  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.
  4. Outline Overview Research and discovery Design and development Deliver and

    after launch Tools of the trade Implementing in WordPress
  5. Questions Who in the room is a… web designer? UX

    designer? Developer? Blogger?
  6. Overview

  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.
  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 satisfaction.
  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.
  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.
  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.
  12. Web Design Process

  13. None
  14. Step 1 Research and Discovery

  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.
  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?
  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 them • Are you reaching the right audience? • Develop personas
  18. Step 2 Define

  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.
  20. None
  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
  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
  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
  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.
  25. Step 3 Design and Development

  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 readability • Choose images with the right tone and compliment the content • Be consistent – rounded corners or square • Use your brand colors • Use your fonts
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. Case Study

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. Step 4 Deliver and After Launch

  43. None
  44. Tools of the Trade

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Implementing in WordPress

  60. Child Theme WordPress customizer

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  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
  68. Thank You! WordCamp Portland, Maine | May 27, 2017 @amykvistad

    | Amy Kvistad