For the past year, I've been working on a project that will be launching in the next few months. Leading up to that point, I will be posting snippets of the website, products and other branding materials.
This is my progress on a login form that will appear above an overlay.
First, welcome to Dribbble, Warren. Second, I like your design, but here are some tips:
+There is an uneven line-height in the small links, and it seems to make things go out of balance. This may be because they are so noticeable (perhaps need to be a lighter color) or because of the lack of context at the moment.
+ The separation line for registering feels very abrupt and again, very noticeable, and either eliminating it, making it smaller, or perhaps lighter would amend that.
+ You misspelled Register.
;) Enjoy your stay. I'm Patch, nice to meet you, you'll be seeing more of me around. (Also, I was kidding about the misspelling)
I really appreciate your feedback! I agree with every point that you've made. I've used #c9c9c9 for other separators on the website, so I will definitely use it here.
Looks good! One thing I noticed: "Forgot your password?" and "Not a Member Yet?" are both the same style, yet one is a label and one is a link. Not sure what the best way to address this would be, but might be something to consider.
I think the use of black in general is overpowering. For one, it's never good practice to use total black (#000) in design. Perhaps something like #444 may do more justice, but it's nearly mid-night and my critical thinking skills are defaulting, so I may be wrong by the morning. (Oh, and you can use @ handles to reply to someone, otherwise they won't get notified)
Flat design (human design) is more and more popular these days so its nice to go with it. I like the concept (hope its blurry only thanks to the resizing) :) But i have some small tips
1) I would like to add user feedback possitive/negative (wrong input etc).
2) Problem i see is that fact this is login field so the main attetion should be on the login? but you pay more attetion on the register thats is quiet problem. Bcs user will be confused. They will click on the register button instead of the login trust me.
Great catch @Dan Leveille! I'm thinking of a few options:
1) Entirely remove "Not A Member Yet?"
2) Make "Not A Member Yet?" be link to the same location as the register button
@Luboš Volkov Thanks! I love flat design, and I've decided to use it throughout this project. You can click the 2x link to see it larger.
- I'm planning on showing text-only error messages directly in the input fields, as I have done for my email subscription form.
- I see what you mean about the register button standing out more than the login button. Most likely, I'll wait to see user testing results before making a switch.
*Design Police Siren* Hold it there, mates! As far as I can remember, my work has always been 'flat,' I've just never had any interest, or at least not much, in skeuphormisms. But what is (I don't want to say trending) seeing a revival is just that, but we unknowingly call 'Swiss' design 'Flat'. We started a discussion of this at The State of Web Design if you want to join the discussion: http://branch.com/b/how-flat
Good stuff. I like to add rounded corners to my 'flat' designs, since it adds a more human feel. Same with the colors - lighter, muted tones make it feel less harsh.
14 Responses
Pro
Warren Baskin
For the past year, I've been working on a project that will be launching in the next few months. Leading up to that point, I will be posting snippets of the website, products and other branding materials.
This is my progress on a login form that will appear above an overlay.
4 months ago
Pro
Patrick Rogan
First, welcome to Dribbble, Warren. Second, I like your design, but here are some tips:
+There is an uneven line-height in the small links, and it seems to make things go out of balance. This may be because they are so noticeable (perhaps need to be a lighter color) or because of the lack of context at the moment.
+ The separation line for registering feels very abrupt and again, very noticeable, and either eliminating it, making it smaller, or perhaps lighter would amend that.
+ You misspelled Register.
;) Enjoy your stay. I'm Patch, nice to meet you, you'll be seeing more of me around. (Also, I was kidding about the misspelling)
Regards,
Patch
4 months ago
Pro
Warren Baskin
Thanks for the welcome, Patrick!
I really appreciate your feedback! I agree with every point that you've made. I've used #c9c9c9 for other separators on the website, so I will definitely use it here.
You almost scared me with the typo...almost haha
4 months ago
Looks good! One thing I noticed: "Forgot your password?" and "Not a Member Yet?" are both the same style, yet one is a label and one is a link. Not sure what the best way to address this would be, but might be something to consider.
4 months ago
Pro
Patrick Rogan
@Warren Baskin Sure thing!
I think the use of black in general is overpowering. For one, it's never good practice to use total black (#000) in design. Perhaps something like #444 may do more justice, but it's nearly mid-night and my critical thinking skills are defaulting, so I may be wrong by the morning. (Oh, and you can use @ handles to reply to someone, otherwise they won't get notified)
Cheers,
Patch
4 months ago
Pro
Joe Anderson
@Dan once he adjusts the strength of the login button, a light blue link should work fine, nice catch.
@Warren Welcome :) @Patrick caught most of it, I think login is nicer than log in.
4 months ago
Pro
Luboš Volkov
Flat design (human design) is more and more popular these days so its nice to go with it. I like the concept (hope its blurry only thanks to the resizing) :) But i have some small tips
1) I would like to add user feedback possitive/negative (wrong input etc).
2) Problem i see is that fact this is login field so the main attetion should be on the login? but you pay more attetion on the register thats is quiet problem. Bcs user will be confused. They will click on the register button instead of the login trust me.
Keep going would like to see more :)
4 months ago
Pro
Greg Dlubacz
welcome aboard
4 months ago
Pro
Warren Baskin
Great catch @Dan Leveille! I'm thinking of a few options:
1) Entirely remove "Not A Member Yet?"
2) Make "Not A Member Yet?" be link to the same location as the register button
@Luboš Volkov Thanks! I love flat design, and I've decided to use it throughout this project. You can click the 2x link to see it larger.
- I'm planning on showing text-only error messages directly in the input fields, as I have done for my email subscription form.
- I see what you mean about the register button standing out more than the login button. Most likely, I'll wait to see user testing results before making a switch.
@Greg Dlubacz Thanks!
4 months ago
Pro
Patrick Rogan
*Design Police Siren* Hold it there, mates! As far as I can remember, my work has always been 'flat,' I've just never had any interest, or at least not much, in skeuphormisms. But what is (I don't want to say trending) seeing a revival is just that, but we unknowingly call 'Swiss' design 'Flat'. We started a discussion of this at The State of Web Design if you want to join the discussion: http://branch.com/b/how-flat
@Luboš Volkov @Warren Baskin
4 months ago
Pro
Dominik Martin
Welcome aboard. Really nice debut.
4 months ago
Looks metro style ! nice, welcome ;)
4 months ago
Pro
Mike Busby
Cool shot, welcome to the site
4 months ago
Good stuff. I like to add rounded corners to my 'flat' designs, since it adds a more human feel. Same with the colors - lighter, muted tones make it feel less harsh.
3 months ago