Sign-in page UI designs
When you download an app, the first screen that you usually see is a sign-in page. And most of the time, the user tends to judge the app based on the sign-in page. So, it is really important to create a simple yet an intriguing sign-in page.
A couple of days back, I started creating an app and this made me explore different sign-in page options. I found some, I created some and finally I ended up picking one. And I realized I did not find any article that features different sign-in options and I figured I would go about writing about it and designing the UI animations. I also named them to add a little fun quotient to it.
1. The basic sign-in
This is the most basic sign-in page. It is universally accepted by users. It has a simple UI of just the username and password box with a sign-in button. The boxes have an inner shadow and the button is indented or has an outer shadow.
2. The comment sign-in
This is something I found on one of the apps and loved it. I think it is a wonderful design. Something we haven’t seen common. When clicked on the SIGN IN link, a modal window opens with the username and password boxes. Also, there are small icons by the side to depict the username and password visually.
3. The simple sign-in
Very simple yet very classy. This sign-in screen is adopted for cases where there is a bright background, a blurred picture background or anything heavy that needs tuning down. It has simple white lines for typing in the username and password and a rectangle box with strong curved edges for the button.
4. The bubble Sign-in
Yes! I was thinking of different sign-in options and this concept just popped up in my mind. It replicates a bubble as you can see and I think it would be a fun way to sign-in. I would really make the transition from a bubble into the boxes as smooth as possible. In this gif, when the user clicks on the ‘+’ button, the username and password boxes open up. When the user clicks on either of the social network login, it either takes you to a different page or replicates the ‘+’ button’s action.
5. The switch button sign-in
I am so going to use this sign-in in one of my apps. I am proud of coming up with this design. Although, I do think that the button should end right before the sign-in button is pressed. So, the way this works is, the user enters the username and drags the white knob to the right, enters the password and drags it to the right to sign-in.
6. The android sign-in
This of course as the name states is replicated after the android lock screen. The user enters the username and password and slides right to sign-in and slides left if he has forgotten the password. It is as simple as that but yet unique for a sign-in screen.
Please pardon me for using an online gif maker instead of AfterEffects. I recently made the change from Windows to Mac and I don’t have AfterEffects or Premiere Pro on this system yet. Thanks for understanding.
If you like the sign-in screen UI designs, please recommend this post and leave any comments below.
You can reach me at pavithra.aravindan@gmail.com
