New and returning visitors to a product often get frustrated when caught in a loop of password reset links, and confirmation codes, meanwhile for others the process is seamless. Single sign-on options from Google, Apple, and Shopify have raised the bar around how simple and secure the experience can be. This tutorial will walk you through how to design a login page from scratch, for a web application. The principles used can be applied to mobile design as well.
The end result will be a two-panel login interface with space for visuals and quick tips on the right-hand side of the page. This format is set up nicely for responsive design, as on small devices, the visual panel can be hidden, and the login panel can adapt to the screen size.