Get a high-level understanding of the process used to create an interaction. You might be surprised how much of an interaction designer’s job involves organized step-by-step processes rather than inspired sketching.
Learn the steps involved in understanding the issues that need to be fixed, how the interface should flow, and what common design patterns exist to build that interface.
Core
(Diane Cronenwett)
Much of design happens before you even start drawing interfaces. Before that step, UX designers must think holistically about the structure of their project. Diane explains how the process of defining a project’s structure helps designers see the big picture and organize project elements in a more thoughtful way.
(Diane Cronenwett)
Explore ways to create and use flow maps: diagrams of the steps users will complete in an experience. See how flow diagrams communicate underlying system logic and conditions to produce an effective user experience. Diane covers the ways designing a flow takes into account various entry points, exits, and conditional states a user might encounter while using a product interface.
(Diane Cronenwett)
The lessons in this course teach the proper role of color, type, iconography, illustrations, and micro-interactions when building an interface for any system. Learn visual principles such as grouping and hierarchy, how and when to use iconography, the impact of color, and the power of illustration and animation.
Interaction Design: Design Patterns as Building Blocks (Diane Cronenwett)
Design patterns offer solutions for common design problems. UX designers rely on design patterns and best practices to design usable and consistent interfaces more quickly. This course covers patterns for designing common interface elements such as navigation, buttons, forms, links, progress indicators, and search boxes. Rather than just copying common patterns, Diane helps you understand the “why” behind them, giving you the ability to evaluate each pattern’s suitability for your projects.
Mapping the Modern Web Design Process (Morten Rand-Hendriksen)
Essential if you’re trying to fit in on a web development team. No two teams follow exactly the same processes, but the main steps are the same. This will help you learn the language and practices of web development.
Optional:
Practical UX Weekly Season 1, Season 2. (Drew Bridewell)
Drew created these short segments to give you insight into the design world. Watch as many as you find interesting, and bookmark the rest for later. There are lots of videos in this series, and you can come back to them whenever you want another dose of Drew!
Design tools
It’s useful to have experience with visual design tools even if you won’t be using them on a daily basis. There’s no one “right” tool and their relative popularity is always changing.
Skills from one tool will transfer relatively well to others, so learn the tool that shows up most frequently in the job descriptions you’ve found. At the moment, Figma seems to be the favorite in the design space.
- Figma for UX Design with Brian Wood
- Sketch for UX Design with Shauna Bybee
- Invision for UX Design with Emmanuel Henri
- Photoshop for UX Design with Dennis Meyer
- Illustrator for UX Design with Brian Wood
- After Effects for UX Design with Tom Green
- Principle for UX Design with Tom Green
Homework
Create a high level flow map for the core task on your target business site, based on what you learned in Diane’s Interaction Design: Flow course.
Tip: This is a chance to start working with one of the design tools that I’ve mentioned above. If you don’t have access to any of them, or you aren’t ready to take that step, you can always create this map in a presentation tool like PowerPoint, Keynote, or Google Slides. It’s easy to create nice-looking boxes and connecting lines, and it’s easy to move the elements around to add a missing step.
Discussion topics
Share your flow map with your study group. As a group, discuss the steps it would take to move from this flow map to a working interface. Now consider how few of those steps involve what we normally refer to as “design.” – Much of the job of an interaction designer happens before the interface itself is created.
Project
(Re)design the flow you mapped (in the homework) for your target site.
First, watch UX for Small Business Websites, then use the workbook (download it from the course’s exercise files) to step through the process of determining audience, messaging, site layout, and content for your target business.
Having done this, use the flow map you created as homework to identify what areas might need to change to better meet your audience’s needs.
Now choose at least three of the interface areas (pages) that need to be changed, and sketch out how they would look. You can do this to a wireframe level or create screen comps if you prefer.
If possible, focus on the homepage, a category page (if they exist), the “about us” page, and a detail page. This will help you to demonstrate that you’ve thought about each “level” of the interaction.
After you’ve done each redesign, create a presentation that shows the flow, the original version of each page you changed, the reasons for changing it (based on the analysis you did from the Small Business Websites workbook), and what the new version looks like.
This will form part of your portfolio, and you’ll also be able to talk at interview about the practical steps required to undertake a redesign process, as well as the real-world trade-offs that have to be made.
Next: Part 5: Content Creation