How to Design Input Fields UI | Account Creation Tutorial
1.7K views · 2019-04-28
UI DesignInteraction & UX
In this video I show you how to create and organize forms in Sketch.
This tutorial shows how to create several states of a form element. I show you how I make an account creation workflow for an application and how I swap the symbols on the page level to complete overrides. Showing all of the different states of a form element is important for handoff to development.
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF27bBdn4
I show you how to:
- 1:42 Create a form symbol
- 2:12 Complete overrides
- 3:06 Create multiple states for each symbol - inactive and error state
- 4:26 Change the symbol state through the Override panel
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
This tutorial shows how to create several states of a form element. I show you how I make an account creation workflow for an application and how I swap the symbols on the page level to complete overrides. Showing all of the different states of a form element is important for handoff to development.
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF27bBdn4
I show you how to:
- 1:42 Create a form symbol
- 2:12 Complete overrides
- 3:06 Create multiple states for each symbol - inactive and error state
- 4:26 Change the symbol state through the Override panel
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise