Redesigning a Login Form | Full Process

We need to be able to improve on iterations of our designs. In this video, I try to improve on Thumblytics current login by re-creating. We use their new design colours to create a stronger call to action with bigger fonts and easier to use login design.

Youtube: Designing a Login Form

Included in this video are:

• Spacing, margins, padding for elements
• Icons, Logos and their use
• Font sizes and positioning
• Call to action buttons and secondary buttons
• Use of colour for focus and attention

Follow and support me:

Special thanks if you subscribe to my channel :)

• 🎞️ Youtube
• 🐦 Twitter

Want to see more:

I will try to post new great content every day. Here are the latest items:

• Adobe XD to Fully Responsive WordPress Site
• Adobe XD to HTML Full Process
• Full Tutorial on how to use SASS to improve your CSS
• Creating a Mobile Design and Developing it

Comments

[Ben Sinclair]

I watched the video and think that it's a nice visual improvement

• I love the chunky shadow
• everything's spaced nicely
• it's simple and doesn't try to do anything outside its remit

From a UX point of view I see a few problems with the version on the site at time of writing, which is close to the one you're looking at as the "before" state:

• there are no labels for the inputs
• the placeholders aren't close to accessibility standards in terms of text/background contrast, and are difficult for me to see even with glasses.
• the "--or--" divider is too low contast
• the error states don't convey any information apart from that something is wrong
• error state borders and messages are in a clashing colour

I have some comments on the version you mocked up:

The original expects an email address as the primary identifier, and yours asks for a username. In many systems these are the same thing, but in many other systems they're not. People can and do share email addresses ("[e-mail]", "[e-mail]").

This is confounded because you don't add any input labels. If my browser or an extension has pre-filled those fields and I'm not getting logged in, I don't know whether my password is wrong or if I've accidentally saved my email address instead of my username. The only way I can find out is to delete the text in both boxes, which is a potential pitfall. The "User" icon doesn't really make this any clearer.

You want a hover effect explicitly on the words, "click here". I'd steer clear of that, even to the point of avoiding the words in the entire sentence. "Click here" has no context for screen readers, for example.

Perhaps, "Forgot your password?" would be better? It has the added benefit of keeping the same pronoun as the sub-heading, which is "Sign in to your account". Mixing "my" and "your" in interfaces adds a level of confusion.

You add "Register" and "Back to home" buttons to the heading, which is nice, but this would probably require changing some routes. On the existing home page, what you have as "Register" is /accounts/signup, and is called "Get started". I think that part of a redesign would involve getting these things to be consistent, perhaps to something ultra-clear like "Create a new account" under /accounts/new. This isn't wholly part of a designer's job, but it's where talk between team-mates comes in :)

From the point of view of someone who would code this, I notice you do something very designer-y - you move things around by eye until you think they look good. That's because you've got an eye for it, and you know what whitespace looks pleasing, but it might not match up with the styles for the rest of the site. If you set "Login" as a form legend, or as a heading (say an h2, depending where this is in the flow), then the margins and padding should be consistent with those for an h2 in the rest of the site, otherwise styles will have to be tweaked on a per-component basis.

[Adrian Twarog]

Woah, this is an awesome reply, I love it. Thanks so much for taking the time to do this. I did a lot of design about 5 years ago, and now getting slowly back into it, Thanks Ben I'll keep these things in mind for future content :)