HTML/CSS Login Form

14 Responses

  1. Warren Baskin Warren Baskin

    For the past year, I've been working on a project that will be launching in the next few months.

    This is my progress on a login form that will appear above an overlay.

    about 1 year ago

  2. Patrick Rogan 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

    likes

    about 1 year ago

  3. Warren Baskin 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

    about 1 year ago

  4. Dan Leveille Dan Leveille

    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.

    likes

    about 1 year ago

  5. Patrick Rogan 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

    likes

    about 1 year ago

  6. Joe Anderson 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.

    likes

    about 1 year ago

  7. Luboš Volkov 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 :)

    likes

    about 1 year ago

  8. Greg Dlubacz Greg Dlubacz

    welcome aboard

    about 1 year ago

  9. Warren Baskin 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!

    about 1 year ago

  10. Patrick Rogan 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

    about 1 year ago

  11. Dominik Martin Dominik Martin

    Welcome aboard. Really nice debut.

    likes

    about 1 year ago

  12. Gauthier Eloy Gauthier Eloy

    Looks metro style ! nice, welcome ;)

    likes

    about 1 year ago

  13. Mike Busby Mike Busby

    Cool shot, welcome to the site

    likes

    about 1 year ago

  14. Ari Ari

    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.

    about 1 year ago

keyboard shortcuts: previous shot next shot L or F like