[Beginner] How to create a simple “sign in” frontend using reference

A step by step tutorial on how to create a simple “sign in” UI with a reference

Content

1. Introduction
2. Result demo
3. Prerequisite
4. Step by step guide
5. Conclusion

Introduction

Web development is easy to learn, but hard to master. If you are a beginner, you might find yourself struggle to create even the simplest web UI, despite all the effort watching online tutorial. It is because web development is a skill that require hands-on practice, lot and lot of practice. If you want to get good at it, you need to do coding practice. One practice I would recommend is finding a UX/UI reference you enjoy, and then try to code it yourself, and see how close you get.

In this article, I will pick one UI created by UI/UX designer (in “Daily UI Challenge”. If you want to know what it is: https://www.dailyui.co/) and try to create a web frontend with it. I will show you step by step how I approach the problem and create the web UI from scratch.

The Design I picked is by @Dumma Branding, this is the original design. It is a very clean, elegant and straight forward sign inUI. (https://dribbble.com/shots/2292415/attachments/2292415-Daily-UI-001-Day-001-Sign-Up?mode=media)

I will create this piece without using any framework or frontend library (such as bootstrap), as one tendency I saw beginner have is to rely on the component/UI element offered by the library, but end up not knowing how to shape them into their desire form.
It is never harmful to learn more CSS. You will be surprised how many component (such as card, carousel, button) could be recreate with pure CSS

Result Demo

I have added some animation and my own interpretation on the design. You can see the completed code on codepen: https://codepen.io/josephwong2004/pen/OJXaogj?editors=1100

Prerequisite

• Basic knowledge on HTML and CSS (I will use some SCSS as well)
• Text editor of your choice (If you don’t have, codepen is a good idea)

Step by step guide

Step 1: Quick draft

It is my habit to make a very quick draft on the design I am going to code, in order to better understand what I am dealing with , and have a better understanding on how I should put each of my component.

It is a relatively easy UI, there are only two layer:

• Background layer, with all the colorful ball
• Card layer, with the login input field and button

The background layer is more free flow, while the card layer is very symmetrical. You can see I draw a center line, which perfectly cut the “register” and “sign in” button. The card also drop a shadow to the background (which I am too lazy to draw)

One more observation on the design is the use of all CAPITAL letter, and a san-serif font type. It add more modern feeling touches to the UI. Also be aware of the color in the design, the font color is in a grey tone instead of black.

Step 2: Prepare resources

The next step is to gather the resources we need to code this piece of UI. As this UI don’t have any images, we only need to figure out the font family and color used in the design.

For color is easy, you can use any graphic software (or chrome plugin) to extract the color code from a picture. To save us some time, I have already prepare the color palette used in the design:
https://coolors.co/e15866-f5a900-06b7aa-cd67cc-e5e6e9-707070-2e3c55

While for font, there is no easy way to identify a font without a specification. I sometime use google font and select the filter I want (for this case, san-serif) and try to locale a font that look similar to the design. I end up choosing Open San (Light 300)

With the resources all set, let start coding!

Step 3: Create the background (Static)

First of all, let set up our project with all the font, color and sizes, also basic style that apply to everything

I highly recommend using a CSS preprocesser (such as SCSS or SASS, tutorial here), as they provide convenience feature like variable, mixin, better layout and e.t.c)

SCSS for basic setup:

Let explain it a little bit, the first line “@import” is for importing the font “open san” to this project. While

*, *:before, *:after { box-sizing: border-box }

set everything to use border-box sizing (as I think it is way easier to layout the design using it) The rest is size and color, we also set the default color and font size in body.

Now let create the basic background. (we will modify it later to make it animated, but for now, let start with the basic) The background is simply grey background color with 4 different sizes ball in different color, overlaying on top of each other. Let try to fill in the basic first. (we won’t get everything right at the first time, but it is a good starting point)

For the CSS:

You may have notice the use of percentage in positioning, it means the position will change on window resize (as the parent div, “background”, is having the same size as the window). It is acceptable for our case as we are going to animate the background later. If you are looking for a static background with no changes on proportion, do not use percentage.

Okay, now we have the basic background, let start working on the card.

Step 4: Create the card layer (container)

Now for the card, let start with the container. Now, since the card container is holding a sign up form, which require enough space to allow user to type in their information, we need to set a minimum width and height for it. While the card is allowed to grow when window size get bigger.

With a combination of min-height/min-width with fixed pixel value, and a height/width with percentage value, we could easily achieve this behaviour.

In addition, let not forget to give our card container a shadow, and rounded corner.

For the HTML, we only need to add one div with class “card” (inside body)

<div class='card'></div>

In order to make the card center in both x and y axis, we could use the flex property of CSS in the parent of it (body). by adding:

.body {  
  ...
  display: flex;
  align-items: center;
  justify-content: center;
}

We tell all direct children of body to center vertically and horizontally within it. The balls won’t be affected as we defined the top/right/left/bottom position for them.

You can see the rest of the CSS for the card here:

we might change the size later but it is good for now!

I have modified the background a bit

Excellent, let add the detail in the card for next step.

Step 5: Add the card input detail

The next step is ti create the sign in form inside the card. Let start with the title and the input.

The form is very simple, there is a padding on the card surrounding the form, we could use a flex container and each component (title, input, “forgot password”) is a row of the container.

For the input, we will apply a little animation to make it response to user interaction. On user clicking the input, we will change the color of the input border line and the label, also move the label to top left a bit with decreased font size, like so:

In order to achieve this, we will use <label> element and the CSS selector input: focus + label. Be aware this selector only works for label element immediately after input element.

The complete style for the html and scss for the form as follow:

Now we have our login in form and the basic, let add the button to the form to complete it.

The button should always be at the bottom of the form, so we could use absolute positioning. The two buttons each talk up 50% of the “button bar”.

Okay, the static UI is completed now. Let add some animation.

Step 6: Animate the background

To make thing look more interesting, let also make the background moving using some animation.

In order to create some dynamic in the background, I want to make the 4 balls in bounce off the window randomly, and overlapping with one another. In order to make ball “bounce” when it hit the window, we could make use of viewheight and viewwidth property in CSS.

Since the whole screen is 100vh in height and 100vw in width, the total distance each ball need to travel in x and y direction is 100vw - size and 100vh - size respectively:

@keyframes ball-moving {
 100% { transform: translate(calc(100vw - #$size}), calc(100vh - #{$size})}
}

The only problem is, if we make the ball to travel in that way, the ball always end up in the bottom right corner, then back to top left corner. It is still “bouncing”, but not in an interesting way. Instead, we would need to separate the x and y direction of the translate, and then apply them in two different div, the ball container and actual ball, each with different animation speed.

Reference: https://css-tricks.com/bounce-element-around-viewport-in-css/

We would need to modify the ball a bit, as well as adding the animation. I used mixin here to help me create multiple keyframe more effectively.

HTML:

SCSS:

The reason for giving each keyframe an id is because each keyframe should have a unique name.

Step 7: Final polish

Our sign in page is almost completed, let add some more polish to it for better user interaction.

• Sign up and register button transition

• Forgot password transition

And then bring us back to our demo. Our frontend is ready for further coding (perhaps logic to actually login user?)

Conclusion

This is a simple and yet very fun piece to work with. Making it doesn’t involve any complicated style or logic, just observation and planning. I strongly suggest you to try it yourself as well if you are into frontend development. And if you enjoy this article, feel free to leave a comment!