Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Web Login, the definitive guide

Comments and suggestions in here

11-22-2011 9-42-55 AM

When it comes to creating a successful login web design, although not all the rules are written in stone, there are certain features in the construction of the design that should be kept, in order to construct a model that guarantees a login outline that better suits moderns user needs.

A login should especially thrive on being up to date, functional, secure, quick and accessible; amongst other useful qualities it should have to assure its success amid web users, and above all to secure the profitability of your design.

What to do, good practices

In order to construct a design that has these qualities, we’ve outlined the following practical guide of features described in a list of good practices when it comes to the making of a great login web design.

Gain some time using expandable rollover windows or boxes

This trait, popular now a days in login web design models, allows users to access within the login space without the distress of having to wait for the loading of an entire page, since it displays the login form automatically and leaves it available on display, with the additional option of clicking outside and having it roll up or disappear.

A feature that will assure the permanence of hasty users that prefer leaving the task at hand and going to a new page, instead of going through the haggles of waiting on a eternal loading process, after having to click on several additional times.

11-21-2011 11-49-28 AM

11-21-2011 11-50-47 AM

When possible, please use Ajax

Is a feature available in many sites included in the everyday routine of website users. It assures an immediate access to the specific tool that concerns you in a web page, by loading only the section that you click on and leaving in standby the rest of the page.

Including this quality in the web design process of a login model, assures a quick login for the user through an easy going login progression, this for you as web constructer is useful to guarantee the permanence of the user in your website.

11-21-2011 12-41-14 PM

Never forget, to use notifications

Refers to the trait that allows users to receive brief announcements during the login process that give them notice when a certain password or id has been typed the wrong way, or CAPS LOCK has been left on, and quickly correct the mistake that has been made during the login process.

To keep an easy breezy login progression that’s quick and effective this can be great trait to include in the design of the web login model; which also comes in handy when wanting to incorporate additional information trough the login course of action.

11-21-2011 11-57-29 AM

11-22-2011 9-35-03 AM

Some of the login notifications that you can commonly use are:

Caps Lock, be careful

Once you step on the fill out password field of the log in form it identifies whether or not your Caps Lock key has been activated (remember most of the password entries don’t allow caps lock), and in case it is activated, it immediately notifies the user in a fly out banner to deactivate it at once.

We highly recommend incorporating a Caps Lock notification as part of your login design model, this will accelerate the login process for the visitor by providing a vice proof login progression

Wrong password or user ID

While you finish entering your personal data in the fill out fields of the form it identifies whether or not the information you’ve entered is valid and immediately notifies the user at once.

Restriction of Required Characters: some fill out register forms don’t allow all character types in password entries and sometimes have restrictions when it comes to the character type whether it refers to numbers or letters.

Validation: This quality allows the login model to provide a secure login progression for the user, with validation tools such as the request of a password confirmation, a security question or the notification of a double typed character in the ID or login entry, this to prevent user impersonation and vices.

Let your users enjoy of a several validation tools when completing the login process, to create a trustworthy login progression that will encourage them to continue providing their personal data during the filling of the login form.

11-21-2011 2-29-25 PM

Please validate (and better if via JavaScript)

This quality allows the login model to provide a secure login progression for the user, with validation tools such as the request of a password confirmation, a security question or the notification of a double typed character in the ID or login entry, this to prevent user impersonation and vices.

Let your users enjoy of a several validation tools when completing the login process, to create a trustworthy login progression that will encourage them to continue providing their personal data during the filling of the login form.

examples- -05

Some of the examples displayed for login validations can be:

Ill Formed Mail

When a character is repeated or the log in entry presents some kind of typing error the validation tool immediately identifies the mistake and notifies the user.

We invite you to use the validation of an ill formed mail is a useful tool to incorporate in your web design model, as a method of user permanence assurance in your website. For the hectic web site visitor, having to go to the angst of having to enter personal data in a login form more than once, evens if it’s due to a mistake on their part represents a total waste of time.

In this sense, the validation process of an Ill formed mail (and subsequent notification) makes of the login progression an easy breezy process for the un experienced visitor that may not understand the mistake being made when entering their personal data, or as we mentioned, the hectic user that cant bare can’t bare to wait through a web surf.

Restriction Character Requirements

When the field requires a certain number of characters in its entry it immediately identifies the problem and notifies the user.

As we mentioned with the validation of an ill formed mail, the validation of Restriction Character Requirements is a tool that with time will also result in the increase of your visitor page rankings, for allowing the user to enjoy of a much smooth login progression, specially when committing on of the many visitor vices when completing a login process, and being completely unaware of it.

Use explanatory tool tips and modal boxes

It will allow the displaying of informative fly banners along the login form when the cursor steps on a certain part or link of the login form.

This not only comes in handy in case of informing a user of the definition and function of the fields included in the form, but will be a great tool to innovative web designers that find a creative way to incorporate digital marketing to the banners, amongst many other creative messages that can be integrated.

Some of the examples displayed for explanatory tool tips are:

Informative help, tooltips or messages

It’s the most common form of explanatory tool tip and the very purpose of this tool tip since it brings information sometimes obvious, sometimes needed for the user.

Try to incorporate the explanatory tool tip feature un your design in a innovative way as viewed in the following image, this to simplify the design of your login form in space and character wise, so it can be presented in a much more bare mold up to date with the current trends in web design.

11-21-2011 12-02-32 PM

Promotional

An explanatory tool tip will not only come in handy when the user wishes to be provided with extra information about an icon, app, or field, but will also be useful to you as web designer when provide a special announcement or invitation for an user to visit a new section added to your website or a new app incorporated.

11-21-2011 12-11-34 PM

Hoover effects are your friends (and your users’ too)

A Hoover feature to your web design will allow the creator to include visual effects to highlight sections of the login form such as luminance or contrast, etc.

There should be no hesitation in enhancing your web login design with this feature to democratize your login form and make it into something accessible for the masses; for the innovative web designer it will be quick to create brighter panels for the elderly or boost the visual impact of the login form to make close and accessible to children audience, besides the obvious reason for the visual enhancement of the design.

11-21-2011 12-10-12 PM

Security, never forget it

This is a must when it comes to providing a trustworthy model design that guarantees users that their personal information will be well kept, trough qualities like a theft proof 3 time password tryout, the terms and conditions legal form or the codification of the password entry against snoopy viewers.

This trait that will ensure the fidelity of your users by providing them with a web site that follows the protocol legal procedure and protects their citizen wrights.

We recommend some of the following security features as part of your design:

Keyword Login Design

When a user encounters a login form there will not always be a fill out field to entry personal information, sometimes a simulation keyboard design will appear on the screen to click on the respective keys as a live action.

This is a very useful feature security wise for purposes like avoiding the copy of personal data by many users of the same PC, or for the system assurance that it is a real person entering the information and not a computer system.

Password entry codification

To make the entry of our personal data a spy proof process especially when it comes to the entry of our password, a very common security feature in web design is the replacement of characters in our entry for symbols such an asterisk.

This is a valuable trait to provide in your web design that cares for their personal data once it enters in the login form, especially now that so many explorers provide the automatic option of saving your Id and password when logging in.

11-21-2011 12-36-07 PM

11-22-2011 9-36-44 AM

Using registration and login in the same form

For users it’s so common being able to complete a web register form after having to respond  a list of never ending personal questions and fill out sometimes up to three password verifying modes, that when they come across a login forms that serves as a register form also it seems as something out of the ordinary and insecure.

Nevertheless, this is a great login web design practice that is growing nowadays to save the users the angst of filling out never ending register form that requires the entry of very personal data that many users are not even sure that they should be giving out.

A 2 field register form basically refers to a register form design that passes as login form, by only requesting from the user the entry of an ID and personal password to complete the registration process. A time saving feature that without a doubt will guarantee the permanence of a web user in your site, adding a new member to your web, and that will throughout time rapidly increase your number of visits.

We recommend, incorporating one or probably two security features in this type of login-register form to make certainty to the user that their personal information is being well kept, even though the simplicity of the form.

examples- -06

Bad Practices, what to avoid.

Well, there are some practices is better you to avoid, new users know it and they will hate your login process if it is not friendly and easy, some of the old fashioned websites you can see out there nowadays still using bad practices on their login forms, below you will find some some of them.

Pop out windows: users HATE them !

Putting users trough the trouble of having to click on a log in icon and wait for a pop up window to appear with the log in form several seconds and probably several clicks later (depending on the speed of the internet conexion), puts a time constrain on the user, limiting his or hers speed efficiency and probably makes this user one that will later dislike and avoid login in to your page and enjoying your services because of time restrictions.

11-21-2011 3-24-34 PM

Full page load login (no ajax)

Having to bare a long wait load of an entire home web page full of features, icons, images and fonts, to finally have access to the web page login, will get your potential user up and running from the web site in no time to surely find a new page that provides the same services and where surely there’s no waiting period to entry a log in.

11-21-2011 3-30-17 PM

Non validated login system

Although quicker in many ways, not always a fast tool is the only area of interests of a user, when it comes to security vs. agility the web page user will always come to prefer security on personal data and accounts.

Remember that even tough modern times call for quick and effective log in methods, your web site should be created regarding the needs of the users, in this way validation tools such as the request of a password confirmation, a security question or the notification of a double typed character in the ID or login entry, is of great use to certify the user and responsibility of your site.

Login system without proper notifications

You may think that the log in web design you are creating is for expertise users that very well understand the protocol of a log in process, and that there’s no need for explication, If you create a versatile log in model that provides a notification system for users that’s vices proof you will provide to a wider range of audience.

In this matter, when an user is unable to complete the log in process it will be of great use if the form has the quality of explaining to the user’s the login mistake, by giving a notice when a certain password or id has been typed the wrong way, or CAPS LOCK has been left on, so the mistake can be quickly corrected in order for the log in process to continue.

11-21-2011 3-34-56 PM

Logins without help guides or tooltips

Often web designers forget the importance of the instructive tool tips as part of a log in form and consider it to be self-explanatory model. Not taking into consideration how for example elderly users not so gifted in web tools use could be a potential for hundreds of visits a month, if only the elderly user would’ve resolved his questions about the log in form by an explanatory tool tip.

Non interactive buttons, static form !

The visual enhancement of certain features of the login form with Hoover, is useful in a self- explanatory fashion when we wish to establish hierarchy between tow object in the form, or helpful in highlighting information features for handicap users, among many other useful functions that it can be destined for.

When these tools are absent from the form design and the user finds a plain one pallet colored background in the log in form, it can often be difficult to understand the protocol of the form and the required fields, or even if the information is understandable it can result to be a boring preview of what the rest of the web site will turn out be.

11-22-2011 9-47-23 AM

Insecure login systems

Although filling a log in form is considered a simple process in web surfing, the information that comes into the fields is personal data, confidential and highly important. In this sense, the trait that our log in form web design cannot go without is security features to protect user information.

A user will probably hesitate on giving out information during the log in process, if sees the sign in form is not up to standards security wise or at least provides the minimum and usual security standards such as providing the terms and conditions legal form or the codification of the password entry against snoopy viewers.

There are many web sites that have not yet gotten up to date in many of this features log in, in which along with having to stand the wait of a loading a full web page to log in, we will probably come to find an icon to do click on for a pop up window to display with the log in form, and countless more peccary log in characteristics, but it’s time to update now, even so when more and more users are aware of time constraints and the repercussions of just one more click on your work productivity.

Fresh login tools, plugins and resources

We have made a full research, where we investigated and studied web tools, plugins and scripts, that can be useful to web designer’s needs. The following research took notice that the resources we found were updated, complete and including documentation. Reviews of these tools were taken directly from their owner’s websites. We hope these resources can be helpful for you. Enjoy them!

jQuery, PHP, CSS &  Ajax
The following resources are based on J-query, PHP, CSS and/or Ajax, some of the following resources are plugins and others are full scripts. Each of the following tools has their installer, user manual and examples/demos.

Validate.js: Form validation library

login-resources-01_thumb5

validate.js is a lightweight (just over 1kb gzipped) JavaScript form validation library inspired by CodeIgniter that allows you to validate form fields from over a dozen rules. It has no dependencies, its customizable and also works in all major browsers (even IE6!).

ALAJAX: From normal HTML to Ajax

login-resources-02_thumb

ALAJAX is a jQuery plugin that converts a normal HTML form into Ajax by only including the script. It sends the form by AJAX to the URL given in “action” property of the form. Also, the plugin uses the “method” property to use POST or GET method.

MotionCAPTCHA: Stop Spam, Draw Shapes

login-resources-03_thumb

MotionCAPTCHA is a jQuery CAPTCHA plugin. It requires users to sketch the shape they see in the canvas in order to submit a form.

Sisyphus: Gmail-like client-side drafts

login-resources-04_thumb

Imagine you’re filling a complex form on a site, or typing an extensive comment, and just when you’re almost finished the browser the crashes, or you accidentally closed a tab, or something else break your efforts, you are stuck having to rewrite everything again.

Sisyphus helps solve this problem. It’s lightweight (1Kb) jQuery plugin that uses Local Storage to prevent your work being lost. And Sisyphus is easy to use and only needs you to select the forms you want to protect.

Glowform Login

login-resources-15_thumb2

CSS3 (image-less) Glowing Login Form .

Webkit browsers recommended. Use Firefox 4, Chrome or Safari, to see the fallback animation.

Quadodo Login Script

login-resources-09_thumb2

This is a free PHP login script that allows users to log in and sign up for pages on your website. You can have unlimited members, page, groups and permission masks. The administration panel and group panel use AJAX for fast functionality.

WordPress plugins

The following tools are plugins that can only be installed on WordPress platform, each of the plugins have their respective installation manual, installation files, etc. If you had doubts or questions please contact the plugins authors. Please note we included only well rated and updated plugins, hope they can be useful in your next wordpress project.

Sidebar Login

login-resources-05_thumb1

Sidebar-Login has both a widget and a template tag to allow you to have a login form in the sidebar of your wordpress powered blog.

It lets users login, and then redirects them back to the page they logged in from rather than the backend, it also shows error messages.

You can configure the plugin in Admin > Settings > Sidebar Login after installing it.

Login Configurator

login-resources-06_thumb

Login Configurator change the way your login functions work including forcing users to log in, changing the URL they go to when the login is successful, adding text to the login form, and change the logo and link on the login form.

SimpleModal Login

login-resources-07_thumb

SimpleModal Login 1.0 now includes a user registration and password reset feature!

SimpleModal Login provides a modal Ajax login, registration and password reset feature for WordPress and utilizes jQuery and the SimpleModal jQuery plugin.

WP Login

login-resources-08_thumb

The WP Login allows a user to create a custom login page or insert the default login form into the currently activated theme.

It includes the ability to upload a custom logo, change the colors, disable elements, and it contains a theme editor specifically for the login form. This theme editor gives maximum control over the login form while still maintaining the default WordPress functionality such as login validation.

This is the most powerful WordPress login plugin available. Whether you’re looking for something simple or advanced, this plugin will work for you.

Login-box

login-resources-10_thumb

Login-box is a WordPress plugin that inserts into all your pages a login form, making faster the authentication process. As the Login-box is hidden, it doesn’t draws attention of your readers to this part of the blog that doesn’t interest them, but, for you (and the others editors of your blog), becomes quite practical to be opened with a simple combination of keys.

The Login-box presents a visual identical to the default login page of WordPress, but it can be easily modified with themes.

Social Login

login-resources-11_thumb1

The Social Login Plugin is a professional though free plugin that allows your visitors to comment, login and register with social networks like Twitter, Facebook, LinkedIn, Hyves, Вконтакте, Google or Yahoo.

Choose where to add the social login feature:

  • On the comment formular
  • On the login page
  • On the registration page

Optionally add the widget:

  • A login widget that you can easily attach to your sidebar is provided

Select the Social Networks/Providers:

  • Facebook
  • Twitter
  • Google
  • LinkedIn
  • Yahoo
  • OpenID
  • WordPress.com
  • Hyves
  • VKontakte (Вконтакте)

Increase your user engagement in a few simple steps with this plugin.

Login Logo

login-resources-12_thumb1

Login Logo plugin allows you to customize the logo on the WordPress login screen. There is zero configuration. You just drop the logo file into your WordPress content directory, named login-logo.png and this plugin takes over.

Note that you should use a transparent background on the PNG image and keep the width below 326 pixels for best results. Larger images will be downsized in modern browsers, but it isn’t recommended to rely on that.

This plugin also works in the mu-plugins directory.

Limit Login Attempts

login-resources-13_thumb2

Limit Login Attempts activates limits the number of login attempts possible both through normal login as well as using auth cookies.

By default WordPress allows unlimited login attempts either through the login page or by sending special cookies. This allows passwords (or hashes) to be brute-force cracked with relative ease.

Limit Login Attempts blocks an Internet address from making further attempts after a specified limit on retries is reached, making a brute-force attack difficult or impossible.

Login Lock

login-resources-14_thumb2

Login Lock provides a number of security enhancing features:

  • Enforces strong password selection policies.
  • Monitors login attempts.
  • Blocks IP addresses for too many failed login attempts.
  • Lets you manually unblock IP addresses at any time.
  • Lets you forcibly log out all users immediately and require that they all change their passwords before logging back in.
  • Lets you forcibly log out idle users after a configurable number of minutes.

Enforce Strong Password Policies:

  • Define which types of characters must be used in passwords.
  • Define the minimum required password length.
  • Define how long a password is valid before it must be changed.
  • Prevent users from reusing the same passwords repeatedly.
  • Prevent users from choosing common passwords, includes a list of more than 3100 common passwords.

Emergency Lock Down:

If your site is ever hacked then you probably need to make sure the intruder is forced to logout and is no longer able to log back in to your site.

Login Lock provides an emergency “panic button” that, when used, immediately logs out all users, resets all user passwords to a random value, and sends each user an email message informing them that they must change their password before logging back in to your site.


39 Responses to “Web Login, the definitive guide”

  1. Thanks for this great list.. Its useful as Login effects and techs.

  2. nice blog…

  3. Tenny
    December 1st

    I love the theme you have here…Awesome!!

  4. Wow! This has got to be the most comprehensive login-related WordPress plugins guides I’ve thus far discovered. Kudos to you for your hard work!

  5. Thanks for writing this useful guide.
    I can identify me.com, facebook.com and a couple more sites, but not all. Can you put their URL behind the picture of each login screen?

  6. Fantastic tutorial about the login forms! A lot to take in.. but I’ll definitely use some of these tips :)
    cheers

  7. I am sure this post has touched all the internet people, its really really nice post on building up new web site.

  8. Web Login, the definitive guide http://t.co/e5GKehIk via @webdesignshock

  9. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/negUdGXC via @webdesignshock

  10. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/AJtjLzVk via @webdesignshock

  11. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/sQ67lTjE via @webdesignshock

  12. RT @EtnasSoft: La guía definitiva del ‘Login’ en páginas web. http://t.co/mn65nl0J

  13. RT @EtnasSoft: La guía definitiva del ‘Login’ en páginas web. http://t.co/mn65nl0J

  14. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/VFop9SSE via @webdesignshock

  15. Web Login, the definitive guide http://t.co/ZkkRefuT via @webdesignshock

  16. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/uWPVIYxX via @webdesignshock

  17. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/4REJhG77 via @webdesignshock

  18. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/PjDhwpEC via @webdesignshock

  19. Web Login, the definitive guide http://t.co/9r8Km5NI via @webdesignshock #usernews

  20. Do’s, dont’s and fresh #resources for #web #login systems. Please RT http://t.co/mMOdLCLw via @webdesignshock

  21. RT @EtnasSoft: La guía definitiva del ‘Login’ en páginas web. http://t.co/mn65nl0J

  22. Very good article – Web #Login, the definitive guide http://t.co/6zLFzrOw via @webdesignshock #webdesign

  23. Web Login, the definitive guide http://t.co/KIlxqcv4 via @webdesignshock

  24. Web Login, the definitive guide http://t.co/VNPSli3p via @webdesignshock

  25. Zoran Arsovski (@arsovski82) (@arsovski82) says:

    Web Login, the definitive guide via @webdesignshock

  26. #Webdesign Web Login, the definitive guide – http://t.co/cu4Iawza

  27. Les bonnes pratiques pour les pages de Login

    #webdesign

    http://t.co/BQBLM98m

Leave a Reply

Comments

*