The most important artifact isn’t the Figma file, or even the annotations.
It’s the conversation it facilitates about UX with the devs.
UX stands for User Experience
As a designer, it’s your responsibility to direct developers to create a good experience for all people.
Developers will make the UX decisions you don’t.
Helping people read stuff is good UX
People don’t come here to look at your glorious UI design. They are here to consume words that will solve their own problems.
Workshop 1: Page structure
- Demo: Coffee roast guide
- Demo: Coffee dashboard
- Demo: Heading styles
- HTML page design criteria
- Header test criteria
- Navigation design criteria
- Main test criteria
- Footer design criteria
- Heading design criteria
- Video: HTML and landmarks training
Workshop 2: Alternative text
- Demo: Decorative images
- Informative image design criteria
- Demo: Informative images
- Decorative image design criteria
Helping people click stuff is good UX
We set expectations visually that help people understand and trust our product. We must do the same for people using a screen reader.
Workshop 3: What is the difference between a link and a button?
- Demo: Links & buttons
- Demo: Icon buttons
- Demo: Link names
- Link design criteria
- Button design criteria
- Video: Links & buttons training
Helping people have a conversation is good UX
Inputs allow people using our product to talk to us. Our job is to make sure we aren’t making it difficult to speak by choosing the right inputs.
Workshop 4: Text inputs are harder than you think
- Demo Shipping form
- Demo: Credit card input
- Text input design criteria
- Number input design criteria
- Video: Text input fields training
Helping people refine the conversation is good UX
Radio buttons, checkboxes, switches and selects allow you to have a precise conversation with people using the product. But what happens when a control doesn’t look like one of these?
Workshop 5: Input mental models
Single selection
- Demo: Radio buttons
- Radio design criteria
- Video: Radio Button training
- Demo: Select
- Select design criteria
- Video: Select training
Multiple selection
System settings
What is it?
Sometimes interrupting the conversation is good UX
There are good reasons to stop the flow, but let’s do it the right way.
Workshop 6: Complex groups
Stopping everything
Deciding what’s important now
Intentionally hiding content
- Tab group design criteria
- What’s a tab anyway?