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!
over 1 year ago
That is one beautiful piece of work. 20 hours well spent.
@Brian Lovin Thx man :)
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!
Looks great ! :)
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!
thx a lot @Guillaume Gaubert , @Adrien Rochet & @Aqib Mushtaq
@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!
Take the "f" out of here ;) http://cl.ly/1Y1n1I120u3x3u0j1b10
@Charles Riccardi Thx a lot man!
@Charles Riccardi Or use the font Klavika.
@Jeremy Sallée ✦✦✦ It was worth the time.
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!
@Mads E. U. Sorensen That's perfect man! Exactly the action I want to drive in! Facebook login! :)
@Jeremy Sallée ✦✦✦ lol, then it is perfect! ;)
I like shhhhhhh!
Love how light this feels. Great work
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
Lovely work dude! :) Great emphasis on Facebook sign in, subtle and effective!
Is it Shhhhh or shhh?
Shhhure is Purdy though.
@Jeremy Sallée ✦✦✦ Very clean! I love the design. That facebook login button looks great too!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter