Website and UX Design

Updated presentation given at WordCamp Boston, July 2017.

Transcript

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 design
16. Navigation A key part of information architecture is navigation.
17. Navigation Guidelines Keep it simple Card sorting Internal page links Search
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
28. Deliverables Wireframes focus on space allocation and prioritizing of content Source: Usability.gov
29. Deliverables
30. Case Study
39. DELIVER solutions that work Launch website and performance optimization
41. Designing for Performance
42. Images are the biggest culprit for bloated web pages. − Ethan Marcotte
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
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.
71. Implementing in WordPress
72. Child Theme WordPress customizer
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