Trends in Pricing Page Design and Layout
This page may contain links from our sponsors. Here’s how we make money.
Pricing pages are very common for sites of web apps, web hosting, and other types of services. These pages are critical to the success of the company because they will have a significant influence on the visitors who are trying to make a buying decision. Pricing pages typically give the necessary details regarding the various plans and options, and they encourage visitors to take action.
In this post, we’ll look at a number of trends in pricing page design, along with several examples for each.
Pricing Page Trends
Emphasis on One Option
Most of the pricing pages that we are looking at in this post include some sort of table or chart that shows the various options that are available for purchase. Obviously, this is helpful for buyers to be able to compare their options and determine which is the best choice for them. However, sometimes having too many possible choices can actually make things more difficult. Some pricing pages are using an emphasis on one option to help it stand out to visitors. In some cases it is listed as the most popular or best value, and in other cases it is simply emphasized in some way.
Aside from attempting to make the decision easier for visitors, emphasis also gives the designer the ability to control which of the options will get the most attention from visitors. In some cases it is used on the most expensive option, but in many cases it is not. Let’s look at some examples.
Crazy Egg emphasizes their basic plan (the lowest-priced option) by using a green background color compared to the gray background of the other plans, plus the column background is also a little bit larger.
Highrise offers five different plans that users can choose from, but the Plus plan is marked as the most popular and is emphasized by a larger sized box, a slightly different background color, and a drop shadow that causes it to appear as if it is on top of the other options.
Media Temple uses a simple ribbon that says “best value” to its (dv) RAGE server.
TypePad has four different plans to choose from, but the Pro plan is emphasized. In addition to just making this plan stand out visually, they also have a discount available for the Pro plan to give it further emphasis.
FormSpring
FormSpring uses color and size to help the Professional plan to stand out. Also, they have listed it as their most popular plan.
Pulse uses a colored background and a green border to emphasize their standard plan.
Onehub emphasizes their Team plan by using a subtle change in background color and button color. Additionally, it is starred and labeled as the most popular plan.
Volusion uses a “most popular” sticker, change in background color, and a higher tab to allow the Gold package to stand out.
Multiple Colors for Various Options
Color can be used very effectively to make things stand out, and it can also be used to distinguish various items/options. Some pricing pages use different colors for each plan to help separate them visually and to give some added visual appeal to the page.
Wufoo offers five different plans to choose from, and on the pricing page each option features a different color.
Shopify uses some subtle color changes on the various plans to help them stand out from one another. The Business plan is also emphasized by labeling it as the most popular.
LightCMS
The pricing page for LightCMS uses a different color for each of the six plans that they have to choose from.
Freckle
Freckle offers four different plans. Each one has a unique color on the pricing page.
Emphasis on Sign Up Link
Some pricing pages use a sign up link or button that stands out from the rest of the page in some way. Of course, this is done with the intent of capturing the attention of visitors and encouraging them to take action and sign up for something. Some companies use this method to encourage signups for a free plan or trial just get to people to try it out, while others use the emphasis to encourage signups for their paid plans. Here are some examples.
The Resumator
The Resumator uses a large sign up button below the name of each plan that is available.
FreshBooks uses a green arrow and a large button that says “Get Started with a FREE Account!” the button is located at the bottom of the table that displays the prices and features.
Cobblestone uses a large banner graphic that is displayed above the plans and pricing to encourage signups. The enticement is provided by offering the opportunity to lock in to low prices during the beta launch.
Free Account Options, or Free Trial
A number of companies have chosen to offer limited free accounts from their pricing page to encourage customers to give the service a try. This also makes it possible for customers who only have a need for very basic features and limited quantities to use without the need to pay. Here we will see some examples of pricing pages that promote free accounts.
MailChimp has a free plan in addition to their five paid plans.
Campaign Monitor’s pricing page is different than most that are shown here, but they do offer a free plan on the page and they use buttons to encourage visitors to sign up for the free account.
Six Central
Six Central offers a choice of two plans, including a free one.
Polldaddy
Polldaddy offers three different types of accounts, including a free one.
Backboard
Backboard doesn’t offer a permanently free account, but two of their plans come with a 14-day free trial, and this is emphasized on the pricing page.
Feature Listing
Most of the pricing pages that you have seen throughout this post have some sort of feature listing. In some cases the pricing page may only list basic features, but these pages are examples of though that use extensive lists of features and details for the various options or plans.
Expression Engine has a detailed table on its pricing page that shows the differences between each plan.
Invoice Machine has four different plans and a list of features for each.
Big Cartel shows the difference between each plan through a table that compares the features of each.
WiredTree
WiredTree lists the details of its various web hosting plans on the pricing page.
Proof HQ has eight different plans to choose from and they use a large table to list the features and details of each plan for comparison.
For more design inspiration please see:
