<?xml version="1.0" encoding="utf-8"?>

My goal was to create a login experience that feels clean, intuitive, and trustworthy. We've all used clunky forms, and I wanted this to be the opposite of that. The design is inspired by the familiarity and clarity of iOS, focusing on readable text and a simple path forward

The real value is in how the form communicates with you. You get instant feedback as you type your email—a green checkmark for success or a red icon if something's wrong. This removes the guesswork and helps you fix mistakes before you even hit submit

For the signup password, we're showing the rules right up front. As you meet each requirement, like adding a symbol, the list updates in real-time. This turns a potentially frustrating task into a simple checklist

Ultimately, every choice, from the eye icon that lets you double-check your password to the smooth animations, is about building confidence. It’s about making sure the very first screen a user sees is helpful, respectful of their time, and works for everyone

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


awesome work mate!


The micro animations are so fun, Suren! How did you build this?

It’s probably just me, but I’m not familiar with your hide and unhide password icon. I usually see an eye open or closed, and its diagonal line looks a bit like a pirate eye 🧐

The circle checklist gets slightly cut on the bottom right when it turns green to mark a met requirement. That looks like `overflow: hidden` issue in web term. Matching the circle’s dimensions between states, or giving the container a touch more room with a consistent min-height and a little padding, should prevent the cut.

Looking forward for your Test Project 2!


9 Claps
Average 4.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>