Daily UI – Day 1, Create a Sign Up Form

I have embarked on a quest to become a better designer and learn a few new skills over the next 100 days. Through the Daily UI challenge I hope to refine my Adobe Creative Suite skills, discover new things about interface and UX design, and hopefully hone my writing craft as well.

Daily UI challenge 1 tasked me to create a sign up form. I decided to create a practice room reservation form for a fictional organization called “The Sesh House”. A “Sesh” is a term that often refers to a group of folk musicians who are out having a good time frequenting the local watering holes and playing music. Fair warning, I am a bagpiper by heart and by culture so folk music may be a reoccuring theme. See my results below.

The Results

Screen 1. What user encounters without performing an action
Screen 3. Form displaying dropdown for
Room Type
Screen 2. Form displaying duration dropdown with scroll
Screen 4. Form displaying form field errors

Considerations

  • Limited color pallete helped me to focus on the necessary components of the form
  • Collected necessary information to contact the user with available revervation times
  • Ensured that required format examples were included in the form field labels
  • Ensured that labels were adjacent to the form field
  • Ensured that visual cues and instructions to correct the error were provided
  • Ensured that contrast of text met 4.5:1 contrast ration with surrounding color

Future Changes

If I were to continue developing this prototype these are the changes I might make

  • Fill the form fields with white or lighten the gray color
  • Add a radio group to ask if the user would like to be contacted via phone or email
  • If more information needs to be collected I would add a second page and make edits to account for multi page forms

Tools

  • Adobe Illustrator (Pixel 2 demension)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s