Pricing tables have become an essential element of every online business website. While it can hike up your business if done neatly, it can also be the tombstone of your online business.
A pricing table’s task is to help users choose the best pricing plan for them based on their needs. But we often find the tables dazzling and hard to understand.
Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Designing an efficient pricing table requires a subtle yet solid mix of design and usability. In this post I’m going to share some tips on creating stunning price tables, discuss some of the best practices and present a list of some of the most successful price tables out there.
Table of Contents:
- Pricing Tables – Best Practices
- Create a Pricing Table using Photoshop in about 20 Minutes
Pricing Tables – Best Practices
This section is going to present you the basic idea of how pricing tables should be structured, what design should be used to persuade your visitors. Pricing tables should be clear and straight forward with no confusion for your visitors.
Pricing Tables Structure
Most of the tables are horizontal because it’s easier to compare the offers and see features. That doesn’t mean you should always use the horizontal layout, though. It really depends on the variety and complexity of the information you want to display in the chart.
Best practice is to use a horizontal solution when you have to display a lot of features and a vertical one when you don’t have a lot of plans to offer and you’re not planning to include a long list of features.
Dropbox is an example of vertical layout pricing chart. Their plans only have minor differences so this is an efficient way to display them.
is a classic example of horizontal pricing table structure. They need to include some features which are easier to compare viewed side by side so a horizontal layout is the best solution here.
Design can do one of two things to your business – either sink it or raise it to the top. You have to be very careful when designing a pricing chart. Fonts, headlines, layout – it all has to be balanced and done neatly.
Furthermore you have to make sure the chart’s design works with the main site. However don’t forget about your main goal. In price tables, design is just a tool to achieve your objectives, namely – increase sales. Simplicity is the key to success.
Remember that you’re not creating a collage for school, you’re creating a design for a specific reason. Don’t clutter your chart with unnecessary elements.
A common mistake is to write down a list of features most of the plans don’t offer and then put dozens of red crosses in your chart. Consumers don’t want to see what you’re not offering, they want to see what you’ve got and for what price.
is an excellent example of proper use of design in pricing charts. In the left section you can see features and the most important phrases are bold. They’re using subtle green checkmarks and there are only two red crosses which are necessary to compare these two plans.
Rule.fm is another example of appropriate use of design in pricing charts. They’ve adapted the chart to their main design and have managed to use design elements neatly and plainly.
Emphasizing one specific plan is a common practice and you should do the same. With a lot of different plans to choose from it’s important to make it as easy as possible for your customers to choose the right one for them.
With an emphasis on one particular plan you immediately draw your visitors attention to that one special plan. Most of the services choose to highlight the most popular package, however you can experiment. Yet don’t go to extremes – highlighting the cheapest and most expensive plans won’t bring much income.
Emphasizing the right one can seriously enhance your business and it can also be incredibly useful from a potential customers point of view.
There are plenty of ways to emphasize a plan. Vivid colors, different backgrounds, badges, frames, huge call to an action buttons. Design and creativity – it’s all up to you. However keep in mind that exaggeration will only do harm. Never emphasize more than one pricing plan.
Using different backgrounds for each pricing plan can be fine though you have to be careful with that too.
Shopify uses a bigger background graphic and price font size to emphasize their most popular plan. They’re using different backgrounds for each pricing plan though they haven’t exaggerated the color scheme and the colors create the right ambiance.
Ning is using a different background color to emphasize one specific plan. Note that it’s the medium-price plan so emphasizing is most likely used as a marketing strategy. The green immediately catches your attention and most likely you won’t even look at the other pricing plans.
If you’re offering both free and premium plans then from the business perspective your goal is clear – convince people to choose the premium plan. This is where design and marketing play a major role. You have to be able to share your message quickly and in a visually effective way.
It may not be important if you don’t offer a free plan though you should still be aware of this. Try to distinguish the differences between pricing plans as clearly as you can.
A common mistake you should avoid is writing down a list of features that are available in each plan. Also think about the sequence. You want to place your main and distinctive features for each plan somewhere near the top. As you’re coming to the bottom you can start to include some features that are provided in all plans.
When looking at the Big Cartel pricing chart I just can’t fight the feeling of actually wanting to sign up. They’ve managed to distinguish their premium plans from their free plans and make it very appealing.
Evernote has also achieved an appealing look for their premium plan. Besides the smooth pricing chart they’ve got some descriptions with icons in the page. Remember that charts ain’t the only way to attract clients.
While you may think that offering more plans is effective and gives costumers a wider range of choice,having too many plans can severely affect your bottom line. What’s more, a lot of services don’t offer enough unique features to sustain a lot of pricing plans. The most popular solution is to have about 2-5 plan options. Going beyond that will just confuse your costumers and harm your business.
So you’ve created your, let’s say, three pricing plans and now you have to introduce the clients to the services you offer. You write down every single thing you offer including a lost password’s recovery. Then you look at your final result and conclude that you have to scroll the page down to see all the features. That’s a fine thing to do if you want to shoo your costumers for good.
Having the right pricing plans isn’t enough. You have to present your services the right way. There are tables that leave you uncertain and confused about what the company is trying to sell. And there are tables that leave you puzzled and overwhelmed by the quantity of features.
With more features the amount of information the visitor has to absorb grows. You need to find the right balance between too much and not enough information.
You want your feature list to be comprehensive but concise so that after reading it the potential consumer can knows what he’s getting for his money.
Animoto pricing chart undoubtedly won’t leave you confused. They’re using a minimalist design style with some accents. They’re offering three pricing plans and each of them is distinct. The main features are listed at the top and followed by more advanced features which are offered only in the pro plan.
has gone with the “less is more” approach. They’re using a modest gray pricing chart with green accents. The chart is not cluttered with unnecessary elements so it’s very easy to comprehend. Plus they’ve highlighted one particular plan so it’s even easier for potential clients to make the decision.
A lot to take into consideration, isn’t it? Well, wherever there’s money involved you’ll have to adapt and shape your design in order to achieve the desired result. I hope these five points helped you to get a little insight into designing effective pricing element and gave you a clearer idea about embracing design and how best to combine it with marketing.
These guidelines aren’t written in stone and it’s up to you how you follow them. Maybe you find them useless for your business and that’s absolutely fine. There is no one right formula for designing pricing table since every business is a bit different.
However, I believe that these points made you at least consider your existing/forthcoming pricing table. That would be about it from theory outlook. Time to give you some terrific examples. Below you’ll find 15 examples of well-designed price tables for your inspiration.
To be easier for you to be inspired and design your next pricing table as good as possible we are also providing you with some of the best pricing tables out there.
5. Drupal Gardens
12. Campaign Monitor
13. Raven Tools
That’s about the inspiration. Now we want you to complete the tutorial bellow and create a great pricing table in Photoshop. Of course with our comment and tips for help.
Create a Pricing Table using Photoshop in about 20 Minutes
We are used to presenting data using different graphics, modules and tables so that the information is easier to understand.
Pricing tables have been, and still are, used by a lot of companies and individuals to display their available plans.
It’s pointless to use a pricing table if you only have one plan to offer. But if you have more, then it is a very useful and attractive way of displaying information about each of your plans. We’ll be using Adobe Photoshop to create a pricing table which will only take about 20-30 minutes.
Are you ready?
Create a new 1200x600px document. Our pricing list itself will be 1000x340px but we need some work space that’s why our main document is larger.
By using the Rounded Rectangle Tool (U), create a shape of 1000x340px. Apply a barely visible outer glow effect as well as a 1px stroke. Set the stroke color a little bit darker than the color of our shape.
We’ll divide our pricing table into 3 sections. The “header”, the “content” and the “CTA” zone. Our “header” section will only contain the name of the plan. By using the Rectangle Tool (U), create a shape that is 1000pixels wide and 70px high. Give it a dark gray color (#e0e3e3) and apply some Drop Shadow to achieve the effect we would get by applying “Outer Glow”, the only exception is that we can set a direction (by changing the angle).
Our Pricing Table will contain 4 plans which you can sign up for. It is a common thing to highlight one of the plans, and mark it as the “Best Deal” or something similar. Use the Rounded Rectangle Tool (U) and create a shape of 250x290px. Your shape must have the same effects applied as our base layer.
Repeat the third step, the only exception would be the header. Give it a darker gray color (#d1d1d1).
In our pricing plan, we will be using 2 fonts, “Open Sans” and “Helvetica”. Use the Semibold weight of “Open Sans” for the plan names in the “header” section of our table.
Use “Helvetica” for the price of each plan. As we want to highlight our “Advanced” plan, we will make the price tag a brighter red.
We move on to the “content” section. It will consist of 3 features that you are going to provide your customers. It has a pretty simple structure. We’ll be using “Open Sans” as our font. The numbers are 24pt Bold. The text is 14pt Regular. Each feature is divided by a “dotted line”, but can be easily changed with a simple line.
Each plan must have a CTA Button which would allow customers to take an action. Whether it will allow them to find out more, or proceed to pay, the button must be there. By using the Rounded Rectangle Tool (U), create a gray shape and apply a dark gray Drop Shadow effect.
Apply the Gradient Overlay effect with the Blend Mode set as Soft Light, and the Opacity: 40%.
Finish the button by adding a Gradient type of Stroke.
By using “Open Sans Bold”, 24pt, input some text on the button. “Choose Plan” looks good to me. Now duplicate the “content” and “CTA” sections twice that we have just created and place them accordingly. Refer to the final version if you feel a little bit confused.
The “Advanced” plan does not differ much except the brighter price tag and the CTA button. The red button is pretty similar to the gray one, the only exceptions are its base color which is: #ed161c and the stroke colors which you can see below.
Change the stroke colors from the gray ones to the following red ones and finish the button.
What do you think about this tutorial? Share your thoughts! We also want to know what are your thoughts about tips that are shared in this article? Do you have any tips that you want to share? If you liked the article please share it with your friends.