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
  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. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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?
  12. 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
  13. 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.
  14. 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
  15. 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
  16. 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
  17. 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.
  18. 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
  19. 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