This is the login box for PlanetAxel.com. For this one, I was inspired by an input field Twitter has in one of the Bootstrap form fields with an @ in front of the field. I don't think they actually use it on the Twitter site, though.
For the entire PlanetAxel.com site, I've taken it a bit further and added icons for every single input field (using Pictos), allowing me to get rid of non-placeholder labels for each form field, and easily convey the field's required content. These forms include, checkout, credit card, profile, contact form, etc. Example: https://www.planetaxel.com/contact
The "Remember me" box is label that's attached to the checkbox, making it easier to hit.
I've also extended all the grey header for each box throughout site with icons. I know the grey looks a bit dull on its own, but since it's an e-commerce site, I needed the products to stand out more than other site elements.
For input fields that require a bit more information and the icon isn't enough, I use a tip on hover just in case (for example, the site's credit card form where it's paramount the user understands every field).
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Take our community survey and get an amazing giveaway and font discount.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.