*This article was originally posted on May 21st, 2019 at: https://nickjanetakis.com/blog/design-your-web-uis-faster-by-planning-out-each-different-state

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

Reference Links

• Planning a web application from scratch video

Have you done this or something similar before? Let me know below.