Form Design

Brand design can extend into all realms of a business’s designs – even into the design of feedback or subscription forms on your website. Here’s an example of how you can customize a form to match your brand design.

This is the original output of a form-creation program:

Original form output - before design

It’s decent, certainly – but we can do better.

When you’re designing your form, keep your brand’s color palette, font style and other brand standards in mind. Here’s a designed version of the same form, followed by a discussion of the changes that were made.

Designed form

1. Adding a headline can help to make the purpose of your form clear. Headlines also make the form design more eye-catching. Design the headline to match either the other headlines or sub-heads on your page, in terms of font face, alignment, color choice and size.

2. Include instructions on how to use the form, and set expectations about what will happen once the form is filled out. This helps to visually anchor the form and to also make the person filling it out feel more comfortable about doing so. Again, the font face, alignment, color choice and size of these instructions should be matched to your other materials – in this case, your body copy.

3. Style the form field labels. Change the font face, size and color palette on the form field labels (Name, Email, Company, etc.) to match your body copy.

4. Align the form field labels (usually left, unless your brand guidelines specify another choice). You may be able to do this by just styling the text, but you may have to change the table styling if your form was delivered in an HTML table.

5. Design or style the “Submit” button. Your choices here include:

  1. Keeping the default style (shown here)
  2. Changing the text that appears on the button. This can be done in the HTML code by changing the ‘value=”Submit”‘ text to read ‘value=”Your Text Here”‘.
  3. Swapping out the default button style for a graphical button. The code for this is: <inputype=”image” src=”images/submit.jpg” value=”Submit” alt=”Submit”> where ‘submit.jpg’ is your image file. If you choose this route, design the button to match your color palette and brand, but make sure that it is still easily identifiable as a submit button. You may do this through the words on the button, or by using an arrow graphic if space is limited.

6. Consider placing a border around your form. This can help to distinguish it from other elements on the page, and help it stand out from the rest of your content. Your border can be solid, dashed or dotted. Choose the option that aligns with your brand.

7. Add a background color. This is another way that you can make your form stand out and call attention to itself. Choose a background color that your headline and body copy colors contrast with, to ensure that they will be legible. And, make sure the background color coordinates with and compliments the rest of your brand. You may also choose to place a subtle pattern in the background if your brand calls for that.

elf@elf-design.com' About Erin Ferree

Erin Ferree is a brand strategist and designer. She works with small businesses to create brands with substance and style that fit their businesses perfectly.
She's designed brands for hundreds of small business all over the world. Her brands help her clients attract their ideal clients, outshine their competition and make them unforgettable. She also works with small business owners to develop complete clarity about their brand positioning and to develop total brand clarity.
Her award-winning design work and her writing on design have been published in many books and periodicals.
Erin lives, cooks and plays tug-of-war with her dog Stanley in San Luis Obispo, California. Her website is http://www.brandstyledesign.com

Comments

  1. Hiya!. Thanks for the info. I’ve been digging around for info, but there is so much out there. Yahoo lead me here – good for you i suppose! Keep up the good work. I will be popping back over in a few days to see if there is any more info.

Speak Your Mind

*

Help us fight SPAM * Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow by Email
LinkedIn
Share
Twitter
Visit Us
Follow Me
Women In Consulting Blog