Pricing Table

Problem summary

The user needs to get an overview of what pricing plans are offered and how they differ.


No items found.


Pricing tables are used as a way to illustrate how features of a product differ as the price changes.

Display the different version of a product in a table aligning price and features for comparison.

A list of the most frequently asked questions (FAQ) regarding the product is often listed directly below the pricing table. These often address issues that potential customers typically worry about: how does the free plan work, is there a money-back-guarantee, how will I be billed, etc.

It is a very common part of Application Service Providers (ASPs) marketing websites. In the most cases, these only have one major product to offer, but offers this product in different variants (plans). On these kind of websites, the price is most often based on a monthly/quarterly/yearly subscription plan.

When you create your pricing table, it is good to consider the following points:

  • Visually separate plans by using alternating background colors. When used sparingly, you can attract attention the plan you want the user to buy.
  • Utilize different font sizes and colors for elements you want to stand out: titles, prices, headlines, etc.
  • Be aware that users scroll down long tables. Prices at the top of a table might not be visible when they’ve reached the bottom. One solution is to place prices both at the top and bottom – another is to keep the pricing table short.


Converting interested visitors into paying customers is your biggest aim. Use pricing tables to illustrate what your product is capable of in full bloom and at the same time to lure them in.


Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection