How to design a simple login page on Figma

June 21, 2021

Login or sign in page is a page that you will see before you enter and using an app. A page where you type your email address and password and then the app let you enter. Now, I wanna share how I design a login page. A simple, clean, straight-forward, and user friendly login page with Figma. On this case, I’ll design a login page for dashboard website.

Defining the elements

Before start to making shape, or choosing colors, we must to define what will we include on the login page before designing it. A traditional login page at least contains two input field and one button. One email address field, one password field, and one sign in button. This method is commonly known and use for login.

  1. Email address field

  2. Password field

  3. Sign in button

  4. Forgot password link

  5. Register link

  6. Sign in with Google

  7. Sign in with Apple

Choosing layout, styles, and colors

I want to make a simple one. So, I decide to use 12-column grid layout and divide a page into 5-column on the left side is for the brand, for the logo of the app, and 7-column on the right side is for the form or where user will interact with.

using grid layout to divide the page

At the top is the title alongside the description below it. And then the Sign In with Google and Sign In with Apple buttons with their own logo next to the text. Below it you will find the form with email address, password, forgot password link, and sign in button with the same blue color.

the form

Outside the card, there is a register link to invite visitors to register if they haven’t yet. Why I place it outside the card? Because it is a sign in page where user’s main intention is to sign in, not to sign up or register. So the sign in form must draw the attention more than the register link.

Here you go, a simple login page design that are ready to implement. I hope it will inspire you how to design on figma. I designed not only this login page, but a whole dashboard pages, if you want to see it you can see it on behance or you can download it here.

Back

🙌🏼Share this

📋More articles

Tools that I usually used as a Web Developer

For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.

You can do these on Figma to work faster

Figma became popular these days to design a web/mobile user interface. That’s because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.

Kindle has changed my reading habits

Reading on a physical book and reading on a kindle give different experience. Those two things feel different when open the next page, highlights the text, holding it while reading, and so on. On this post, I wanna share with you what experiences that kindle will give to me compared to physical book.

Protect your form against spam bots

I was in the middle of embedding a third-party form on the website. The form snippet is just like the usual HTML form and the website is built using Next.js. At first, I thought it’s working well, fill the fields and submit it. But my team was told that we received various weird submissions with