Design
14 Examples of Well Designed Login Forms #Inspiration
The login form of a website is probably once of the most debated elements of user interface design. Whether it be the term ‘Log In’, ‘Login’, ‘Sign In’ etc or how it’s presented. Should it be a a modal popup? should it be included on a separate page? Here is a roundup of 14 well designed forms to help you decide what’s best for you.
QwikVu
Hubspot
Freckle
Scrapblog
VIRB
Goplan
LivePlan
Mailchimp
Unlocking
AwesomeJS
KISSmetrics
Mochi Ads
Tagged design, login, UI, User Interface, UX, web design




TashWordAugust 13, 2012 at 3:01 pm
Login/log in/etc isn’t hugely important, I think, as long as it is clear what is intended. And the term used matches your style elsewhere.
Personally, I think make life easier for people so that generally means have as few steps as possible. So, in many situations a form is better than a link to a form unless the form is long and/or needs lots of explanations.
TashWord recently posted..Ways to simplify your business
ohiotom76August 14, 2012 at 3:35 am
Forms were one of the HTML elements that had always been difficult to style due to cross browser limitations and lack of support in legacy browsers. As support for older browsers tapers off, it’s great that we can now start fully embracing CSS on forms to improve their clarity and design.
KennyKAugust 14, 2012 at 6:14 pm
For me it just has to be clear and easy, not necessarily fancy. The login form should be fast and without any bugs, then I’m happy. If it matches the overall look and feel of the site, that’s a bonus.
OverAchieverAugust 16, 2012 at 4:54 am
Oddly enough, this is actually not something I have previously considered on my sites. I’m terrible with the design or tweaking CSS so I always just use the standard login design that comes with my platform. Do others really care what that page looks like, as long as it works?
gerkmeisterAugust 16, 2012 at 12:05 pm
I agree with TashWord, the fewer steps the better. Most of the sites I belong to have a link in the main menu that takes you to a login page with form. I prefer a site that has a login form somewhere in a side bar on the first page. What really irritates me are the couple sites I belong to that have the login link at the bottom of a long page, so I have to scroll all the way down to click the link. Don’t make me work for it.
BloomaticAugust 18, 2012 at 1:51 am
The “login” is the gateway to our house (website). So it’s important that the message is clear, and above all easily accessible. Yes, we don’t want to enter all strangers, so we must use a password. I don’t know how to design each one of those login, but I think it always favors the utility, rather than the design. Simplicity is often the common denominator in these cases, no excesses.
RobertAugust 20, 2012 at 4:44 pm
Login does not have to be fancy. It should be clear and to the point. It’s style should match the website it is on. I will also cast my vote for simplicity. Simple login forms are the best login forms. The process should be quick as well. Long page-length forms should be avoided when possible.Many sites ask more questions than they probably should. The questions some sites ask may be great for marketing, but they often have nothing to do with the website being logined to.
SybariticAugust 22, 2012 at 1:25 am
I don’t really think login forms are as important as you say. They are one of the first things a user sees, but they all do more or less the same thing so the user knows what to expect from one.
AladarAugust 28, 2012 at 12:41 pm
I have to disagree with the above poster; sure, log-in forms may have be the most basic thing on your page, but if they don’t work as intended, look confusing, or have any other problems, you are alienating your userbase. There is the obivous issue of not being able to log-in/register, but you can’t forget the fact that a user possibly sees this very form every time he visits your webpage. And if the form is designed badly, or creates some extra hassle.. the user won’t really be forgiving.
DazAugust 29, 2012 at 9:34 am
Yes they are not the most important page on the website, but I think if they are not handled right they can really detract from the professional image that you have worked so hard to build up.
For example, it is always a shame when a site that has spent a lot of time to build up a theme and branding style asks you to login / register and you are greeted with the generic default WordPress login.
I actually love the Mochiads login page above, very clear and colourful whilst keeping with the theme well.
KennyKAugust 29, 2012 at 8:49 pm
You’re right. It should be clear, and if you get a long form with plenty of details to fill, I often get bored of that. Just basic info should be in the form, and maybe more info to provide later once you’re registered, somewhere in a profile or settings page.
antistarSeptember 3, 2012 at 7:46 am
Gorgeous stuff, and please keep focusing on the small details like this. I once read some really useful advice for design: “Treat every aspect as if it is being judged” – that is to say, put effort and care into everything you make and the whole will be greater than the sum of its parts. Login form design is something that can brighten up a website, but which is otherwise overlooked by designers and users alike.
gregc24November 5, 2012 at 11:48 pm
I live the liveplan login form. Concise, not flashy, and just gets you in.
cheaNovember 15, 2012 at 11:53 am
Nice. I personally still need to implement a login form for my site. I’m thinking about adding a light box style one like Kissmetrics to save space in my side bar.