100 Days of UI — 002 — Sign In Form


Today’s entry for 100 Days of UI is a continuation from yesterday’s Sign Up Form. Today, I designed the Sign In portion of this form, which can be toggled to from the top of the Sign Up portion of the form. (Likewise, from the Sign In portion of the form, you can toggle to the Sign Up portion.)

Since these are two aspects of the same form, I obviously wanted to keep styling consistent from one to the other, so you’ll see a lot of the same elements from yesterday, in today’s design.

When designing the Sign Up form, I wanted to include all elements you would normally find on a standard Sign In form — an option for keeping yourself signed in, and options for recovering your username or password. I also included form validation, just like for the Sign Up form, keeping the same styling and functionality.

The Sign In Form correctly filled out, both with and without the “Keep me Sign In” option checked —

Sign In Form, with an incorrect Username —

Sign In Form, with an incorrect Password —

Account Recovery options in their hover states —

Tomorrow, I will be designing the final (I think?)  aspect of this form, which is the account recovery section. Originally, this form was just going to be a two-part / two-day design, but upon designing the “Recover Username or Password” section for this Sign In form, I think it’s only fair that I design what this experience would be like as well.

Check back tomorrow for the Account Recovery designs, or check out yesterday’s Sign Up Form designs.


Leave a Reply

Your email address will not be published. Required fields are marked *