Hi-Fi & Detailing
Sep 23th 2021
Web & Mobile Design - DMA 331
Reading Discussion
Writing Assignment
Write a couple paragraphs about the role of emotion and how it plays in the design process of Tinker Hatfield, consider the readings in this discussion
Edge Cases: Long Names
Do we truncate? Do we wrap? Other options?
Design Principles
Contrast
Balance
Emphasis
Proportion
Hierarchy
Repetition
Rhythm
Pattern
Whitespace
Movement
Variety
Unity
Text Field Detailing!
“If people don’t either love or hate your work, you just haven’t done all that much”
-Tinker Hatfield
“If people don’t either love or hate your work, you just haven’t done all that much”
-Tinker Hatfield
Be Bold!
Take Risks!
Design vs Dev Mismatches
This is the role of design QA and design reviews with your engineers
Help to build a share language to reduce these mismatches or know up front what deviations will look like
And all of these things can be sorted out with a design system!
Great Experiences
Are Smooth
Writing Assignment
Write a couple paragraphs about the role of emotion and how it plays in the design process of Tinker Hatfield, consider the readings in this discussion
Venmo Action Clarity
Cursor Choice
Detailing that tell the users what’s up
What action they can take or not
Aesthetic-Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable.
Motion as a detail
Content Details
Content informing steps in a workflow. What is coming next? A system action? Or a prompt for the user?
https://twitter.com/solomania/status/1440689579837702146
Keyboard Layout
Know the data being entered, is it number entry? free text? Our there other pickers that could help?
“Edge” Cases
Long names
Error messaging
Empty states
Off-screen actions
Edge Cases: Long Names
Do we truncate? Do we wrap? Other options?
Edge Cases: Error States
ASOS ensure that errors in their checkout are presented clearly, and are written in a actionable way
Edge Cases: Empty States
Github Issues - It tells me when there are no results and proposes next steps
Edge Cases: Off-Screen Actions
Design Principles
Contrast
Balance
Emphasis
Proportion
Hierarchy
Repetition
Rhythm
Pattern
Whitespace
Movement
Variety
Unity
Text Field Detailing!
“If people don’t either love or hate your work, you just haven’t done all that much”
-Tinker Hatfield
“If people don’t either love or hate your work, you just haven’t done all that much”
-Tinker Hatfield
Be Bold!
Take Risks!
Detailing Exploration!
Menu Detailing
Menu Detailing
What’s up with these radii?
Lovely hover state
Menu Detailing
What’s up with these radii?
Hover States?!?!
What’s up with these inconsistencies
Drop Shadows
Why are these different?
And what’s up with this line?
Loading State!
Skeleton loaders! Considers performance
Ads
Design vs Dev Mismatches
This is the role of design QA and design reviews with your engineers
Help to build a share language to reduce these mismatches or know up front what deviations will look like
And all of these things can be sorted out with a design system!
Benefits of a Design System
🏎️ Reduces startup time�🎛️ Consistency & Clarity�💭 Reduces decision fatigue�⬆️ Ease of scale�👁️ Focuses on the main experiences
Great Experiences
Are Smooth
Fit & Finish is important, tie the bow on the work before you release it into the world
Next Week
Assignment & Reading updates posted in the next day or so; Will post on Slack
Design Crit Live!
Rose Bud Thorn
This is working great!
A highlight, success, small win, or something positive that happened.
This is an opportunity!
New ideas that have blossoming or something you are looking forward to knowing or experiencing
This is broken!
A challenge you experienced or something you can use more support with
At least 2 of each in reflection of today’s class