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

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.

Crazy Egg

Highrise

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.

Highrise

Media Temple

Media Temple uses a simple ribbon that says “best value” to its (dv) RAGE server.

Media  Temple

TypePad

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.

TypePad

FormSpring

FormSpring uses color and size to help the Professional plan to stand out. Also, they have listed it as their most popular plan.

FormSpring

Pulse

Pulse uses a colored background and a green border to emphasize their standard plan.

Pulse

Onehub

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.

Onehub

Volusion

Volusion uses a “most popular” sticker, change in background color, and a higher tab to allow the Gold package to stand out.

Volusion

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

Wufoo offers five different plans to choose from, and on the pricing page each option features a different color.

Wufoo

Shopify

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.

Shopify

LightCMS

The pricing page for LightCMS uses a different color for each of the six plans that they have to choose from.

LightCMS

Freckle

Freckle offers four different plans. Each one has a unique color on the pricing page.

Freckle

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.

The  Resumator

FreshBooks

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.

FreshBooks

Cobblestone

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.

Cobblestone

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

MailChimp has a free plan in addition to their five paid plans.

MailChimp

Campaign Monitor

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.

Campaign  Monitor

Six Central

Six Central offers a choice of two plans, including a free one.

Six Central

Polldaddy

Polldaddy offers three different types of accounts, including a free one.

Polldaddy

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.

Backboard

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

Expression Engine has a detailed table on its pricing page that shows the differences between each plan.

Expression  Engine

Invoice Machine

Invoice Machine has four different plans and a list of features for each.

Invoice  Machine

Big Cartel

Big Cartel shows the difference between each plan through a table that compares the features of each.

Big Cartel

WiredTree

WiredTree lists the details of its various web hosting plans on the pricing page.

WiredTree

Proof HQ

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.

Proof  HQ

For more design inspiration please see:

Get the Free Resources Bundle