UI tips for creating the perfect login page

Designing a login page is key to your UX/UI professional portfolio. Today most commerce, productivity, social and communication platforms offer personalized experiences through account registration. 

But not all home pages are perfect, and some end up making an experience worse. A homepage is a lace of welcome, and as such, it should be pleasant, easy to use and free from confusion. 

Here are some UI tips to help you design perfect login pages.

Simplicity and clarity

The design of a homepage must be simple and easy to use. The idea is to make it easy for the user to log in or register in a smooth and uncluttered way.  Each cell, button and instruction has to have an obvious purpose.

Users generally arrive with a mental model of how to log into a website or application. Avoid skewing the design to such an extent that you confuse your users.

The three actions that build simplicity and clarity you should keep in mind when designing a home page are as follows.

1. Differentiate clearly between signing in or registering a new user

The obvious actions on a home page are to log in or to register as a new user. These options can be offered in different ways. 

• A toggle button that changes the form from login to registration.
• Two buttons, side by side.
• A few words with an embedded link just below the home button inviting the user to register.

2. Offer a variety of options, such as social media sign-in

Not all users will want to log in using the same method. And very few will want to remember a new password. Most will prefer to use a social login via Google, Facebook or some other platform where they already have an account. 

It’s easy to visually complicate your interface with lots of login options. Look for a visual solution that offers the bare essentials so the user understands the options and can easily choose the one they prefer.

3. Don’t include the option to create a username

Just as it has become common for a login page to include social login options, it has become much less common to include a username cell. Email and password are sufficient to log in to a page or application. For new user registration, this means not offering that option when requesting personal information.

Smart cells

Finding the middle ground between giving too many instructions and not enough is essential. Each cell in the login or registration form should have explanatory content within the cell that disappears when filled in. Generally, this should be in a lighter font color than the font color when the cell is already filled.

When the user makes a mistake and fills in the wrong information, there should be some indication that prevents the user from continuing with the action. For example, such as when the “at” symbol is missing from an email address.

Similarly, if the user enters their details incorrectly when logging in, the form should offer an option to easily reset the password.

Strategic buttons

Buttons on a login page are extremely important, as they are how the user will enter the platform. In UI design, buttons are fundamental elements and should not be taken for granted. It makes the most sense to take advantage of users’ existing mental models and to avoid designing visually unfamiliar actions.

The action and state of the button can be demarcated with variations in color, shape and size. The standard button interface design makes the primary button the most noticeable, while the secondary button is subtler. This difference is marked with background colors or colored borders. The primary button would generally be the login button, while the button for registering a new user is the secondary button.

Social logins also need buttons. These can be as simple as the logo in a rounded square or a rectangular button with some text next to an icon. Ideally, the buttons should be spaced to be easy to click, even for people with visual or motor disabilities.

Personalized or branded details

Just because a homepage design is simple and obvious to use doesn’t mean it should be boring or have no character. Adding a special touch to a homepage will inspire an emotional response in the user, ideally one of recognition and trust.

The idea is to add an element that conceptualizes the brand’s personality. It could be something like a subtle pictorial background, a playful illustration, or something more daring, such as a mini-interaction or even a small dose of gamification. At this point, Flaticon icons are your best ally. Try customizing them to reflect your visual identity. You can customize them in our online editor, or download them and modify them in your favorite software. 

Design the perfect homepage with Flaticon

How many login pages have you got in your experience and interface design career? 

You’re probably already fully aware of the importance of icons and UI elements in a login interface. At Flaticon you’ll find everything you need to visualize login actions in your design – from schematics and prototypes in Figma to functional pages already on the web.