Using Color Psychology to Create an Effective Price Table

Whenever we start any new design project, we’ll usually sit down with the client and discuss all the relevant project details with the client. If you’re lucky, your client will have a relatively clear idea of what they want to achieve and perhaps even the functions and features they want for the site.

However clients often put less thought in considering colors and palettes. Perhaps they’ll suggest ‘I love this color – can you use it?‘ or ‘Can we use the same color scheme as my favorite site? I know it’s not related, but the colors look amazing!‘.

Now, I’m not suggesting there is anything wrong with these answers; you can definitely use your favorite color for a causal site or a hobby site.

But when you are talking about specific business goals, it probably pays to take a more scientific approach to the color scheme you associate with your brand.

You need to explain the importance of ‘Color Psychology’ and how it can ultimately influence your bottom line.

What is Color Psychology?

Colors are all around us and they affect us in many ways. They can trigger certain emotions and moods. Research explains how colors can affect your customer or visitor behavior towards a brand. In simple terms, we can influence the way people respond to our design.

Let’s look at some popular colors and the impact they tend to create:

Blue

Skype Home page

Skype uses saturated blue and green
to evoke a sense of trust, calmness
and energy

Inspires: Trust, Responsibility, Security and Friendliness.
Used By: Facebook, PayPal, Skype, Ford

Green

Inspires: Nature, Money, Balance, Energy, and Health.
Used By: Starbucks, Animal Planet, John Deere

Orange

Inspires: Joy, Excitement, Aggression and Action.
Used by: Fanta, Nickelodeon, Soundcloud

Brown

Fanta Website

Fanta is going for a playful,
joyful feel with their use of orange.

Inspires: Comfort, Organic, Friendliness, and Dependable.
Used By: Hershey’s, Organickidz, UPS

Black

Inspires: Power, Class, Elegance, Grief and Prestige.
Used by: Johnnie Walker, Chanel, Nike

Pink

Inspires: Femininity, Love, Gentleness and Romance.
Used by: Victoria’s secret, Barbie, SUPRÉ

Purple

Inspires: Creativity, Dignity, Authority and Wisdom.
Used By: Yahoo, Hallmark, Cadbury

Johnnie Walker site

Johnnie Walker is tapping into
a sense of prestige and power
by using black

Red

Inspires: Passion, Anger, Danger, Energy and Attention
Used by: CocaCola, Canon, Levi’s, Virgin

Now we can get a sense for how the emotions we evoke using colors could help to increase the conversion rate of our design.

Let’s play with color psychology and create a converting ‘Price Table’ using specific colors to grab the customer’s attention. We will use three main colors for our price table:

  • Blue
  • Orange
  • Red

Well-established marketing know-how tells us that when presented with a 3-tiered offer (for instance, Bronze, Silver and Gold options), the majority of users will select the middle-tier option.

Presumably people don’t like thinking of themselves as either overly cheap or extravagant, so the middle tier appears the wise option.

In fact, it’s common for marketers to create deliberately less-attractive ‘bronze’ and ‘gold’ options with the express purpose of making their mid-tier ‘silver’ offering seem comparatively great value.

In our case, we are going to use blue to make our middle option appear to be the safe, sensible and responsible choice.

Of course, there are no absolute right and wrongs with these color choices, and you don’t even have to use different color in each panel. But in our case, we want all our plans to stand-out somewhat equally, while making our default options feel like the safe and prudent choice.

Here’s what we will be creating:

Price Table Final Result

So let’s get started.

Step 1:

Create a new document in Photoshop with 780px width and 680px height.
Table1

Step 2:

Firstly, we’ll draw the base of our price table. So, pick #f6f4f3 fill color and select the Rectangle Tool (“U”) and click the canvas to view the rectangle window. Enter 256px for width and 614px for height and hit “OK” to draw a rectangle as shown below.

Label it as “Base”.

Table2

Step 3:

Double-click the Base rectangle to view the Layer Style window. Apply given settings for Stroke and Drop Shadow.

Table3
Table3b
Table3c

Step 4:

Pick #e6e6e6 fill color and select the Rectangle Tool (“U”) to draw a rectangle along the top border of base of 256px width and 45px height.

Table4

Draw another rectangle with the same fill color of 256px width and 245px height as shown here.

Table4b

Step 5:

Next, I’ll show you how to make a simple pattern in Photoshop. Create a new document with 5px width and 5px height. Make sure to choose “Transparent” background. To view the canvas properly drag the navigator slider towards right at 3200%.

Now pick the Rectangle Tool and draw a 1x1px rectangle, position it in the center of canvas. Make 4 copies of it and arrange them as shown below. Once you are done, go to Edit> Define Pattern and label your pattern.

That’s it.

Table5
Table5b

Step 6:

Come back to your document, click the Base rectangle and make its copy by going to Layer> Duplicate Layer. Place the copy above the rest of the rectangles.

Table6
Table6b

Make its fill 0% and apply given Layer Style settings on it.

Table6c
Table6d

Step 7:

Next, we’ll add the title text. Pick #736a76 fill color and select the Horizontal Type Tool (T) to type the title. I’ve used ‘Adobe Fan Heiti Std’ font here which is included in CS6.

Table7

Step 8:

Double-click the text layer and apply given settings for Drop Shadow.

Table8

Table8b

Step 9:

Now add the details, apply given settings in the character panel of Type Tool. Make sure to set the leading at 50pt.

Right-click the title text and choose ‘Copy Layer Style‘ option. Now right-click the details text layer and select ‘Paste Layer Style‘ to apply the same settings for Drop Shadow.

Table9

Step 10:

Next, we’ll add separators. Pick #9c949f fill color and draw a thin rectangle of 176px width and 1px height. Make few copies of it and position them between the text.

Table10

Step 11:

Pick #2b76b6 fill color and select the Polygon Tool. Hit the canvas to view the polygon window and apply given settings here to draw a polygon shown below.

Table11

Step 12:

Double-click the Polygon layer and apply given settings for Drop Shadow and Bevel & Emboss.

Table12
Table12b
Table12c

Step 13:

Next, we’ll add the price over the polygon. Pick #f9f7f6 fill color and type the text using the same font. I wrote $39 with 41pt font size and /m with 30pt.

Table13

Double-click the text and apply given settings for Drop Shadow.

Table13b

Table13c

Step 14:

We’ll make the signup button now. Pick same color as used for the polygon (#2b76b6). Now select the Rounded Rectangle Tool to draw a rectangle with 183px width, 51px height and 8px radius.

Table14

Step 15:

Now right-click the polygon and choose ‘Copy Layer Style’ option. Now right-click the button layer and choose ‘Paste Layer Style’ to apply same layer style settings on it. After that, pick the Horizontal Type Tool to type ‘Sign Up Now‘ with 18pt font size and apply same drop shadow settings on it as applied in step 13.

Table15

Step 16:

Our main price table is ready. To make the side tables duplicate the entire group, place it below the original and drag it towards left. Press Ctrl+ T to activate the Free Transform Tool and decrease the height of Base and its copy up to 94%.

Table16

Now adjust rest of the elements to fit in the new base height and edit the text. Also give orange shade to the polygon and button.

Table16b

Step 17:

Duplicate the modified price table and drag it towards right. Edit the text and change the polygon and button color to red.

Table17

Step 18:

To create shadow, create a new layer just below the original price table. Now pick the black fill color and select the Soft Round Brush Tool with 100px size and apply it as shown below.

Table18

Step 19:

Select the top portion of shadow using Rectangular Marquee Tool and go to Edit> Clear. After that, select the bottom part and get rid of it similarly.

Table19

Step 20:

Table20

Change shadow layer blending mode to ‘Multiply’ with 40% opacity.

Final result:
Price Table Final Result

And there you have it!

In any price table you should have set some goals and call-to-actions. In our price table we’ve presented all the options attractively, but have also used both size and color to give more focus to our Basic Plan, and to make it more prominent.

You can see that with careful use of color psychology in your project, you can create both a more memorable experience for your visitors aa well as a more effective result for your client.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.isights.org/ Michael Long

    The article started off promisingly enough, discussing research and color psychology, then went off the rails creating a set of static PS elements that can’t be easily changed or tested. Color psychology is a good start, but nothing beats doing actual A/B testing and letting the metrics tell you which set of colors convert best for your particular site and audience.

    Perhaps the high-end option should be the “safe” color, with the idea of driving more sales upward into the higher tier? Or would a green “go” color work better in the middle? Until you test, you’re just making assumptions.

    Perhaps another article could discuss this, as well as show how to easily slice off the seals and buttons such that they can be swapped around along with a few other colors.

    • Manuel

      I wanted to write exactly the same answer… I skipped the PS part and hoped for some tests to these assumptions.

    • OphelieLechat

      That’s a good idea, Michael. Stay tuned for a follow-up in the near future!

      On the topic of A/B testing color psychology, have you seen this infamous quote by Douglas Bowman? http://www.zeldman.com/2009/03/20/41-shades-of-blue/

      • http://www.isights.org/ Michael Long

        Yeah, I’ve heard Doug’s quote. But there’s plenty of middle ground between simply making assumptions and color testing every single design element on your site. (grin)

        The price table shown above is likely to be one of your primary conversion entry points, and as such just a little testing might be in order.

        • Alex Walker

          Fair comments and great feedback, Michael. The article is quite ambitious in incorporating two big ideas that both require a lot of covering (physcology and a PhotoShop technique). I suspect we’ll be talking about another article expanding on those ideas on Monday morning.

    • http://glmdesigns.blogspot.com/ Gilbert Midonnet

      I also liked the beginning and then went “what’s going on” when getting to the Photoshop part. The questions I thought would, or was lead to think would be answered were: is there a color progression that influences people (or differences in shade and hue)?; or should price charts contrast with the overall color scheme of the site? or other such questions.

      I liked the Photoshop section of the article but didn’t feel as if what originally attracted me to read the article was adequately answered. Nice presentation though.

    • http://www.makingyoufindable.com/ Tom Lyons

      You can test this easily, create your template, then make your two options for colors, and create two landing pages and use any A/B test tools to serve up the options. See which colors worked best. You’ll want to test only one color at time, so using a tool like Google Analytics Experiments you could serve up 6 or more combinations and test them all. I thought the author did a great job giving us the tools to make that happen.

  • KalpeshSingh

    Loved it.

    You have started with color phycology and then PS designs. It is a complete package, or I can say the color phycology part is a bonus.

  • Michael Smith

    I would agree that the article was a good enough read, but the static images were a bit of an odd choice there at the end. Search engines aren’t going to be able to pick up on any of the information in your charts.

    • OphelieLechat

      The design work is done as static images, but in most cases it isn’t pushed to the site that way, there’s some front-end work involved.

  • Kris Jolls

    Was a good enough read without the tutorial. Maybe you can desperate the two then expand in colors in the pricing tables.

  • Kevin Kaostricks

    Awesome tutorial.

  • Francis

    I think discussing color on a blue vs green basis is over-simplistic. A light yellowy green suggests spring shoots, hence hope, youth, innocence – dark bluey green suggests ivy, the seats in the house of commons, hence stability, establishment. Black can be for mourning or for elegance and class, or shiny black can be sexy. Light pastel blue suggests babies, rich dark blue suggests royalty, then there’s sky blue. And interpretation varies vastly with culture. And there’s also the way the colors interact between each other. So I think the best bet is to follow your instinct and the opinion of other people.

  • David Anderson

    I’d like to see some actual data about color psychology beyond the simplistic platitudes asserted in this article. It’s important to remember, too, that color ‘psychology’ is highly dependent on the viewer’s cultural background.

    Why people choose the middle option has more to do with anchoring and irrational price comparisons offered by the starter and pro plans. And the physical design of promoting the middle option implies that it is the popular choice, which leverages unconscious psychological motivations. Dan Ariely’s ‘Predictably Irrational’ and Susan Weinschenk’s books on using psychology for web design contain excellent insight into these points.