Pricing Table Generator

Pricing tables allow you to present the different products or packages you are offering to your customers in a format that will help them to choose which is best for them. In this post we'll look at some inspirational pricing table designs, what to think about when creating your content and a free pricing table generator tool that will save you time creating the markup. 

Choosing your content

Your pricing table will often be the last step your visitors will used to make an informed decision on which of your packages or products they are going to purchase, so you want to make sure it's helping and not hindering the buying process! When putting together the content for your pricing table, here's some useful tips:

  • Focus on helping your visitors to choose the best option for them
  • Try to be consise with the information, don't over overload your visitors with details
  • Focus on the differences between the options
  • Make the price and other information that is more important stand out
  • Don't overload the design with unnecessary graphics, keep your visitors focussed on the content
  • Highlight the option you want your visitors to buy (or that is more suitable for most buyers)
  • Make it easy for your potential customers to follow through to signing up / purchasing

Inspirational Pricing Tables

Take a look at a few case studies of well designed pricing tables that conform to the tip suggestions above.


Notice how the key information is highlighted, namely the package titles, prices and free trial option. The option to continue clearly stands out with the orange button and the design is free of any unnecessary graphics.

Pricing Table


Another minimalist design highlighting key information like the price. The features focus on the differences over the similarities and they have pointed out the 'most popular' option to make choosing easier. 

Pricing Table


Wufoo have taken a more colourful approach to their design but abide by the same design rules; highlight the price and most popular option, clearly show the path to continue to the next step and focus on the differences.

Free Pricing Table Generator Tool

Save yourself some time creating all the code with this free pricing table generator tool. It features some preset templates to get you started and then allows you to add your own content and tweak the styling to fit your needs. 


Sign Up

NEXT: JQuery responsive content slider

In this article we'll be looking at creating a responsive content slider using basic HTML, CSS and JQuery. This is a great way to provide some nice visual transitions for your visitors while maintaining accessability on different platforms.

comments powered by Disqus

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.