So I created a login page (it's not actually being used in a real product, it's just for a personal project). Does it look good? Any improvements I could make?

  • 11
    The contrast between the background of the login button and the text is a little bit low. I'd make it a lighter blue or darker grey. But I'm not really a designer-front-end type of guy, that's just what I noticed
  • 2
    Other than that it looks good for me
  • 7
    Well it should be secure ;)

    - Can I login by entering my e-mail address?
    - What if I forgot my password?

    I find the contrast little bit to low, too. I would also increase it for the text fields. I could imagine they may be difficult to read on a low contrast monitor.
  • 9
    Use Labels not placeholders.

    Fix that contrast, hell run it through this tester at a minimum,

    Where's the Forgot password?

    No Signup?
    There are genuine use cases to exclude this but just asking

    How are you handling errors?


    Beyond that.... it's "ok" for a simple form, but I'll summon @Fast-Nop.
  • 4
    Thank you all for your suggestions.

    @C0D4 Thank you for the link, that's really helpful.

    @sbiewald @C0D4 I'm going to add the forgot password and signup later, I just wanted to get the basic design done.
  • 2
    @Sh4d0w hey, that's looking better already, but go a bit darker.

  • 3
    Another suggestion from personal experiences - Forgot username... I may be able to guess which password or in what combination I selected the password but I find it tricky when the login may be a username OR it MAY BE the registered email. So sometimes I do password reset just to remember my user name.
  • 1
  • 2
    @Sh4d0w since you are already using labels, I would also add a little more spacing between the fields (specially above the password label, coz it's equidistant to both text inputs).
  • 1
    Have the space to the sign in button equal the height of the label, or twice the height.

    IMO the button could also be 3 pixels larger or something, have it dominate as it’s the primary action.

    Also, the “Login” title seems a bit wonky because it’s centered. Give it more space to breathe.

    The border radius of the card seems a bit much related to the border radius to the fields. Make one of them smaller/larger so the difference between is a bit smaller.

    You can get an image of the golden ratio and try to align it, simple check to validate the rhythm.
  • 1
    I have added a "forgot password" and a signup option and made it look prettier. Again, thank you for your suggestions.
  • 0
    @010001111 What do you mean with "Give it more space to breathe."?
  • 0
    @Sh4d0w move the input boxes further apart from each other (breathing space)

    Also known as social distancing now a days.

    Also, move the forgot password link under the input, it looks like a helper (additional info) not an action.
  • 1
    I don't get why you have such a dark color for the Login text on such a dark background.
    Try something lighter, it should look nicer imo.
  • 2
    @Sh4d0w That's designer talk, I'm sorry! What I mean is whitespace, that's the most important thing in design. No matter if we're talking from element to element, but also within an element, so padding in tech-speech.

    Don't just clutter everything close to each other just to have more space to show more information.

    I usually give my big headlines, like your "Login", an line-height of *at least* 1.6 and additionally some margin-bottom, some fraction like 1/3, or 2/5 is acceptable.

    I'm bored, so I've done a quick variant for you: https://jsbin.com/nixocuduve/1/

    Have fun!
  • 1
    @Sh4d0w This may well be out of your control, but the kerning on those labels is a bit weird.
  • 1
    Make the button text white and that’ll be okay. Also align placeholders to the left
  • 0
    Also HTML5 spec prohibits using placeholders as labels
  • 2
    Gefällt mir!
  • 2
    @Sh4d0w Just try to replicate Google , Github, etc. sign in pages. They have already done the research on user experience and interfaces so you wouldn't need to. Plus, you'll get practice and gain "muscle" memory in the area. :)
  • 3
    Needs more AI blockchain microservices.
  • 1
    I was recently making a basic authentication for an Android app. Its native code, so its more mobilish(?) i guess, but could be inspiring.

    I have added a mechanism for resetting password if forgot via a simple block. User needs to just tap and there will be a form where they can add their email for a reset link. Apart from that, there are information labels and error tooltips and password show/hide eye if you interested in making them.

    I read some designer's blog who pointed a lot of important and common elements in an authentication form. Will have to search the history for the link, but ot was quite nice
  • 1
    I have finalized it now. I have now spent a whole day on it. Thank you all for your suggestions and helpful advice.
  • 1
    @Sh4d0w final result?
  • 0
    @C0D4 Seems like I had forgotten tinattach the image.
Add Comment