July 14, 2024

Focus On: Signup & Registration Page Design

There is no one-size-fits-all solution in the field of web design. This is true of all aspects from branding, layout, typography, and certainly interfaces.

Registration page design is a crucial component to driving users into a site. Whether they be signing up for an account on your task management system or new social network, the design techniques are mostly the same.

In this post I’ve outlined a set of common trends used in professional sign up page design. By focusing on usability and best design practices you’ll learn to craft impeccable registration pages that drive curious new visitors into any website.

Palatial Space for Content

If your signup page is dedicated to registration then you’ll want lots of space. Adding plenty of white space to the page draws attention to the largest and most prominent areas.

Oversized registration forms also work well since they tend to imply a sense of security. Larger text feels easily malleable and more comfortable to edit. Take for example the Big Cartel signup page.

big cartel signup page

Plenty of space is added to and around the input fields. Text isn’t as prominent but the space around the text really does stand out. Plus all of these elements are set against a neutral grey backdrop with dynamic form input effects.

If your signup/registration page is meant to focus on the form then don’t be stingy with space. Give it all the space it needs to flourish without making the form appear too complicated.

A slightly different example can be found on Mailgun which also uses white space but in a different context. The form fields are smaller but use accentuation through hover effects to keep attention.

mailgun brief page signup

It’s all still very streamlined and straightforward without much confusion. Keep in mind that making your form big isn’t the same as making a big form. You want plenty of spacious elements but not so many elements that visitors close the tab before finishing.

Progress Steps for Large Forms

In a situation where you do need to ask for lots of information it’s best to include progress steps throughout each page. This way visitors know it’ll be a longer process and they have visual confirmation with each step.

One of the best examples to illustrate this point is the Orankl signup page.

orankl signup form page

At first glance the form looks pretty simple: an e-mail and password. But right above the form is a 4-step process outlined by icons with captions.

Not every progress step design has to include icons but they help retain visitors for longer.

When tackling a multi-page signup it can be confusing if you don’t have a direction. These progress steps offer a sense of direction so users have an expectation of when they’re about to complete the form.

Security Checks

A more dynamic feature of modern signup fields is the automated validation. Usernames need to be a certain length, passwords need to have certain characters, and e-mail addresses need to look real.

All of these things can be checked after the form has been submitted. But it saves time to handle this on the frontend using JavaScript. Many registration pages check e-mail syntax using regular expressions(regex) and check confirmed passwords by comparing the inputs.

envato signup form field

Some pages go a step further to add really cool password strength meters. The example on Envato’s signup page is great because it’s simple yet practical.

Four small bars align beneath the password field and fill up as the password becomes stronger. The color also changes from red to green as the password moves through heightened levels of security.

MailChimp’s signup page uses a more exotic style of secure password detection.

mailchimp security password

In this case you’ll notice a small bulleted lists of requirements that every password should have. As the user enters each character the list auto-updates to hide requirements that have been fulfilled.

It’s a damn impressive feat of user experience design which I’ve never seen on any other website. Many password fields have requirements but almost none of them update in real time.

MailChimp’s ingenuity is just one example of what’s possible when you integrate security concerns with UI design.

Optional Social Signup

If your site offers OAuth connections you should include icons or buttons to link with other profiles. This is why you’ll often see “connect with” links on registration pages featuring icons to Facebook, Twitter, Google, and other common sites.

Some websites like Product Hunt don’t even offer a regular signup process. They force you to create an account through an existing service like Twitter. I’d say this isn’t ideal and if possible you really want to make social signup optional rather than mandatory.

social oauth connect

Take a look at the Gengo signup page which design-wise looks fantastic. It keeps everything blocked together in one location with only an e-mail and password requirement.

Underneath the regular form are two buttons for signing up through Facebook or Google. Since there’s not much color elsewhere on the page these buttons are quite recognizable to their respective brands.

This technique can be contrasted with a more blended style like you’ll find on Parse.

parse signup connect

This page relies on shades of blue including small social icons beneath the form. Since each form field uses a blue icon it’s easy to skip over the social connect buttons.

Contrast should be used if you want these buttons to stand out and be used by a wide range of visitors. You may prefer to have these buttons settle into the background or not even include social signup at all. It’s really just another technique for driving people into a site through the quickest means possible.

Recognizable Branding

A good logo or identity graphic can really help your signup form stand out against all the others. While this technique leans more towards the side of vanity it can make a real difference.

When a website is recognizable it tends to capture attention as it appears over and over again. Even if people aren’t interested in your product they’ll have a moment where they mentally recognize the graphic or logo.

This is why targeted graphic design techniques can improve a rather dull signup experience.

vimeo signup form ui

The latest Vimeo signup page uses a large vector background illustration. At first glance it seems like random nonsense but with a closer look you’ll notice some key Vimeo features.

First is the large video player over on the right-hand side. Some of the little spirit creatures are seated on a sofa watching the player. But more interestingly is the blue door in the way back with the Vimeo “V” radiating light.

Each of these features may be quite subtle but they add emotion to the illustration and to the overall page dynamic.

tumblr signup page scroll effect

Tumblr’s signup page recently got an overhaul to include some parallax features. As you scroll through each panel small bits of text explain how Tumblr works and why you should sign up.

The whole registration page behaves like a small tutorial into the world of Tumblr. It familiarizes you with the logo, color scheme, and even the dashboard interface. This could be a little overboard for any new social network but the presentation is flawless & the design works exactly as intended.

Your Own Sign Up Forms

Creating your own registration page from scratch is exhilarating – but it can also be stressful. The best way to get started is by analyzing other pages to see how they function. Remember that user experience comes first and your job is to craft a design around a UI that almost involuntarily drives visitors through the registration process without a second thought.

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *