By Matte 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 log in or sign-up screen is an essential part of the user onboarding journey. Log In 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 how to design a log in 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 log in 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 log in panel can adapt to the screen size.
Set-up your log in page design
Create a new file by selecting one of the pre-configured artboard templates for web design. This project will use the 1366 x 768 option which will look great on most mid-size laptops and can scale both 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. 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 log in 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 colour using the colour picker to help it to stand out from the other.
Colours used can be saved to the assets panel to be easily updated later in the design process.
Add a title and subtitle
Since the left hand side is the log in 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, colour 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 colour of the border and the label will change to indicate that it is clickable.
With the component selected, click the + in the top right corner of the property inspector next to Default State. From the drop-down, 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 Log In and ensure that it is centred 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 reuse.
With the log in button in position, the log in 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 log in process, many websites offer integrations with services like Google, Twitter, Apple, Facebook and more, to allow visitors the chance to log in with existing credentials for the other services. To provide that option, the design requires a few 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 log in 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.
Create an account link
Finally, to allow those who haven't got 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 centred 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 colour chosen, the text colour 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 log in 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 log in screen should be different from a signup page, as visitors already have an account - trying to sell visitors to the log in 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 customisable illustrations for use in your design.
Download the plugin
To download the plugin, click 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 log in 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, centre looks best.
Colours can be adjusted easily by selecting the vector elements and using the fill and border colour selection in Adobe XD. Adjust the colours 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 log in page has a cohesive look and feel and directs the user's attention to the log in 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 log in screen and build out the remaining flow, starting with what the page might look like as someone is filling in the form or what the page might look like if there are errors in the log in process.
Discover more guides and how-tos at letsxd.com/guides. Want to fast-track your log in page designs with an UI Kit? Get started quickly with the Sign Up Screen UI Kit from XO Pixel.
