Cover image for Design Your Web UIs Faster by Planning Out Each Different State

Design Your Web UIs Faster by Planning Out Each Different State

nickjj profile image Nick Janetakis Originally published at nickjanetakis.com ・1 min read

*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

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

Posted on by:

nickjj profile

Nick Janetakis


I'm a full stack web developer who has been freelancing for the last 20 years. I write about everything from development to production and also have video courses on my site!


markdown guide