I've literrally spent 20h on that damn login popup... Such a small element, but so important at the same time. Any feedback to make this better is welcome :)
For all the picture haters out there, here is a full snap
Thx a lot to Zulal for the really usefull feedback and patiente!
This is beautiful. I love that transparent plastic element around it, makes it like a VIP pass.
All the elements in the inside are clear and make the overall process clear. Great job!
I really like it from a UX point of view. Details are good too.
1 - I didn't measure the alignment of the "Sign in shhhh" text, but it seems to not be centered.
2- Sign in with Facebook button can be improved. The "f" text doesn't look like the typeface Facebook uses. Try to create a "f" shape that is more identical to the original brand. I would also capitalize the "f" from Facebook from "Sign in with facebook", would be "Sign in with Facebook".
3 - The selected input field obviously does a good job at focusing the users eye, however I feel that the innershadow kills the effect. The outerglow of the mini "mail" icon also doesn't look good. I would completely remove these effects.
4 - Create a shh account should have more focus. I would make it a button like "sign in" on the right, however with less focus, because obviously the "sign in" button in this case is more important than the "create an account". "Forgot your password" should also be better placed, I would also increase the size of the font.
Obviously you don't need to follow my recommendations, I'm just trying to help you since you wanted feedback. :) Keep it up!
@Eduardo Santos Hey man, thx a lot for the feedback! I agree with you for step 1, I just quicly changed company name to shhhh for snap and maybe didn't perfectly centered title. I agree with step 2 and will try even harder to get that DAMN f better (so harddd..).
For step 3 I tried without the inner shadow and it looked kinda dull and not as nice than with inner shadow.
Actually for step 4 I can improve font size, but won't drive more focus to the account creation because our main goal is to drive facebook signups (I guess you can see that in the design :)
Anyways I will keep all in mind. Thx for taking the time to give feedback man!
Looks awesome dude. My only critique would be, that the facebook button seems - with no exception - like the most important part here. It sort of weight out the rest of the visuals.. like the primary call to action button.. And im not sure its that important? Maybe tone it down a bit, (how the hell do you tone down a facebook-blue, yeah) if you want the "weight" of the objects to be more equal.
Seems that you don't want people to sign in with twitter or register here but to use facebook login. So much accent to facebook button now... I would make that social button near each other and make register fileds to stand out more.
I would write "Sign in" in the right bottom button instead of log in - there should be the same text on the bottom button as in the header. And I would make that button bigger and more obvious. Just compare how bug is login with facebook and register button...
Good luck! Though the usability is not the best now but the design of the controls is great!
@Tanya Vovchek Thx for the comment and taking the time to give feedback. I will put the same text everywhere and change the log in one. For the rest it's fine like this. I want to drive more facebook sign ins than the rest
27 Responses (page 1 of 2)
I've literrally spent 20h on that damn login popup... Such a small element, but so important at the same time. Any feedback to make this better is welcome :)
For all the picture haters out there, here is a full snap
Thx a lot to Zulal for the really usefull feedback and patiente!
about 1 year ago
That is one beautiful piece of work. 20 hours well spent.
about 1 year ago
@Brian Lovin Thx man :)
about 1 year ago
This is beautiful. I love that transparent plastic element around it, makes it like a VIP pass.
All the elements in the inside are clear and make the overall process clear. Great job!
about 1 year ago
Looks great ! :)
about 1 year ago
great work++
about 1 year ago
I really like it from a UX point of view. Details are good too.
1 - I didn't measure the alignment of the "Sign in shhhh" text, but it seems to not be centered.
2- Sign in with Facebook button can be improved. The "f" text doesn't look like the typeface Facebook uses. Try to create a "f" shape that is more identical to the original brand. I would also capitalize the "f" from Facebook from "Sign in with facebook", would be "Sign in with Facebook".
3 - The selected input field obviously does a good job at focusing the users eye, however I feel that the innershadow kills the effect. The outerglow of the mini "mail" icon also doesn't look good. I would completely remove these effects.
4 - Create a shh account should have more focus. I would make it a button like "sign in" on the right, however with less focus, because obviously the "sign in" button in this case is more important than the "create an account". "Forgot your password" should also be better placed, I would also increase the size of the font.
Obviously you don't need to follow my recommendations, I'm just trying to help you since you wanted feedback. :) Keep it up!
about 1 year ago
thx a lot @Guillaume Gaubert , @Adrien Rochet & @Aqib Mushtaq
about 1 year ago
@Eduardo Santos Hey man, thx a lot for the feedback! I agree with you for step 1, I just quicly changed company name to shhhh for snap and maybe didn't perfectly centered title. I agree with step 2 and will try even harder to get that DAMN f better (so harddd..).
For step 3 I tried without the inner shadow and it looked kinda dull and not as nice than with inner shadow.
Actually for step 4 I can improve font size, but won't drive more focus to the account creation because our main goal is to drive facebook signups (I guess you can see that in the design :)
Anyways I will keep all in mind. Thx for taking the time to give feedback man!
about 1 year ago
Looks great!
about 1 year ago
sexypixels.
about 1 year ago
Take the "f" out of here ;) http://cl.ly/1Y1n1I120u3x3u0j1b10
about 1 year ago
@Charles Riccardi Thx a lot man!
about 1 year ago
@Charles Riccardi Or use the font Klavika.
@Jeremy Sallée ✦✦✦ It was worth the time.
about 1 year ago
So clean!
about 1 year ago
Looks awesome dude. My only critique would be, that the facebook button seems - with no exception - like the most important part here. It sort of weight out the rest of the visuals.. like the primary call to action button.. And im not sure its that important? Maybe tone it down a bit, (how the hell do you tone down a facebook-blue, yeah) if you want the "weight" of the objects to be more equal.
But it really looks great!
about 1 year ago
@Mads E. U. Sorensen That's perfect man! Exactly the action I want to drive in! Facebook login! :)
about 1 year ago
@Jeremy Sallée ✦✦✦ lol, then it is perfect! ;)
about 1 year ago
I like shhhhhhh!
about 1 year ago
Love how light this feels. Great work
about 1 year ago
Seems that you don't want people to sign in with twitter or register here but to use facebook login. So much accent to facebook button now... I would make that social button near each other and make register fileds to stand out more.
I would write "Sign in" in the right bottom button instead of log in - there should be the same text on the bottom button as in the header. And I would make that button bigger and more obvious. Just compare how bug is login with facebook and register button...
Good luck! Though the usability is not the best now but the design of the controls is great!
about 1 year ago
@Tanya Vovchek Thx for the comment and taking the time to give feedback. I will put the same text everywhere and change the log in one. For the rest it's fine like this. I want to drive more facebook sign ins than the rest
about 1 year ago
Lovely work dude! :) Great emphasis on Facebook sign in, subtle and effective!
about 1 year ago
Is it Shhhhh or shhh?
Shhhure is Purdy though.
about 1 year ago
@Jeremy Sallée ✦✦✦ Very clean! I love the design. That facebook login button looks great too!
about 1 year ago