Website Login Page UI

Hey guys, long time, I haven’t posted here on the DevForum for a while. School was extremely busy. Anyways, I have made this login UI, tell me what you think of it, feedback is really appreciated!

Note This isnt a scam in any way, this is just a practice.

14 Likes

Wow, looks great! Only thing, remove the “here” word after Register. Good job!

2 Likes

Good suggestion, I will remove it right away! :smiley: It does look uneccesary.

Nice! It looks really nice, the main bit of advice I have is to read about recommended contrast levels for screen compatibility and also to help those with visual impairments get along with your UI a bit better.

The “New user?” text has really low contrast to the background at the moment, so consider a darker grey.

You might just get away with the “Register” colour, but again I’d probably make it closer to the colour on the right side of the login button. Some screens don’t do oranges and yellows very well.

3 Likes

It’s neat done and basic, nothing to intimidate you while trying to read/log in/sign up, good work.

I like it a lot. It’s simple and easy to read. This is as good as normal everyday sites. I like how you’ve made this really well. If I was shown this in ROBLOX. I would believe I just pressed f11 on a site! I love it a good job, hope you do more of these amazing GUI’s!

1 Like

I can definitely make this in Roblox, its just that Roblox is limited when it comes to UI Design, and isnt as easy/simple to use as Adobe XD (program I used to make this UI)

  • Why is there a blank profile picture on the top? Something like the site logo would work much better.
  • Log In is two words, not one.
  • “New User?” is barely visible.
  • The whole UI is way too large. It may look fine for you, but as soon as you enlarge it to the full size of the screen, the normal text will be the size of h1 or something,
  • The left side thing is too big, and the log in form is way too much to the right.
  • How will this look on mobile? It’s pretty much industry standard to design mobile-first now. If you designed a mobile display, share that too.
  • The icons for email look unbalanced. Email icon is line based, and lock is solid. Idk how you would solidify an email icon, so you should do an outline of the lock instead.
  • You could also add “forgot password?” and “remember me” options.

For some more opinion based advice, no one has used gradients or pills in ages, and for good reason. Stop it.

1 Like

I appreciate your feedback. I will try to implement that in the future.

2 Likes