General

Color Theory for Sign Up Form Design

Color tends to trip a lot of “non-designers” up. It could lead to confusion, doubt, often, poor color combinations.

Besides causing jarring color pairings, poor color choice could make your marketing less effective. (Up to 90 % of people make decisions based on color alone!)
This is specially true of email sign up forms. To get people to complete your forms, they should notice them first. And color plays a big role in whether / not visitors see a form on your site.
But here is the good news: You could easily avoid sign up form color mistakes. With a basic understanding of how colors relate, a design novice could create beautiful color combinations that catch everyone’s attention.

In this post, I will teach you 3 color theories you can use to choose sign up form colors. Plus, I will explain how your brand colors affect the design choices you make. While I will be applying the color theories in this post to sign up forms, you could use them for other things too.

Analogous colors support an easy-to-implement aesthetic

Analogous colors are adjacent on the color wheel. Basing on how many color segments you break the wheel into, this could be blue, green and yellow or even 3 shades of any one color
This makes the color picking process a little simple. If you find one color you like, you can identify the other 2 colors you should use by looking at adjacent colors on the color wheel.
Complimentary color schemes feel like smooth jazz

If you would like to make your forms more interesting, think a complimentary color arrangement.
Complimentary colors are on opposite sides of the color wheel. For example, blue and orange, green and red / purple and yellow.
These pairings make for beautiful arrangements, when moving away from the primary colors. They’re visually appealing and add visual contrast.
Contrast silently screams to your audiences “Look at me!”

We would be stuck in a bland world with limited exposure to life-giving diversity.
When the principle of contrast is applied to sign up forms, your users pay attention to what you want them to. This is powerful, as it could lead to something as simple, yet important, as more people noticing your call-to-action button & clicking on it.

There are 2 ways to utilize contrast in sign up forms:

1. Contrast between the form & the site itself

The idea is to make the signup form’s background a highly contrasted color from the site. This draws the eye to the form naturally. Here is an example of what that could look like:

2. Contrast within the form

Once you have the attention on your form, your visitor should know exactly what they should do next – complete the form! To make this more likely, both the form fields & the button should be very noticeable. Contrast has a lot to do with it.

Notice how this form instance below uses contrasting shades of black, yellow and white to draw the eye to the form, the fields & the button all at once:
If you chose to use complimentary colors, this is a good opportunity to make your button and form background both compliment every other yet contrast. There is no quicker way to say “click here” than with color!

What about my brand?

When it comes to applying these concepts to an existing brand aesthetic, there may be hesitation / misunderstanding on how the 2 can coexist.
If you have established brand colors, no fear! The most complex & the simplest brand color schemes can apply these principles. By accepting that sometimes you’ll need to break free of a brand color to select the right colors.

You may realize that a new color should be added to your brand to adapt to the way your site is growing & changing.
Picture a brand as a person. Over time people change. There is nothing inherently wrong with that. I do not wear the same styles today that I did 5 or 10 years ago, but everyone still know who I am.

In the same way, your brand should be flexible enough to weather time. Putting in a new color on your site outside of your brand standards document might begin a new, better era for your business.

If you would like to use new colors that work with your brand colors but you are not sure how to choose them, try Coolors. With Coolors, you could add your brand colors to a palette and the tool will select colors that work with them.

Unlock the designer within

Whether you are struggling to get your first sign up form created / performing your hundredth split test, try using some of those principles today. I hope they unlock the designer in you & help you design beautiful, converting forms.

 

Leave a Comment