Today I want to do something different and share with you a step by step guide on how to design a nice, converting and hierarchically correct login form. Let's begin!

Step 1 - what are we going to do?

A form, and especially the button are two very important UI elements. They're fundamental to most of our work. This is why it's important to do them right.

Step 1 - take a step back

Many designers jump right into it. They draw some rectangles and add some fonts, pick the spacings and the form is done. I think there is a better approach.

Start by asking yourself how many logical groups does this form have. How many mental steps for the user?

Are you ready for the next step?

Step 2 - Hierarchy Strips

The next step (even before picking fonts and colors) should be to define hierarchy.

We have exactly THREE main groups here that should be treated individually. But how to do it?

Well here's where rule of proximity comes to play because...

Step 3 - set a grid and divide

When setting the spacing start by always DEFINING your grid next to your designs - it's often 8-point.

Now use grid-based proper spacings to clearly separate our three groups. We are using the blue 24 point space for that because it's the largest margin we have. It only exists between those three main groups, nowhere else.

Step 4 - pick the fonts

Then you can pick the fonts. Or rather a font, because using more than one in a design like that shouldn't be attempted by people still learning design.

Pick ONE, sans-serif font.

Then pick a maximum of 3 sizes and/or 3 styles. That's more than enough and consistency is key.

And if you liked this quick tip email, make sure to follow me on Instagram and Twitter as I share more tips like these there EVERY DAY :-)

Follow on Instagram

Follow on Twitter

🚨 And one more thing...

Today at 5:15PM CET, on my YouTube channel I'm premiering a new video on the future of work.

There are some big changes coming to the industry and I believe it's really important to be aware of them!

Join the premiere to also get a 50% off code for my Ultimate Portfolio Bundle - I will be sharing codes in the chat.

Watch the video

That's it from me Today but ...

... obviously have a beautiful day! ❤️

0 comments

My first completely FREE video course!

See all posts from Hype4Academy