UX Power Tools
Published in

UX Power Tools

Design Tutorial

Every Screen You Should Design for Sign Up and Login

What’s been been most eye-opening throughout my design career is the fact that only about 30% of my job actually involves pushing pixels in a design tool. The other 70% is research, brainstorming, whiteboarding, presenting, explaining, and validation.

I’ve come to realize that most stakeholders aren’t as intimately in touch with the ins and outs of designing a digital product, much less the specific screens required to put one together.

I find this particularly evident whenever I’m tasked with designing a login screen:

“While you’re at it, we’ll need a quick login screen.”

I can’t say I blame people for their flippant request. It’s a login screen…how hard can it be? 🤷🏼‍♂️ It’s just a couple fields and a big button that says “Log In”.


Well not quite. Here’s a quick list of all the screens I tell stakeholders need to be designed in order to check the box for LOGIN:

  1. Sign Up (empty)
  2. Sign Up (filled)
  3. Sign Up (error)
  4. Sign Up Confirmation Email
  5. Welcome Email (optional…but encouraged)
  6. Login (Empty)
  7. Login (Filled)
  8. Login (Error)
  9. Forgot Password
  10. Forgot Password Email
  11. Reset Password (empty)
  12. Reset Password (filled)
  13. Reset Password (Error)
  14. Password Change Confirmation Page
  15. Password Change Confirmation Email

Now to be fair, it’s really only 4–6 unique page designs, then a bunch of states (empty, filled, but still, that’s a decent amount of work, and certainly something you shouldn’t skip designing.

For a more detailed look at all the different login patterns, Christian Beck wrote a super, probably overly-comprehensive article over here:

If you want a head start on designing these pages, I put together a couple of these flows in a freebie you can grab here:

When I’m not writing about design, I’m the principle designer at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.

Some other stuff:

Originally published at https://www.uxpower.tools on August 25, 2019.



A publication for designers, written by designers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jon Moore

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com