By Matt Rae
I
f you’re designing any type of experience that includes user profiles, or the storing of data and settings, it's likely that a login or sign up screen is an essential part of the user onboarding journey. Login screens can set the tone of a user’s experience as it is often an early touch point, and if too complex, can deter further engagement.
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 creating a compelling 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.
Setup the design
Create a new file by selecting one of the pre-configured artboard templates for web design. This project will use the 1366x768 option which will look great on most mid size laptops, and can scale up and down nicely.
Enable Layout grid
With the artboard selected, start by enabling the layout grid in the property inspector. This grid will act as a column guide when laying out the elements on the artboard. Adjust the margins on the left and right to be close to zero so that the grid fills the page layout.
Rename the artboard
It is good practice to adjust the names of artboards to represent what is on the page. Artboard names are used by default when sharing and exporting, and keeping the names descriptive and concise can help with the handoff process later on. To edit an artboard name, simply double-click and type in the new name. Clicking away from the name will exit out of the edit mode.
With the artboard configured, elements can be added to start building out the design.
Creating the layout
Since this design uses a two panel layout, with a login form container on the left, and a visual section on the right, start by defining the two sections. To make use of features like Padding, it's a good idea to include a background shape for both sections.
Add background shapes
Using the rectangle tool from the toolbar on the left, draw out two rectangles, snapping them to the layout grid guides, and to the edge of each other. Give the right panel a color using the color picker to help it stand out from the other.
Colors used can be saved to the assets panel to be easily updated later on in the design process.
Add a title and subtitle
Since the left hand side is the login form side, a title and subtitle can be added to make it clear to the viewer what the intent of this page is. Start with a larger display font for the title, and a smaller, sans serif font, for the subtitle. Text can be created with the text tool on the left panel, or by using the T hotkey on the keyboard.
Since the subtitle text will be longer, switching the text style to an area text box will allow you to define an area for the text to fit, and as it reaches the bounds, will wrap to a new line of text. This can be enabled in the property inspector on the right.
Make sure that text is left justified, and that both text boxes are aligned to the left using the layout tools in the property inspector. Using the layout grid, drag them into place on the first edge of the second column, using the snapping feature to position them precisely.
Build the form
Create an input field component
Leveraging components and component states, creating the input fields is a straightforward process. Since both the email and password fields will be nearly identical, using a component saves time, and avoids duplicative work.
Start by building the elements of the form field, once again using the rectangle tool to draw out the input shape. Target about 40-50px in height for the input field, and use the layout grid columns to define the width across four columns. Of course, the size and shape of your input will vary depending on the look and feel you’re trying to achieve.
Using the style controls, adjust the border radius, color, and fill to the desired style for the default state.
Next, add the input label and placeholders. The input label typically sits atop the input field, while the placeholder sits inside the input field, with a subdued visual appearance. In this case, Email will be used on the first input field.
With the default input field created, select all the elements in the input, and convert them to a component using CMD+K on a Mac or CTRL+K on Windows, or by using the right click menu and selecting Make Component.
Define the hover state
Many different states can be created for an input component, including hover, active, error and more. For the purposes of this tutorial, a hover state will be created so that as users mouse over the input field, the color of the border and the label will change to indicate that it is clickable.
With the component selected, click on the + in the top right corner of the property inspector next to Default State. From the dropdown, select Hover State.
With the Hover State still selected in the component menu, style properties can now be changed to achieve the desired look and feel of the hover state. Keep in mind, with multiple component states, the selected one is currently being edited, so it is always a good idea to double check the selection before making your edits.
Toggling between the two states will now reveal the visual differences between them. Since the hover state was selected, Adobe XD automatically creates a prototype connection for you. Navigate to preview mode and mouse over the input field to see the component in action.
Create an instance
Instances are copies of components that can be used across the design. Though there is only ever one Main Component, there can be many instances. Each instance’s attributes can be overridden as well to create unique variations of a component.
To create an instance, simply copy and paste the existing input field component. Alternatively, an instance can be dragged onto the canvas from the assets panel on the left.
With the instance created, it needs to be overridden to show as the password field. Start by ensuring the component is on the Default State, and then double click to enter into the component. Select the label field, and edit the text to say Password rather than Email.
Adjust the placeholder text accordingly as well, and then switch to the hover state and make the same adjustments.
Now the instance is set up, and you should be left with a pair of input components, one labelled Email, and one labelled Password.
Add a submit button
In order for users to submit this form, a submit button should be created. To do this, once again select the rectangle tool from the tool panel. Using the layout grid, draw a rectangle spanning two columns, aligned to the right side of the form.
Adjust the style and border radius accordingly. Use the text tool to add a button label titled Login, and ensure it is centered in the rectangular shape. Alignment tools are very helpful when aligning button text.
Finally, combine the text and rectangle layers into a group. This will make modifying the button later easier, and sets it up to be converted to a component should it need to be reused.
With the login button in position, the login portion of the page is now complete. However, there are some other options you may wish to add.
Adding signon partners
To help streamline the login process, many websites offer integrations with services like Google, Twitter, Apple, Facebook and more, to allow visitors the chance to login with existing credentials for the other services. To provide that option, the design requires a couple additional buttons, depending on how many of these services will be available.
For the purposes of this tutorial, Google and Apple will be used as single sign on partners. Creating the buttons is as easy as creating the login button. Both Apple and Google have guidelines on how to label, and design these sign on buttons.
Starting with the Apple button, use the rectangle tool to draw out a black rectangle, with a subtle border radius of about 3-4px. Use the text tool to create a button label of Sign in with Apple.
Using FontAwesome or an icon plugin like Icons for Design insert an icon for the Apple Logo, and ensure both the text and the icon have a white fill.
To create the Google button, use the same approach, but make the background of the button white, with a dark text that reads Sign in with Google. The buttons can share the same border radius and width.
Once again, search an icon service to include a Google icon logo in the button. Left align the icon within the button to create balance, as these buttons are a fixed width in the design.
Position the buttons side by side, each taking up two columns width.
Create an account link
Finally, to allow those who do not have accounts to create one, at the bottom of the form a link to creating an account should be included. This can be as simple as a hyperlink text, or a stronger call to action like a button. For this tutorial, the text link approach will be used.
Use the text tool to place text below the sign in buttons that were just created. In the text field type, “Don’t have an account? Create an account”. Position the text field centered below the buttons, and make sure the text is aligned centre as well so that changes to the text later won’t impact alignment.
Depending on the background color chosen, the text color will need to be adjusted to ensure proper contrast. Set the font size to about 14px, so it is visible, but not too large on the page. This sizing will change depending on the typeface selected for your design.
Design the right panel
With the login form complete, the right content panel can be laid out. This page can be as simple as a nice illustration, or include more detailed information like product reviews, pro-tips, or other valuable information. The important thing to note is that this content should supplement, not distract from the goal of logging in. The content included on a login screen should be different from a signup page, as visitors already have an account - trying to sell visitors to the login page on your product is not as effective when they’re already customers.
For this tutorial, an illustration will be added to the right side using the UnDraw plugin for Adobe XD. This plugin, created by Katerina Limpitsouni provides a number of open source, fully customizable illustrations for use in your design.
Download the plugin
To download the plugin, click on the + icon in the plugins panel, and search for UnDraw. Click Install to download the plugin and install it on your computer.
With the plugin installed, select it from the plugin panel and search or browse the library of illustrations. For this tutorial I’ll use a secure login illustration to reinforce the security of this authentication service. The selected illustration will be copied to the clipboard, and can be pasted onto the canvas.
Position the illustration within the right panel. Depending on the structure of the layout, it may look better aligned to the bottom, or to the centre. For this illustration, center looks best.
Colors can be adjusted easily by selecting the vector elements, and using the fill and border color selection in Adobe XD. Adjust the colors to fit the rest of the design, and don’t shy away from adjusting the shapes either to match the desired look and feel.
Now the illustration is looking great, and zooming out on the design, the login page has a cohesive look and feel, and directs the user's attention to the login flow.
The same approach used in this tutorial can be used to create signup pages, and registration pages, simply by modifying the form layout to include different fields, and adjusting the copy. As a next step, take this initial login screen and build out the remaining flow, starting with what the page might look like as someone is filling out the form, or what the page might look like if there are errors in the login process.
Discover more guides and how-tos at letsxd.com/guides. Want to fast-track your login page designs with a UI Kit? Get started quickly with the Sign Up Screen UI Kit from XO Pixel.
