@Haziq Fair enough :) I'm ok with the "or" barely being visible. Also, I adjusted the border on those inputs a tad. Tough balance as I don't want them to become to heavy but hopefully this is just enough to fix the slight blurriness.
What he's saying is the gray border on the input boxes is too light, around the corners it looks fuzzy. Also the white drop shadow is too visible in my eyes. Hope this helps.
I think if you decrease the opacity and/or darken the colour of the form's bg, the fuzzy top border of the inputs 'problem' would go away. I like the buttons, perhaps have the 'Connect' & 'w/' both be the same with or w/o text-shadow is all the same to me.
Padding on "full name" should be the same as "email address" I think... I'm not in love with the browny-grey background, but it's not bad. Those buttons and the navigation are beautiful, however!
@Sam Mularczyk Haha you mean you don't like that awesome uneven padding effect? :P ...the background color is an image. Looks a lot better when you can actually see that :)
Hey Josh, really nice work! A few things came to mind as I looked it over. Since you seem to be encouraging feedback, I figured I'd share.
Note: I didn't read through all of the comments before me. I'm phrasing these bits of feedback as "commands" i.e. "do this" rather than "here's what I would do" just to keep the sentence structure brief. (I feel like this disclaimer is almost necessary anymore, to avoid the onslaught of "dude, don't be so negative" replies. Anyway...)
1. Bold and italic "or" in the button well could probably be just regular, or light even. Feels over-styled as is.
2. "Connect w/ Facebook" why not just "with" or just plain "Connect Facebook." I do like the bold "connect" and regular "w/" though!
3. Field inputs: that extra bottom white border, outside the input... the one you lightened in a follow-up shot... feels unnecessary. Either that, or the additional dark gray inner-border is unnecessary. One of those should go. I'd say the white first though, maybe?
4. Consider trying italic placeholder text, which may look ridiculous, but it might be worth a look see. (Maybe I'm thinking of how italic help text, just outside the input, looks pretty appealing.)
I actually don't mind the 'or'. Visually, it creates a nice separation and makes it clear to the user that they should choose one or the other.
In regards to the 'w/' it doesn't bother me on the current site and I think it would be nice for consistencies sake to stick with it. Although, I'd like to see what it looks like without the abbreviation.
I really like the form fields and think the new, darker border works better. The only suggestion I can make is to possibly make the text in the input fields darker so it's easier to read. I'd also love to see the hover and action states.
I agree with @Jason Robb on the gray line beveled inside of the white highlight. I do think the highlight is necessary, so maybe it's a matter of lightening the gray bevel ever-so-slightly.
Other than that, I have no qualms with this shot. Or is perfect, as is the w/. I love the idea of shortening with (why have the unneeded letters). I've done it with a few projects recently and clients/users have seemed indifferent in its absence.
Great shot man, I really really dig it. This is a great looking UI element.
36 Responses (page 1 of 2)
Working on a few sign up form variations for MyEnergy
about 1 year ago
The fields don't work for me :(
Haven't seen the full design but the border makes them appear a little fuzzy.
Also, the 'or' is barely visible.
about 1 year ago
@Haziq Fair enough :) I'm ok with the "or" barely being visible. Also, I adjusted the border on those inputs a tad. Tough balance as I don't want them to become to heavy but hopefully this is just enough to fix the slight blurriness.
about 1 year ago
What he's saying is the gray border on the input boxes is too light, around the corners it looks fuzzy. Also the white drop shadow is too visible in my eyes. Hope this helps.
about 1 year ago
@David Bradley Ya thanks dude. Think you caught both of our comments after our edits. I hear ya.
about 1 year ago
Oops, haha, well looks like it's much better now, so good job!
about 1 year ago
I think if you decrease the opacity and/or darken the colour of the form's bg, the fuzzy top border of the inputs 'problem' would go away. I like the buttons, perhaps have the 'Connect' & 'w/' both be the same with or w/o text-shadow is all the same to me.
about 1 year ago
Awesome :)
about 1 year ago
Nice work!
about 1 year ago
Sexy buttons! The Facebook logo looks a little cut off at the bottom though: http://tmthy.me/GZ7X
about 1 year ago
Padding on "full name" should be the same as "email address" I think... I'm not in love with the browny-grey background, but it's not bad. Those buttons and the navigation are beautiful, however!
about 1 year ago
w/ YES!
about 1 year ago
I do want that divider ^ element to be slidable
about 1 year ago
Nice shot! Facebook button looks great in the dark background
about 1 year ago
looks pretty clean, love it :)
about 1 year ago
Great looking site, congrats!
about 1 year ago
lovely looking shot!
about 1 year ago
I like it.
about 1 year ago
@Sam Mularczyk Haha you mean you don't like that awesome uneven padding effect? :P ...the background color is an image. Looks a lot better when you can actually see that :)
@Andy Armstrong Slidable??? What do you mean?
@Timothy Achumba word. Looking into it now!
about 1 year ago
And thanks everyone. Love getting feedback.
about 1 year ago
Hey Josh, really nice work! A few things came to mind as I looked it over. Since you seem to be encouraging feedback, I figured I'd share.
Note: I didn't read through all of the comments before me. I'm phrasing these bits of feedback as "commands" i.e. "do this" rather than "here's what I would do" just to keep the sentence structure brief. (I feel like this disclaimer is almost necessary anymore, to avoid the onslaught of "dude, don't be so negative" replies. Anyway...)
1. Bold and italic "or" in the button well could probably be just regular, or light even. Feels over-styled as is.
2. "Connect w/ Facebook" why not just "with" or just plain "Connect Facebook." I do like the bold "connect" and regular "w/" though!
3. Field inputs: that extra bottom white border, outside the input... the one you lightened in a follow-up shot... feels unnecessary. Either that, or the additional dark gray inner-border is unnecessary. One of those should go. I'd say the white first though, maybe?
4. Consider trying italic placeholder text, which may look ridiculous, but it might be worth a look see. (Maybe I'm thinking of how italic help text, just outside the input, looks pretty appealing.)
Thanks for being cool! Great shot too!
Jason R.
about 1 year ago
I actually don't mind the 'or'. Visually, it creates a nice separation and makes it clear to the user that they should choose one or the other.
In regards to the 'w/' it doesn't bother me on the current site and I think it would be nice for consistencies sake to stick with it. Although, I'd like to see what it looks like without the abbreviation.
I really like the form fields and think the new, darker border works better. The only suggestion I can make is to possibly make the text in the input fields darker so it's easier to read. I'd also love to see the hover and action states.
All in all, it looks fantastic!
about 1 year ago
I agree with @Jason Robb on the gray line beveled inside of the white highlight. I do think the highlight is necessary, so maybe it's a matter of lightening the gray bevel ever-so-slightly.
Other than that, I have no qualms with this shot. Or is perfect, as is the w/. I love the idea of shortening with (why have the unneeded letters). I've done it with a few projects recently and clients/users have seemed indifferent in its absence.
Great shot man, I really really dig it. This is a great looking UI element.
about 1 year ago
Hawt! Nice job broski : ) Love those bttns!
about 1 year ago
Beautiful buttons.
about 1 year ago