Design Your Web UIs Faster by Planning Out Each Different State
In this 15 minute video, we go over 1 way to quickly break down a UI feature which happens to double as a cheat code for writing tests.
Quick Jump: Breaking Down the UI States for 3 App Features
Recently I’ve moved beyond my plan to create a course hosting platform and started to code it. When it comes to laying out or designing the user interface (UI) for a page I often step back and write out each combination of what state that page can be in.
This video goes over that process for a user registration / sign up workflow, setting up a user avatar and also touches on designing a checkout page.
Breaking Down the UI States for 3 App Features
Timestamped Table of Contents
- 1:33 – Figuring out each state for user registration and authentication
- 4:47 – Knowing what to design before you design it (which saves a ton of time)
- 5:04 – Doing this naturally sets up your test cases
- 5:56 – Breaking down how to handle user avatars
- 11:07 – Going over a few different user states for a checkout page
- 15:30 - Quick recap
Have you done this or something similar before? Let me know below.