Login Screen

Challenge
Design a login screen that scales across all device types seamlessly with error states.

Approach
I created several login screen designs to help identify the client’s desired look and feel. After selecting a specific look and feel, I dialed in colors and fonts to mesh with the client’s application. After the initial review, I made a few modifications, and then error states were created for different scenarios.

Insights
It is helpful to create a few rough mocks with a few different styles to help discover what a client prefers. After the look and feel are identified, mocks should be designed for several popular device types. Lastly, creating error state texts for different scenarios can help guide users to identify and correct any mistakes being made in the error state process.

(click images for best view)