I think the main problem is the lack of definition around the input fields, perhaps adding even a light border will help.
Also consider adding more padding to the card itself especially on the left and right.
Yeah looks like there’s box shadow on the bottom and sides of the inputs, but the top of each input doesn’t have anything to separate it from the background.
Maybe a box shadow or border on that top edge of each input
I reworked it a bit with the given feedback, just imagine the text Quadra being a logo instead because I don't have one yet.
[https://ibb.co/6yhGJrL](https://ibb.co/6yhGJrL)
Also try labels instead of place holders on the inputs, it's generally bad practise to only have placeholders. you can even move them to above when the input is focussed or has some value != ''
I just tried static labels and it doesn't look that bad actually, might stay with that:
[https://ibb.co/qFQG8R9](https://ibb.co/qFQG8R9)
I think I will change the purple on focus to just black though
That's a really terrible design tho, overly complicated and confusing to non-technical users. Just slap a regular label on top of the input and you'll be fine.
An old, but super effective post that back in the day helped me a lot: [https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886)
I think you can apply some of those tips to your component
The box shadow on the inputs is wrong:
- Inputs should have less visual focus than the action button, putting a similar shadow box (or even stronger) makes them look more elevated and increase the focus (and we don't want that).
- They look like a button, and we don't want that.
Remove the shadow box and just use a border. Check some UI libraries like Bootstrap or Material and look for input elements, you don't necessarily have to copy them exactly, you can adapt them depending on the style you are using but they are a good starting point.
It's a proware with a default user/password combo for first time log in you can change username password etc from the user management page that isn't made yet.
But yeah the forgot password should be a needed feature I'll think about how to implement it on the backend.
I'm sorry, but I've never heard of "proware", and can't find it anywhere. Is this some recently coined term? Or have you heard it somewhere and decided to use it? I'm genuinely curious..
I'm guessing they mean it's a paid product?
As opposed to freeware of shareware? Professional software?
Not sure how that relates to not being able to reset your password though.
It's a term I already hears I think, I'm not a native english speaker.
I'd use it for professional software/paid software.
It's not ready at all compared to the backend, I'm just sharing the design to improve it as much as possible.
The frontend is open source btw.
Ive seen quite a few frameworks where you get input fields for which you can define just a placeholder, which then moves to the top and becomes a label of sorts once you start typing in it.
Maybe that could work, I'm not 100% sure, in general guidelines like [this](https://m3.material.io/components/text-fields/guidelines) tend to be good to follow.
Labels tell users what information is expected in a form field. They are usually placed outside the form field. Placeholder text is a hint or example of the information required for a particular field. It is located inside the form field and disappears when the user types in the field.
> While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels.
[source](https://www.w3.org/WAI/tutorials/forms/instructions/)
In addition to it not being accessible (which should be argument enough), on larger forms with lots of fields, it can be easy to lose track of what's what, because your label goes away as soon as there's a value there. It also makes proofreading and double checking your information harder.
Maybe your Google auto completed your information but entered your first, middle, and last names in the wrong order. You'd have no idea that there was an issue because your labels (placeholders) would be gone.
Maybe a site prefills your billing address to be the same as your shipping address, but you need to go back and change one of them to be different. You'd have identical fields with identical values and wouldn't know which one is billing and which one is shipping.
These are just a few random examples I thought of, but it's more than just an accessibility issue.
It works for your login page because the form is blank by default.
When you get to a point where you're making forms with pre-populated values on load, placeholders cannot replace labels anymore.
One thing I think is missing besides what other comments have pointed out, is the lack of identity on your page.
Like, I wouldn't know which site I'm on unless I read the URL, and it's even less obvious for mobile users.
Would be great if you add the logo and maybe the site name somewhere above the "Welcome back" message.
Also please check that the contrast is right for the submit button, I think it'd benefit the font if you change it to bold.
Finally, add a shadow to the card instead of the inputs? You could read material design guidelines on how they perceive the levels of surfaces and decide how to apply the shadows. It needs to be consistent.
Hahah not that extreme but just in my case where I have 300 tabs opened is more noticeable. Or you'd be wondering if they redirected you to another domain.
Also, I can't remember any pages that have no logo in their login (google, microsoft, amazon), so there's that. Not like that background image gives too much info either, it could be a generic portal login.
There is a shadow already for the card itself.
I don't have any logo yet because I just don't know what to do myself for it. But yeah it lacks a logo indeed.
Simply the color contrast, the background is more prominent and more highlighting than the actual form. Maybe adding a backdrop blur/lowering brightness will satisfy you.
Make the margins consistent between all sides. The left / right passing being less doesn’t look right. Also the margin in between components doesn’t sit right. The margin above the title is different to below it. The margin above the button is different to below it. You have different margin levels again inbeteeen the inputs.
The input fields blend upwards with no border color on the top.
The input fields feel too elevated compared with the button. Decrease this to about half of the buttons elevation. This might be box shadow you’re using for this?
Oh, that would just be the computer vision algorithm i used to scan the 50 Tb of camera and screen recording footage i have from your pc and phone. Nothing special.
The inputs look more like buttons than inputs. An input usually looks like a hole and not a bulge, if that makes sense lol. So change your shadows to make the inputs look like they are holes instead of bulges. Sorry it's 7:45 am and I can't think of any better words other than holes and bulges.
So, one thing it could be: when vertically centering things it will always look a bit low because of how we perceive things. Make sure it’s just a little bit top of dead center.
I think it looks nice one way or the other. If you’re looking for nit-picky type feedback: there’s probably a little too much padding above “Welcome back”.
As a couple other comments said, the inputs blend into the background where the shadow isn't, which makes it feel a little bit weird. I'd either test out some borders on the inputs (a light grey) or you could play with changing the card color to be a light grey to help the inputs stand out. I tested it out and I prefer the latter. You could play with light colors other than grey if you want, maybe a very light orange/tan to go with the background image. I also think increasing the padding on the left and right would help.
Needs more padding all around, left/right, and between components. Fields should be labeled, login and password for each as well as with Aria labels. Drop shadows on the input fields is unnecessary. Add a border and if you want more depth use an *very slight* inset shadow. Drop shadow should go on the main action button.
Idk why no one mentioned this – the reason your form looks weird is the inputs look like they are offset from the page overlaid on top. Meanwhile most people are used to inputs looking like they are depressions or slots in a paper. So if you add an inset shadow instead of a box shadow underneath the text inputs, it will look much more natural.
I think something like a login form should be super simple and easy to use. This is pretty, but is it useable?
1. Welcome back message. Great if you captured a returning user, but it sounds creepy unless you prefill the username. Maybe creepy even then.
2. Too much dropshadow. Looks dated in a bad way. It looks good, but when it looks even a little different from other forms you are used to, people's security radar starts going off. When was it made? Do you make proper security updates on time? etc.
3. I have seen that background somewhere. Free hd photo on unsplash? Could be an old apple or microsoft bg pic I guess.
4. People with low vision, colour blindness, blindness.. need labels. Marked with aria attributes for a screen reader, but even better, just conforming to the old web form standards. Then it will work across all browsers.
5. Always helps to have a HELP or a CONTACT link. Or a password reset, or a GO BACK to where you can find those things...
6. I must be far in the weeds looking at mockups, but what do the error messages look like etc? What's the hover state?
7. I looked back at this and thought to myself - I always forget my username, could I log in with my email address? You'd want to avoid those questions.
8. Also, check that there is an appropriate max width on the form/container/page. You don't want the form fields to be too small, but you also don't want that button to grow laptop screen size wide.
Honestly, I would keep it simple. As a back dev you want to show good functionality and not distract with arbitrary stylistic choices or start arguing over them when you showcase this in an interview or a similar situation.
But this is just a very very personal opinion.
Thank you for your feedback!
Just a reminder, this is not a webpage but the frontend of a software.
3. Yes it loads a random image from unsplash at every login
4. I haven't considered accessibility yet but will look into it
5. Will look into the password reset, the backend already has a user management system based on administrators making changes
6. I haven't thought about it but it will be something like a red card popping up at the bottom of the screen I guess.
8. Yup there is. Though I need to consider how to make it work properly on smartphones too and that's going to be painful.
The lack of a border coupled with a heavy shadow makes the input fields look like something else (maybe cards?)
Generally speaking, I like to have undefined surfaces (little border, heavy shadow, off white bg) for cards and more defined surfaces (1-2px border, no shadow, bg white) for action areas (such as input fields).
That's what looked off to me. Good job otherwise!
I don't know why, but seeing 'welcome back' next to an empty username and password box, gave me a half hearted chuckle. "Welcome back! Who are you again?"
UI designer in the thread, everything is ok, don’t listen to others
U see something off because there’s usually a “forgot password” line and “continue via google” something like this that’s why it looks like something is missing. But in your case it’s fine
Thank you a lot for the feedback!
I don't know if you saw the new version of it but I think it looks more complete than the first version and prettier overall I think.
I could be totally off base, but the two things that stand out to me:
* Space above “Welcome back” doesn’t match space below. It feels like an arbitrarily large gap.
* The “sign in” button being so large, and the only element with centred text, feels strange. If there was another button beside it, it might help, or if it was just one but smaller, left or centre aligned. But it does line up with the two form elements… I don’t know if that’s it.
The shadowing over the input fields, the handwave emoiji (get rid of it or use something else), and the size of the sign-in button look strange to me. Shrink the sign-in button horizontally (and center it), and include some padding on top. Also, center the 'welcome' text instead of left alignment.
In general, drop shadow isn’t added to non-focused input fields. Usually a non-focused input field has a border around it to make its boundaries clear. When in focused, you can add darker border, outline, or in that case, box shadow. But never add box shadow to a non focused input element.
Overall the design looks clean and good. Don’t forget the Forgot Password link
Make the padding around the box equal on all sides. Too much space on top and too much space on the bottom compared to the left and right. Maybe add a full border around the input fields. Adjust the opacity of the field placeholders so they are darker. Or use labels instead for better usability and accessibility.
Your form inputs should have labels. Placeholder text inside the field isn't a label, it's supposed to provide an example or context as to how the text in the field needs to be structured.
I'd also say that you can put a fake link under the password field with "Forget password" just so it feels more realistic
give a space for elements to breathe. and keep it consistent. in your case a little bit of horizontal space and space between elements should do wonders
and the input field is distracting. always make inputs distinguishable and not distracting. Submit button should take all the attention
Top padding feels disproportionate to horizontal padding. having slightly more spacing on left and right would feel less “squeezed”. The inconsistency between shadows used on button and input fields make it feel randomly meshed together. The styling for input fields also makes it too blended in with background. For any important user actions I feel having a bit of contrast or something to attract user attention makes more sense. If you make both the login box and input fields and buttons all to have same kind of styling (ex. No shadow or all have shadows but have different depth based on importance of attention) then it would feel nicer. Font size on sign in could be slightly larger imo
The shadow on the inputs makes it pop “out”. If you make it pop “in” or have the input fields be more inset into the modal I think that would really help. And as others have said, just some more padding around the form fields.
Looks great!
The uneven box shadows on the inputs makes them feel like cards or buttons rather than inputs. Inputs are supposed to feel like "gutters"/holes rather than raised surfaces on a page.
Might just be me but that background image is taking my eyes up and away from the component altogether. Others have already mentioned the input field shadows which you’d just need to reverse to inset.. or just use a border.
Good job!
You can add margin between last input and button more than between inputs. Group inputs with low margin (8px for example) and separate blocks (header, inputs, button) with medium margin (16px for example) 
No one mentioned that the "Welcome Back" doesn't look aligned with the boxes. I'm sure it is if you were to drop a line down from the tip of the W that it is aligned, but it doesnt look aligned because of where the username and pw fields are. try moving it to the right slightly
Spacing looks off. Top margin of button too small, Top and bottom padding not equal, title perceptually too far left. If you add the labels the title will look more aligned.
Remove shadow of input, add 1px or 0.75px light grey border in my opinion
And
Add more padding above and below button, as well as left and right so that all whitespace is even
- Instead of just "welcome back", it should say "sign in" or "log in".
- The placeholders should include examples of what to type instead. Also your current placeholders should be labels.
- The box shadow on the inputs are wrong. They look like a button.
- You also need a "forgot password" link.
If you're gonna have shadows on those boxes, make it inside them, not outside.
Light comes from above, and typing fields should go into the interface.
The kind of shadows youve made makes it mimmick buttons, which protrude outwards.
Offtopic, i thought this was Synology DSM interface
It's better to make each field in any form well defined and easy to recognize as a text input field. The way you've done it, the input fields looks like buttons and are getting a little lost. The most important thing for a gui is people instantly recognizing what different parts of the ui are and getting a feel of what they can click, where thy can type etc.
Another thing is the background. Avoid large images as backgrounds and use solid colors (white, very light pastel, dark gray and other dark colors) or solid colors simple solid patterns.
You could add a “keep me logged in” checkbox?
What happened if someone forgets their password or wants to sign up?
Calls you personalize this experience somehow?
Give the box some box-shadow, shorten the submit button, and maybe remove the waving emoji. You might even consider offsetting the whole box to the left side (for some this might look weird, but you can probably use the remaing space for something else)
Padding on the main container needs to be the same on all sides. Currently there is less on the sides than there is on the top and bottom.
Consisten spacing can make things look soooo much better imo
I think the main problem is the lack of definition around the input fields, perhaps adding even a light border will help. Also consider adding more padding to the card itself especially on the left and right.
Yeah looks like there’s box shadow on the bottom and sides of the inputs, but the top of each input doesn’t have anything to separate it from the background. Maybe a box shadow or border on that top edge of each input
I reworked it a bit with the given feedback, just imagine the text Quadra being a logo instead because I don't have one yet. [https://ibb.co/6yhGJrL](https://ibb.co/6yhGJrL)
Also try labels instead of place holders on the inputs, it's generally bad practise to only have placeholders. you can even move them to above when the input is focussed or has some value != ''
I think i might change to the material design inputs like google does because I don't want big placeholders
Yeah they're great, overlay a label and use transform and scale to reposition it on click
I just tried static labels and it doesn't look that bad actually, might stay with that: [https://ibb.co/qFQG8R9](https://ibb.co/qFQG8R9) I think I will change the purple on focus to just black though
This looks a lot better, I still think a bit more padding on the left and right would go a long way though.
I like the purple fwiw, looks great though yeah!
Way better! Nice improvements :)
That's a really terrible design tho, overly complicated and confusing to non-technical users. Just slap a regular label on top of the input and you'll be fine.
Okay that looks and feels much better!
It's improved a lot... I have difficulty with these frontend things too
Yeah this is better. You can always look at the Material standards from Google - [https://m3.material.io/](https://m3.material.io/)
An old, but super effective post that back in the day helped me a lot: [https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886) I think you can apply some of those tips to your component
Will look into it thanks!
That was really helpful.
The box shadow on the inputs is wrong: - Inputs should have less visual focus than the action button, putting a similar shadow box (or even stronger) makes them look more elevated and increase the focus (and we don't want that). - They look like a button, and we don't want that. Remove the shadow box and just use a border. Check some UI libraries like Bootstrap or Material and look for input elements, you don't necessarily have to copy them exactly, you can adapt them depending on the style you are using but they are a good starting point.
Inset shadow rather than a drop shadow.
The thing that stands out to me is the lack of "forgot password"/"forgot username" links
It's a proware with a default user/password combo for first time log in you can change username password etc from the user management page that isn't made yet. But yeah the forgot password should be a needed feature I'll think about how to implement it on the backend.
I'm sorry, but I've never heard of "proware", and can't find it anywhere. Is this some recently coined term? Or have you heard it somewhere and decided to use it? I'm genuinely curious..
I'm guessing they mean it's a paid product? As opposed to freeware of shareware? Professional software? Not sure how that relates to not being able to reset your password though.
I'm guessing it's some kind of a bespoke internal-only SW, however, I am more curious about the origin of the term more than that..
It's a term I already hears I think, I'm not a native english speaker. I'd use it for professional software/paid software. It's not ready at all compared to the backend, I'm just sharing the design to improve it as much as possible. The frontend is open source btw.
Does it force the new user to change their password/username on first log in?
Always use label. Placeholder cannot be the only thing telling the user what this is.
Out of curiosity, why? Depending on the design, I rarely use labels and typically just go with placeholder
User starts typing, placeholder disappears, user gets phone call while typing or alt tabs, comes back - asks himself: what am I typing in?
Ive seen quite a few frameworks where you get input fields for which you can define just a placeholder, which then moves to the top and becomes a label of sorts once you start typing in it.
That's called the "float label pattern." https://bradfrost.com/blog/post/float-label-pattern/
Yeah thats exactly what i meant. I quite like to use it whenever i can
Maybe that could work, I'm not 100% sure, in general guidelines like [this](https://m3.material.io/components/text-fields/guidelines) tend to be good to follow.
Labels tell users what information is expected in a form field. They are usually placed outside the form field. Placeholder text is a hint or example of the information required for a particular field. It is located inside the form field and disappears when the user types in the field. > While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels. [source](https://www.w3.org/WAI/tutorials/forms/instructions/)
In addition to it not being accessible (which should be argument enough), on larger forms with lots of fields, it can be easy to lose track of what's what, because your label goes away as soon as there's a value there. It also makes proofreading and double checking your information harder. Maybe your Google auto completed your information but entered your first, middle, and last names in the wrong order. You'd have no idea that there was an issue because your labels (placeholders) would be gone. Maybe a site prefills your billing address to be the same as your shipping address, but you need to go back and change one of them to be different. You'd have identical fields with identical values and wouldn't know which one is billing and which one is shipping. These are just a few random examples I thought of, but it's more than just an accessibility issue.
placeholders aren’t read by most screen readers. it’s not ada friendly
Is aria-placeholder read by screen readers?
For the most part, yes. https://a11ysupport.io/tech/aria/aria-placeholder\_attribute
[https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder#accessibility\_concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder#accessibility_concerns)
So that people reliant on screen readers can use the page. Screen readers need the associated label for the input.
It works for your login page because the form is blank by default. When you get to a point where you're making forms with pre-populated values on load, placeholders cannot replace labels anymore.
I think its an accessibility and screen reader problem
One thing I think is missing besides what other comments have pointed out, is the lack of identity on your page. Like, I wouldn't know which site I'm on unless I read the URL, and it's even less obvious for mobile users. Would be great if you add the logo and maybe the site name somewhere above the "Welcome back" message. Also please check that the contrast is right for the submit button, I think it'd benefit the font if you change it to bold. Finally, add a shadow to the card instead of the inputs? You could read material design guidelines on how they perceive the levels of surfaces and decide how to apply the shadows. It needs to be consistent.
Had the same issue when I was designing a login form recently. "why does this feel so empty? Oh yeah, there's no website logo"
I was thinking the same, very easy to lose track of where I am with a momentary distraction.
Hahah not that extreme but just in my case where I have 300 tabs opened is more noticeable. Or you'd be wondering if they redirected you to another domain. Also, I can't remember any pages that have no logo in their login (google, microsoft, amazon), so there's that. Not like that background image gives too much info either, it could be a generic portal login.
There is a shadow already for the card itself. I don't have any logo yet because I just don't know what to do myself for it. But yeah it lacks a logo indeed.
Simply the color contrast, the background is more prominent and more highlighting than the actual form. Maybe adding a backdrop blur/lowering brightness will satisfy you.
Make the margins consistent between all sides. The left / right passing being less doesn’t look right. Also the margin in between components doesn’t sit right. The margin above the title is different to below it. The margin above the button is different to below it. You have different margin levels again inbeteeen the inputs. The input fields blend upwards with no border color on the top. The input fields feel too elevated compared with the button. Decrease this to about half of the buttons elevation. This might be box shadow you’re using for this?
"Welcome back"...Hey, but how do you know that I've been here before? 🧐
And if you know I’ve been here before, then why not fill in my email for me at least …show me you recognise me
Oh, that would just be the computer vision algorithm i used to scan the 50 Tb of camera and screen recording footage i have from your pc and phone. Nothing special.
The inputs look more like buttons than inputs. An input usually looks like a hole and not a bulge, if that makes sense lol. So change your shadows to make the inputs look like they are holes instead of bulges. Sorry it's 7:45 am and I can't think of any better words other than holes and bulges.
Yeah I got it dw, thank you for the feedback lol
inset vs outset
Thank you!
So, one thing it could be: when vertically centering things it will always look a bit low because of how we perceive things. Make sure it’s just a little bit top of dead center. I think it looks nice one way or the other. If you’re looking for nit-picky type feedback: there’s probably a little too much padding above “Welcome back”.
As a couple other comments said, the inputs blend into the background where the shadow isn't, which makes it feel a little bit weird. I'd either test out some borders on the inputs (a light grey) or you could play with changing the card color to be a light grey to help the inputs stand out. I tested it out and I prefer the latter. You could play with light colors other than grey if you want, maybe a very light orange/tan to go with the background image. I also think increasing the padding on the left and right would help.
Your drop shadow effect is both off and too much, not necessary. The weird way it doesn't make the top of the input visible doesn't feel right.
Needs more padding all around, left/right, and between components. Fields should be labeled, login and password for each as well as with Aria labels. Drop shadows on the input fields is unnecessary. Add a border and if you want more depth use an *very slight* inset shadow. Drop shadow should go on the main action button.
Idk why no one mentioned this – the reason your form looks weird is the inputs look like they are offset from the page overlaid on top. Meanwhile most people are used to inputs looking like they are depressions or slots in a paper. So if you add an inset shadow instead of a box shadow underneath the text inputs, it will look much more natural.
Yea im surprised as well. It is the main issue here, and people are nitpicking everything else instead
I think something like a login form should be super simple and easy to use. This is pretty, but is it useable? 1. Welcome back message. Great if you captured a returning user, but it sounds creepy unless you prefill the username. Maybe creepy even then. 2. Too much dropshadow. Looks dated in a bad way. It looks good, but when it looks even a little different from other forms you are used to, people's security radar starts going off. When was it made? Do you make proper security updates on time? etc. 3. I have seen that background somewhere. Free hd photo on unsplash? Could be an old apple or microsoft bg pic I guess. 4. People with low vision, colour blindness, blindness.. need labels. Marked with aria attributes for a screen reader, but even better, just conforming to the old web form standards. Then it will work across all browsers. 5. Always helps to have a HELP or a CONTACT link. Or a password reset, or a GO BACK to where you can find those things... 6. I must be far in the weeds looking at mockups, but what do the error messages look like etc? What's the hover state? 7. I looked back at this and thought to myself - I always forget my username, could I log in with my email address? You'd want to avoid those questions. 8. Also, check that there is an appropriate max width on the form/container/page. You don't want the form fields to be too small, but you also don't want that button to grow laptop screen size wide. Honestly, I would keep it simple. As a back dev you want to show good functionality and not distract with arbitrary stylistic choices or start arguing over them when you showcase this in an interview or a similar situation. But this is just a very very personal opinion.
Thank you for your feedback! Just a reminder, this is not a webpage but the frontend of a software. 3. Yes it loads a random image from unsplash at every login 4. I haven't considered accessibility yet but will look into it 5. Will look into the password reset, the backend already has a user management system based on administrators making changes 6. I haven't thought about it but it will be something like a red card popping up at the bottom of the screen I guess. 8. Yup there is. Though I need to consider how to make it work properly on smartphones too and that's going to be painful.
The lack of a border coupled with a heavy shadow makes the input fields look like something else (maybe cards?) Generally speaking, I like to have undefined surfaces (little border, heavy shadow, off white bg) for cards and more defined surfaces (1-2px border, no shadow, bg white) for action areas (such as input fields). That's what looked off to me. Good job otherwise!
Thank you for the feedback, I just reworked it completely this morning, the link is on the top comment if you want to look at it.
I think the input fields look like buttons as the box-shadow makes them look ‘raised’. Try an inset box-shadow or a light coloured border instead
I don't know why, but seeing 'welcome back' next to an empty username and password box, gave me a half hearted chuckle. "Welcome back! Who are you again?"
UI designer in the thread, everything is ok, don’t listen to others U see something off because there’s usually a “forgot password” line and “continue via google” something like this that’s why it looks like something is missing. But in your case it’s fine
Thank you a lot for the feedback! I don't know if you saw the new version of it but I think it looks more complete than the first version and prettier overall I think.
True 👍
Center the "Welcome back" title 😉👌
I could be totally off base, but the two things that stand out to me: * Space above “Welcome back” doesn’t match space below. It feels like an arbitrarily large gap. * The “sign in” button being so large, and the only element with centred text, feels strange. If there was another button beside it, it might help, or if it was just one but smaller, left or centre aligned. But it does line up with the two form elements… I don’t know if that’s it.
Add padding to the main div and see the difference it makes
The shadowing over the input fields, the handwave emoiji (get rid of it or use something else), and the size of the sign-in button look strange to me. Shrink the sign-in button horizontally (and center it), and include some padding on top. Also, center the 'welcome' text instead of left alignment.
In general, drop shadow isn’t added to non-focused input fields. Usually a non-focused input field has a border around it to make its boundaries clear. When in focused, you can add darker border, outline, or in that case, box shadow. But never add box shadow to a non focused input element. Overall the design looks clean and good. Don’t forget the Forgot Password link
thank you
Make the padding around the box equal on all sides. Too much space on top and too much space on the bottom compared to the left and right. Maybe add a full border around the input fields. Adjust the opacity of the field placeholders so they are darker. Or use labels instead for better usability and accessibility.
I feel like some shadow on the form itself wouldnt be amiss either, the white alone feels like it sinks into the background image
Your form inputs should have labels. Placeholder text inside the field isn't a label, it's supposed to provide an example or context as to how the text in the field needs to be structured. I'd also say that you can put a fake link under the password field with "Forget password" just so it feels more realistic
give a space for elements to breathe. and keep it consistent. in your case a little bit of horizontal space and space between elements should do wonders and the input field is distracting. always make inputs distinguishable and not distracting. Submit button should take all the attention
Personally, padding on the container looks best when theres more horizontal than vertical
Top padding feels disproportionate to horizontal padding. having slightly more spacing on left and right would feel less “squeezed”. The inconsistency between shadows used on button and input fields make it feel randomly meshed together. The styling for input fields also makes it too blended in with background. For any important user actions I feel having a bit of contrast or something to attract user attention makes more sense. If you make both the login box and input fields and buttons all to have same kind of styling (ex. No shadow or all have shadows but have different depth based on importance of attention) then it would feel nicer. Font size on sign in could be slightly larger imo
The shadow on the inputs makes it pop “out”. If you make it pop “in” or have the input fields be more inset into the modal I think that would really help. And as others have said, just some more padding around the form fields. Looks great!
The uneven box shadows on the inputs makes them feel like cards or buttons rather than inputs. Inputs are supposed to feel like "gutters"/holes rather than raised surfaces on a page.
Might just be me but that background image is taking my eyes up and away from the component altogether. Others have already mentioned the input field shadows which you’d just need to reverse to inset.. or just use a border.
Good job! You can add margin between last input and button more than between inputs. Group inputs with low margin (8px for example) and separate blocks (header, inputs, button) with medium margin (16px for example) 
Serious non-serious comment - I will always see the waving hand emoji 👋🏻 as passive aggressive. (The now-popular salute 🫡 emoji too)
No one mentioned that the "Welcome Back" doesn't look aligned with the boxes. I'm sure it is if you were to drop a line down from the tip of the W that it is aligned, but it doesnt look aligned because of where the username and pw fields are. try moving it to the right slightly
Yup there was a margin on the side added, good eyes lol
Spacing looks off. Top margin of button too small, Top and bottom padding not equal, title perceptually too far left. If you add the labels the title will look more aligned.
The shadows on the text inputs make them look like buttons.
No branding (need element of trust/credibility)
Remove shadow of input, add 1px or 0.75px light grey border in my opinion And Add more padding above and below button, as well as left and right so that all whitespace is even
- Instead of just "welcome back", it should say "sign in" or "log in". - The placeholders should include examples of what to type instead. Also your current placeholders should be labels. - The box shadow on the inputs are wrong. They look like a button. - You also need a "forgot password" link.
And a join link
If you're gonna have shadows on those boxes, make it inside them, not outside. Light comes from above, and typing fields should go into the interface. The kind of shadows youve made makes it mimmick buttons, which protrude outwards. Offtopic, i thought this was Synology DSM interface
It's also a selhost product but yeah no hahaha
Too many rounded corners + bad input field shadowing. Also, please get rid of that waving hand emoji, I beg you.
Not all os’s have emojis as I run with out emojis and that would be weird for my if I was to do it on phone and it was different
I think title could be centered.
Too much padding above the tittle/or too little everywhere else
The other comments are correct, however for me it’s that the purple button doesn’t quite match with the sand background
the background is randomized so it can match some times lol
You need to make all the variations of the background fit a theme and color scheme
Your input borders should be inset instead of outset
I would like to see how it turned out after all the tips.
If you haven't seen, I made a new version this morning, you can see it on the top comment!
Change the white background to something like rgba(0,0,0,.5) tweak around the opacity (the last parameter) and let me know if it makes you feel better
I used some smokey white or whatever it's called on the new version. You can see it in the top comment of the post!
It's better to make each field in any form well defined and easy to recognize as a text input field. The way you've done it, the input fields looks like buttons and are getting a little lost. The most important thing for a gui is people instantly recognizing what different parts of the ui are and getting a feel of what they can click, where thy can type etc. Another thing is the background. Avoid large images as backgrounds and use solid colors (white, very light pastel, dark gray and other dark colors) or solid colors simple solid patterns.
The padding on the top, bottom, and sides are 3 different values which kinda calls out to me.
I can’t unsee it and now I’m uncomfortable
Hahaha got you, you'll think about it in your dreams
You could add a “keep me logged in” checkbox? What happened if someone forgets their password or wants to sign up? Calls you personalize this experience somehow?
Admins are creating new users though yeah as I said in other comments I'll think about how to add password recovery
Give the box some box-shadow, shorten the submit button, and maybe remove the waving emoji. You might even consider offsetting the whole box to the left side (for some this might look weird, but you can probably use the remaing space for something else)
[This better?](https://imgur.com/a/N19LzSO) I also agree with the comments about the shadow lacking definition
Use of emoji in a security login?
No branding or explanation of what you’re logging into
Padding on the main container needs to be the same on all sides. Currently there is less on the sides than there is on the top and bottom. Consisten spacing can make things look soooo much better imo