DEV Community

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

Posted on • Originally published at nickjanetakis.com

Design Your Web UIs Faster by Planning Out Each Different State

*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.

Top comments (0)