Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Updated on May 21, 2019 in #dev-mindset, #elixir, #flask, #javascript, #ruby-on-rails

Design Your Web UIs Faster by Planning Out Each Different State

design-your-web-uis-faster-by-planning-out-each-different-state.jpg

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:

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.

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per year (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.

Comments