Background

The client needed a login page to replace their old one. The language should be only Bengali. The framework they were using had some constraints, and the developer who was assigned to the project was not aware much, about any more tweaking than necessary.

Apart from this I was busy with another project (in fact 2 other projects at a time) and had a very limited time to design and develop one for them.

The original login page is here below 👇

Solution

The initial approach was reusing any existing design for a quick execution. The design that I made earlier, and was used in several other projects, and is suitable for any barebone login page. I planned the existing contents and their whereabouts into the existing design and chose the typography necessary.

For the Bengali font, I am a fan of Siyam Rupali, but in this case, I avoided embedding a font into the CSS as the developer was not very comfortable with their framework. So I went with a Google Font for easy integration and the CDN support.

But I need a design motif that supports the Roads & Highway Department and has some motifs of Bangladesh as well. Instead of googling some inspirations I immediately thought of AI-generated images, and went to Bing AI. Then within some trials, I got my desired image and shaped the image into my design resolution.

I was happy with the combination, but the responsiveness was the issue. Hence I fixed the CSS and the design is ready.

With the same design, I suggested the other Auth pages like the "Forgot Password?" page as well. Here is the "Forgot Password?" page 👇