Trends in Pricing Page Design and Layout

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.

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 the 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:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

31 Responses

Comments are now closed on this post.

  • Mothership, October 28, 2009

    Excellent timing again! We’re in the middle of building our pricing tables at present for our new site. Thanks :-)

    Odd how MediaTemple’s ‘best value’ plan is actually not. It is double the price of the Base, with double the space and RAM, but only 50% more traffic allowance. The Base is in fact the best value.

    A great collection – all inspiration welcome.

  • website design gold coast, October 28, 2009

    Although MediaTemple confuses the actual info it is probably the cleanest and easiest to follow in my opin.

  • designfollow, October 28, 2009

    thanks for this great post.

  • Michael Locke, October 29, 2009

    Great list. Bookmarked.

  • Deepak, October 29, 2009

    Thanks for this great post

  • aion kinah, October 29, 2009

    Great list. Bookmarked.

  • Lukasz Bachur, October 29, 2009

    Shopify prices are delicious!

  • Web Templates, October 29, 2009

    Too many choices may lead the customer to look elsewhere. I would not offer more than 3 options.

  • Graham Strong, October 29, 2009

    Love this!

    I especially like the lack of critique. Rather than say “I like this better” and “I don’t like this”, you give a general commentary on pricing pages, and give enough examples to let us make up our own minds.

    After all, why tell your point of view if you can show the reader theirs?

    ~Graham

  • Blogger Chief, October 29, 2009

    Bamm. That’s a lofs of info in just one post. Thank you for all these screen shots.

  • Josh Star, October 29, 2009

    Pricing pages are perhaps one of the most understated visual elements of design. This is ironic as they are one of the central spaces from which revenue is generated. I personally love Expression Engine’s pricing scheme. It’s clear, conscise and easy to read.

  • Jasmin Halkic, October 30, 2009

    Awesome post.

  • John Browning, October 30, 2009

    Didn’t mention dreamhost.com.

    I have been using them since 2004 for various projects with virtually no problems. They have a great selection of one click installs (wordpress, joomla, zencart) and seem to be improving all the time.

  • rburch, October 31, 2009

    Funny, we’ve been thinking about setting a up a pricing page for clients but our work is very custom and we charge more than the above do. We’re worth the $ because we do more than just a site, we build out a marketing plan first and then a site based on it but it’s hard to compete when potential client see out 5,000 – $10,000 rage and they see one of these that only charge $699. What often happens is the buy the $699 site and in a year come back to use and have us build a new site for them. I’m curious to see if others have that experience.

  • web design egypt, November 2, 2009

    great thanks
    first one is the best

  • Melody, November 2, 2009

    It’s funny how we sometimes overlook the site design of other industries, or page layouts…these are awesome inspiration, lovely color schemes..

  • Jaspal, November 3, 2009

    @Melody : really i have never seen so many good designs for Pricing Pages … really awesome.

  • Mark Carter, November 10, 2009

    Now this is *very* interesting …. thanks for sharing this. I was particularly interested to see how the designers guide the visitor towards a ‘preferred’ option/pricing.

    thanks …

  • Mauricio Rocha, November 26, 2009

    Great post. Our pricing page is pretty much in line with those……but with less data and more focus on high impact. http;//vzaar.com/pricing

  • Girokonto Vergleich, December 20, 2009

    Crazyegg have a very nice theme and good support.

  • Dennis van der Heijden, December 10, 2010

    I did my own version with a feedback per page http://www.reedge.com/303-ideas-for-pricing-pages.html

  • Dennis van der Heijden, May 24, 2011

    Now got our own pricing page up, with a blog on the design decisions http://blog.reedge.com/the-anatomy-of-our-pricing-page.html