How to make a login screen design

Decide whether the screen signs in, signs up or does both

Start with the question the screen answers, because a screen that tries to answer two of them does neither. Sign in means: I already have an account. Sign up means: I do not have one yet, and I am willing to create one. Those are different conversations, and the field lists are different too.

Putting both on one screen splits the attention and doubles the reading. The usual compromise is a primary path and a text link at the bottom that switches to the other mode, acceptable when the two forms share most of their fields. It is a compromise, and worth naming as one.

Two frames are cleaner: a Sign in frame and a Sign up frame, with a link on each pointing to the other. In App Builder the On tap go to setting in the frame inspector connects them, and Present mode walks between them. The mobile form guide covers the field-level detail.

• One mode per frame, or a primary mode with a text link
• Sign in needs the fields an existing user knows
• Sign up needs the fields a new user can supply
• The link between the two modes is at the bottom

Note: A social sign-in row is a third option that many products add. Decide it separately, because it changes the hierarchy of the whole screen.

Put the form in one vertical auto-layout container

The form is one container, and the container flows vertically. The Form component kind in the palette is built for this, and so is a plain container with auto-layout on and a vertical direction. One container means the fields cannot drift out of line, and the spacing between them is a number rather than a guess.

Set a gap and a padding in the inspector and stop thinking about spacing. A gap of 8 pixels between a label and its field, and 16 pixels between one field and the next, keeps the form readable without looking loose. Both values run from 0 to 96, and the same values on the sign-up form keep the two screens consistent.

Inside the container, use the Form field component from the reusable library wherever there is an input. It gives every field the same height, label position and spacing, so the form reads as one object rather than a stack of parts. The library has seven insertable components, and this is the one that earns its place here.

1. Add the container. Drop a Form or a container into the frame, switch Auto-layout on in the inspector and set the direction to vertical.
2. Set the spacing. Use a gap of 8 and padding of 16, then keep the same numbers on every form in the product.
3. Add the fields. Insert Form field components for the inputs and place the labels above them, not inside them.

Note: The editor allows 8 levels of nesting inside a frame, so a form inside a card inside a container is fine. The rule of thumb is that a form should be readable at one glance, and deep nesting works against that.

Order the fields the way they get asked for

Field order is a decision about attention. The field the person is most likely to have to the front, because it is the one they know or the one they never get wrong. For a sign-in screen that is usually the email address, then the password, then everything else.

The order also follows the conversation. Ask for the identifier first, because that is what the person typed last time and what the password belongs to. Ask for a name first and the person has to remember a fact about themselves before being reminded why they are here.

Labels sit above their fields, and a placeholder is never the only label. A placeholder disappears as soon as the person types, which leaves a field that cannot be checked, and a mistyped email address is the most common reason a sign-in fails. The Input component and the Form field component both carry a label for this reason.

• Most familiar field first, usually the email address
• Labels above the field, always present
• Placeholder as a hint, never as the label
• Password field last among the required ones

Note: A password manager offers to fill one field, not four. The fewer fields before the password, the more likely it is to be filled for you.

Keep one primary button and one alternative path

One primary button, labeled with the action rather than a generic word. Sign in is better than Continue, and Sign in is better than Submit, because the label stays the same everywhere the person might meet it. The Button component kind is in the palette, and the Call to action component from the reusable library is the styled version.

Then one alternative path, the route for everybody the primary button does not serve: forgotten password, or sign up instead. Put it below the button, in a smaller size, and give it enough contrast to be readable. Two secondary options side by side start to compete with the primary one, and the screen gets slower to read.

A Checkbox for remember me or for accepting terms is a third kind of control, and it is worth being deliberate about it. A checkbox that is ticked by default and unlabelled is a consent problem rather than a design problem, so give it a label that says what agreeing to means.

• One primary button, named with the action
• One alternative path below it, smaller but readable
• Checkboxes carry a label that explains the agreement
• A second secondary option is a sign the screen is crowded

Note: The mockup tutorial covers how the same button and label rules hold across a whole screen set, not just one form.

Add a helper text area for errors and hints

Error messages need a home before the first error happens. Reserve a line of helper text under each field and put the message there when the field is wrong. The area should be part of the layout from the start, so a form with no errors looks exactly like a form with errors, minus the text.

A field-level message says what is wrong with that field. A form-level message, in a Banner component above the form, says what is wrong with the request as a whole, such as too many attempts. Two levels of message are enough for almost any sign-in screen, and more is a sign the copy needs work rather than the layout.

• A helper line under every field, reserved from the start
• Field messages name the problem, not the rule
• A Banner above the form for request-level errors
• Hints and errors never appear in the same space

Note: Keep the message short enough to sit on one line at 375 pixels wide, or accept that it wraps to two and leave room for that.

Check the screen at 375 pixels wide

The last check happens on the narrowest phone you support. The frame inspector has an iPhone SE preset at 375×667, the width most likely to break a form, and it is worth adding that frame next to the 390×844 one and comparing them side by side.

Three things usually fail at 375. The helper text under a field wraps to two lines and pushes the next field down. The button label is fine but the button sits too close to the edge for a thumb. And a second link under the button ends up under the fold, so the person scrolls instead of signing in.

Read the screen top to bottom at that size, then check it with the error state. A form that fits when everything is correct and breaks when one message appears has a layout problem that no amount of careful copy will solve. The onboarding guide covers the other place where a first screen has to earn trust.

• Compare the 375×667 frame against the 390×844 one
• Error text fits without pushing the layout
• The button is reachable with a thumb
• Nothing important sits below the fold

Note: App Builder starts mobile frames at 390×844, so the narrow phone needs a preset change rather than a new frame size typed by hand.

A checklist you can reuse

• The screen has one mode, sign in or sign up
• The form sits in one vertical auto-layout container
• Gap and padding values match every other form
• Fields are in the order they get asked for
• Every field has a label above it
• There is one primary button and one alternative path
• Helper text areas are reserved under every field
• The screen was checked at 375×667

Common mistakes to avoid

• Two modes on one screen. A sign-in form and a sign-up form on the same screen split the reading. Pick one and link to the other.
• Placeholders as labels. A placeholder disappears the moment somebody types, so the field can no longer be checked. Put a real label above it.
• Errors with nowhere to go. A message that appears for the first time after a failed attempt moves the whole form. Reserve the space from the start.
• Two secondary options. Forgotten password and sign up competing with the primary button slows the screen down. Keep one alternative.
• Only testing at 390. The narrowest common phone is 375 pixels wide, and forms break there first. Compare both frames before sign-off.

Frequently asked questions

What is the best size for a login screen mockup?

Design on the device the product ships on, then check the narrowest one you support. App Builder opens mobile frames at 390×844 and has an iPhone SE preset at 375×667, the width most likely to break a form. The layout should be identical in both, with the smaller one proving it.

Should a login screen use a container or plain components?

Use a container with auto-layout on and a vertical direction, or the Form component kind, which is built for the same job. Set a gap of 8 and padding of 16 and the fields line up on their own. The mobile form guide covers the validation and empty states that go with it.

Do I need a different screen for signing up?

Usually yes. A sign-up form asks for different fields, often more of them, and a person on that screen is making a bigger commitment than one signing in. Two frames with a link on each keeps both forms honest, and the On tap go to setting in the frame inspector connects them.

Can I make the prototype let someone try the login?

Not as a working form. The prototype links in App Builder are set on the frame, and Present mode advances with the keyboard, so a walkthrough can show a sign-in screen followed by the next screen. It cannot take a typed password and check it. The prototype guide explains what a frame-level link can and cannot do.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.