Lets continue on this project more! I decided to change the colours and themes into a single UI design. I choose dark blue colour and planned to remove bright colours such as yellow, green etc which makes the user more distraction from the website (not suitable for ATM Simulation). So lets redesign the whole webpage frame by frame again

Devlog 10 - Frame 1 & Frame 2 & Frame 3 & Frame 4

First of all, i created a var css function of :root of colors i used in the website for making easy to reuse the color all over the website.

In All over the website, I changed the white background into dark navy blue colour and sky-blue colour for basic normal text. And as well as i selected some font from google fonts. And i added a font name ‘Inter’ to the body for making the default font-family thought out the webpage.

In frame 1, I broke one line text into two line text and also removed the black background into default website background. And also changed the default font-family into ‘Segoe UI’ font-family which i had connected from google fonts.

In frame 2, I made the letters into uppercase which made the website heading more attractive and branding look! And as well as i changed the font into ‘Space Grotesk’.

In frame 3, I added a card effect to the whole section with a slight  decreasing the darkness to the background colour. Changed the default input box colour into another colour that matches to the background and also given the colour to the border of input box when the user focus on that input box and also added :disabled condition to ensure and make identification to the user that it is un-editable by making the darkness in background colour of the input box.

And also i added a fixed margin between texts and input boxes. Then i changed the submit button’s background colour into the default colour of the normal text which i saved in the :root function with white text.

Btw, i also changed the text such as balance into initial balance and pin into security pin etc..

In frame 4, As per the feedback i found that i made a lot of spelling mistaken in this frame. So i changed them into correct. Then i added the same background that i used in the frame 3 for the card. Then i added a successful tick mark icon at the top with green background with only using div tag. Then i changed the heading to ‘Account Created Successfully’ with a line break at before the text ‘Successfully’ which i had added span tag between them to change the colour of that word into green which gives more branding feel to the user! Then i added another sub-text below the heading. Then i created two cards one with holder name and another with account number.

At last changed the animation that from appearing left and hiding to right into hiding and showing at right with ease-in-out function and also changed the animation time from 3s into 1.2s which made the animation more faster and furious!