The problem
The login screen is the first thing many users see, and it is usually the plainest page in a product. This was my first design study: making a login page feel welcoming without making it harder to use.
What I built
A single, fully responsive login page: a sign-in panel with a short welcome, a "Login Now" action, and "Login with Google" and "Login with Facebook" buttons, over a colourful background with custom fonts.
Decisions
- HTML and CSS only. No JavaScript, so the page is light and the layout carries the whole design.
- A frosted panel. The sign-in card sits on a 10-pixel background blur, so it stays readable over a colourful background without a heavy solid box.
- One color story. Buttons and highlights share a violet gradient (from #9181F4 to #5038ED), which ties the main action and the social sign-in options together.
- Three screen sizes, planned. Separate layouts for large laptops (up to 1366 pixels), tablets (up to 960) and phones (up to 500), so the panel stays readable and the buttons stay easy to tap everywhere.
- System fonts. The text uses the device's own interface font, which loads instantly and feels native on every platform.
The buttons are design only; the page does not sign anyone in. Its job was to teach me layout, spacing and responsive planning, which every project after it builds on.
Where it stands
Built in March 2024, my first published design ("Login Design, Vol. 1"). Live at logindesign.temrevil.com, source on GitHub.