The design scenario

Create a sign-up form using basic information like name, address, email, date of birth, and so on.

Try to include a variety of elements - checkboxes, drop-down menus and input fields, etc. - and design a clean set of icons that you can use to represent each section. A sign-up form is an important point of engagement between user and site, so the way they look and function is really important.

We've pulled out some inspiration images here for you to use as a guide, but we advise spending some time researching online yourself. Check out Collect UI: it's full of awesome UI elements like input forms, buttons and onboarding processes.

The Solution

The end product is a mobile design with a simple 3 step signup process. This includes a Username, Email and Password field.

Once a field is filled with a valid input, it the becomes filled in with a solid grey and the text converts to a white colour. This feedback indicates to the user that they can move on to the next field. If the user already has an account, options are given at the bottom to login via another link or using a linked social media account.

Designs and Mockups

A signup form that includes username, email and password fields.A signup form used in an iPhone 6s device mockup that includes username, email and password fields.

 

Related Blog Posts