How to Align Labels in Web Forms

What is label alignment and why are we seeing so much fuss about this subject?

Interestingly, one of the website design issues that causes a lot of dialog and thought is about the placement of labels on your website forms.

Some of the main issues that continually arises over this web design area is how to align labels with the form inputs. Now this may sound like a trivial problem and something that no one in their right mind would want to spend much time on; however, this one issue can make or break any form usage on the web.

The first element of label placement is readability of the form. Placing labels in a haphazard manner will absolutely guarantee failure in attracting your website visitors to fill out appropriate forms, whether they be questionnaires or order forms.

There is no universal agreement as to what is the best and most readable format to use in label placement, but there are some strong guidelines to consider when designing your forms.

All considerations have their pros and cons, so let’s take a look at some of the most obvious ways to handle label placement.

LEFT-ALIGNED LABEL STYLE

LEFT-ALIGNED LABEL STYLE

This style carries the advantages of:

  • Probably the easiest for quickly scanning the label content
  • Left-aligned labels line up in vertical rows
  • Users can scan labels and usually understand the form immediately
  • This style uses less vertical space

The disadvantages of left-aligned label placement can be:

  • Requires more horizontal space
  • Somewhat more time consuming

As stated, left-aligned label placement seems to require more time to complete, even though they are easy to understand. Still, if needed input is cumbersome or involved, a slow completion rate is not necessarily a handicap.

RIGHT-ALIGNED PLACEMENT

RIGHT-ALIGNED PLACEMENT

The advantages of right-aligned placement include:

  • The very easy visual connection for readers when viewing labels and the inputs.
  • Excellent for short forms.
  • Right-alignment needs less horizontal space.

Disadvantages for right-aligned labels can be:

  • Less vertical space.
  • Not easy to immediately understand because of the lack of a strong left side/edge that makes reading comfortable in languages that read left to right.

TOP-ALIGNED LABEL PLACEMENT

TOP-ALIGNED LABEL PLACEMENT

Advantages in this category are:

  • Top-aligned forms usually boast the shortest completion time.
  • Use less horizontal space than other alignments.
  • Easy reading.

Top-alignments do have a few disadvantages:

  • Long forms will use too much vertical space in top aligned labels.
  • The longer the form, the slower the completion time.

Each label alignment has advantages and disadvantages, so choose one that seems to fit your web design as well as your form needs the best. If you have more vertical or horizontal space, then choose accordingly.

The key to good looking, usable and readable forms is to, above all, keep consistent in your over-all web design; if you have need of many forms on your site, then choose one alignment and stick with it. Always remember that a consistent look to your website is more important than whether a label alignment is to the left, right or top of any form.

Best Color Palette Generators

Before we talk about the best color palette generators maybe we should answer this question: what in the heck is a color generator?

Good question!

A color generator is an online tool or program for those looking for or needing a great website color scheme. Color generators are designed to help developers put together an incredible color scheme for any website. At the moment there are about 50+ color generators online to choose from, which is good news. Color can make or break a website, so having a great choice of color to work with is an awesome gift.

Every designer knows that when they are building a site they must make sure that the color pallet is as perfect as possible. Finding the right colors for the right projects can be an interesting ordeal. Something as seemingly simple as color can really be a stumbling block. This is why a color palette generator can be a godsend.

So, let’s look at a few of these mysterious color generators.

1. Color Rotate

It is new in the world of color generators and a good pick. The cool thing about this generator is its 3D and animated. You can also create your own personal colors or select from the pallets.

2. Color Scheme Designer

It is the most used color generator on the web and is a favorite of designers. This generator has a boatload of features, and is a superb product.

3. Color Schemer

Color Schemer is a nice program that is easy to use. If you choose one color then the generator will give you a choice of sixteen colors to create your palette from.

Color Shemer

4. Adobe Kuler

Adobe Kuler has tons of features and can create themes from an image and/or from a color selector. It will even create and define colors from a mood.

Adobe Kuler

5. The Color Calculator

It is an incredible tool for developers. It can divide color into five options. These options break into points of color and create a design from the colors of the generator.

Color Calculater

6. Toucan

Toucan is a generator that you definitely want to get acquainted with. It is just one part of a powerful suite of tools that was designed for developers by Aviary. With Toucan you can create your own color palette from an image. There are a number of ways to achieve a beautiful color palette from Toucan.

7. Color Wizard

It is a generator that can start with a base and then return coordinating colors to match the selection. It also returns different hues and shades of your color of choice. Color wizard can also generate random color schemes upon request.

Color Wizard

So, here are a few color palettes to peruse, out of the 50 plus generators available online. Whether you are a seasoned web designer or a novice just learning the ropes, these generators will help you choose and develop great color schemes for websites.

The thing to remember is that color will make or break your website, so take color seriously. Learn to use it with care and taste so as to promote exactly what you want to convey for web success.

Showcase: 20 Awesome Bollywood Movie Websites

If Hollywood is all action, special effects & animation then Bollywood is drama, emotions & traditions. But there have been many Bollywood have improved & now following the footsteps of the west. One of them is launching new website to promote their movies, here i have shared some of the interesting official  movie website which are highly interactive. There are some really good website in the list so if you are a designer then there is lots of inspiration to be found here.

The only problem I found with most of the website is that they are flash website & were not search engine optimized. Flash websites means a long waiting time before you can completely see the site & not search engine optimized means if you type in the name of the movie you will not find the website in the top rankings, which made me think that if they want to promote their website through internet they should consider these factors.

Aisha

Aisha The film - Offical Website

My Name Is Khan

My Name Is Khan - Offical Website

Wake Up Sid

Wake Up Sid Offical Website

Once Upon A Time in Mumbai

Once Upon a Time in Mumbai Offical Website

Love Aaj Kal

HouseFull

Raajneeti

Raajneeti - Movie Official Site

Karthik Calling Karthik

Karthik calling Karthik Offical Website

Kaminey

Wanted

Raavan


Veer

Kites


Love Sex Aur Dokha

Love Sex aur Dhokha, Offical Website

Lamhaa

Lafangey Parindey

LAFANGEY PARINDEY - Official Website

Jail

Jail The Movie -Offical Website

I Hate Luv Storys

I Hate Luv Storys - Offical Website

Blue

BLUE -The Official Website

All The Best

ALL THE BEST Offical Website