100 Days of UI — 001 — Sign Up Form

Square


100 Days of UI — Day 001 — Sign Up Form. Designed by Jessica Felts.

Today is the beginning of my 100 Days of UI challenge.

Today, I decided to create a Sign Up form (spoiler alert — tomorrow I’ll be doing the ‘Sign In’ portion of this form). I wanted to create something that was simple and to the point; something that would be easy to understand and interact with. Sign up forms are generally very straight forward pieces, so there is no need to overcomplicate it.

Most commonly, sign up forms have a collections of fields in common with each other. Mainly, these are fields for your Username, Email Address, and Password; as well as a Submit button. In our case, this form will allow you to toggle between Sign Up and Sign In, based on which one you need to access, and also provides a blurb of text telling you why you should sign up.

100 Days of UI — Day 001 — Sign Up Form, Filled In. Designed by Jessica Felts.

Each field has also been outfitted with verification. If your username is already in use, your email address is invalid, or your password does not meet password requirements, you’ll be notified with an error icon, which will open a pop-up when hovered over on desktop, or clicked/tapped on desktop or mobile.

An example of an incorrect Username —

An example of an incorrect Email Address —

An example of an incorrect Password —

I haven’t taken time to sit down and design UI elements — or anything, for that matter — for a long time, so I am ridiculously out of practice, and this project went a little slower than I was hoping it would. The entire project took around three hours to complete (though it wasn’t all in one stretch).

Around halfway through the project, I was worried about the design not working well, and had to make some adjustments — mainly, too many parts of this form were pink, which I meant to use only as an accent color. Overall, I think this project made a good recovery, and I’m very pleased with how it turned out.

Check back tomorrow for the Sign In portion of this form!

xx

Leave a Reply

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