25 Inspirational Pricing Table Design Examples

Pricing menus are getting more and more attention. Earlier there were just a few websites that made some sleek pricing tables or menus, others probably didn’t see the use of over complicating it with graphics.

A pricing menu can represent your business, put emphasis on the best subscription you offer. Some menus are even so beautiful you want to buy the product already without knowing what it really includes. Those little benefits can make a huge difference and total and there shouldn’t be any reason not to make a beautiful table or menu!

Some examples

Aweber

A great example of visual hierarchy. You can see this in the colors, the cheapest price has the brightest color surrounding it. Also the size of the box around is the biggest and it’s placed to the left knowing we read from left to right.

Then there is a table with a more in depth view on prices vs service, which is kept tidy, simple and professional.

Also note how the sign up box is green, everything on the site that needs to grab your attention or calls to action is green.

Box

This is a typical example of the more fancy menus you find on websites at this time. The hierarchy is in a different axis than the one from aweber. The menus of Box.net are focused on the central one which gets more attention due its size but it also looks closer to your screen because of the drop shadow. The small price tag graphic also forces you to watch at this box and not the others.

The table with checkmarks beneath the original menus are also a great way to sell the most expensive subscription. Box.net really is a good example of this because the 2 first plans only have a few checkmarks and the 3th one has all of them, which obviously makes you think it is the best option for you. (why would you want less?)

Gameservers

Don’t get this example wrong. The gradients are not exactly what you’d expect from modern web design, but the shapes and order are interesting.

The prices and slot amounts are logically arranged from left to right as you’d expect, giving you a simple but comfortable overview. Compare it to ruler or slider. A slider might be a cool new design for their pricing page in the future. But especially the order button is remarkable. The shape always keeps directing to the higher price, when thinking about visual direction you should always end up at the most expensive option. Too bad the last button also directs to the sidebar, but from one side this is good because it’s less obvious they are forcing you to the last option, which could feel greedy.

Rule.fm

This is just a concept design by Dalton Woods, but it’s a great example of how you can design the pricing tables in the exact same style as your entire website. In this case a bold and clear style which can be used if you don’t need many features to be shown on the menu.

Newsbeat

This is just a concept design by Matt Bango. Again the hierarchy is central due to possitioning, depth and color usage. Notice how the fonts are sleek and pretty and make the prices pop out in a stylish but clear way. Also the envelope styled tops of the menus are a good example of how you can represent items in an abstract way.

Mohamed Noordeen

This is a more colorful example. Once again the central menu is the most important one, like you see on most designs. Here you see the usage of checkmarks on every aspect of the menu, not like Box.net does. In this case they are used as bulletpoints with a subconscious positive feel.

Dropbox

Dropbox has a totally different approach compared to the standard pricing menus. Simplicity is their power here. Don’t overload people with tons of features they don’t even know the meaning of. Just show them the amount of money needed for the amount of webspace.

To keep everything even more simple, they use their own logo with the amount of GB on top of it. This gives a great consistency, but the colors still make the difference and you know the upper option is the cheapest and the lower one will be expensive. Why would anyone design something that needs to sell, but goes against every expectation?

Mediatemple

Eventhough all the server images are identical, it’s still a great idea to visualize the options. Compared to other webhosting sites, this page is really simple and limited to 3 features each, knowing how complex servers can be. Also the options are placed on a portfolio-like grid, not just one row of options.

The call to action button displays “Activate” instead of the regular “Buy”. This could be a great option for selling servers, because the price often goes to high amounts and the word “activate” doesn’t make you think of that huge price directly like “buy” would do.

Producteev

This is a more fancy style of designing a pricing menu. At first sight it looks pretty and it is, but it also is somewhat stuffed with features. It is not as clear as other menus we’ve seen here.

It’s a good example to show the struggle between left alignment and centered alignment. Left alignment is easier to read and cleaner but the balance inside the box is wrong, while a central alignment looks more balanced but is less readable.

Jotform

This is a great colorful table. It solves the problems we see at Producteev’s menus by adding the feature categories to the left. Here, everything looks balanced, spacious and clear.
Also the strikethroughs with a “new” badge are an excelent way to sell your product. It are those small details that boost your site its salespower.

Mailchimp

Mailchimp is known for it’s unique and well thought design. This table is also different from what we’re used to, but they didn’t take it to the level where it gets complicated or unlogical.

In this table the size of its cells determines the hierarchy, the price is what they want to draw attention on. Also the use of complementary colors (pink-orange + cyan-blue and those both in combination with brown-grey) is pleasing for the eye and chosen well. Imagine the “free” box to be pinkish and the top bar to be cyan, that’d be very unbalanced and hard for the eyes. No fancy gradients and lightning on this menu, just subtle and stylish, which often looks more professional.

Rapidshare

In this one it’s really easy to see how the colors of the 2nd and 3rd menu are used to draw attention to them. The contrast between the yellow & green and the more desaturated colors is big and the glossy effect puts even more emphasis on this. Also they kept it small and simple.

Basecamp HQ

Look how the designer managed to use central alignment inside the boxes without looking clumsy and cluttered. He or she managed to achieve this by using color to split up the feature category and the specified value of it. Also the central hierarchy of the menu is highlighted by the size and color contrast (greyish vs black).

Thoughtboxes

Thoughtboxes went for a personal and direct method of displaying their services. They want you to sign up for free and experience the product instead of convincing you with words and numbers.

The “Super” subscription is displayed in red which probably represents its strength. But also the icons are a great way to emphasize the words and summarize the text in a simple image.

Invoice Machine

Despite Invoice Machine its sleek design, the table is kept simple and clear, thus not overloaded with effects and graphics. Notice how small text size changes between some rows indicate how important they find the feature. Also the checkmarks are there again, but this time with the contrary “x” also there, that makes you a little less excited about the free option which can be good.

Steam

Steam is a great company selling video games online. Every now and then they have huge sales which obviously attracts lots of customers, but the design elements are also a big factor in the sales.

First of all, Steam uses really themed and temporary designs during the deals, this shapes a mood and keeps everything quite personal and not ordinary cheap. They also display the discount in a big way, that’s because the number is often more impressive than the actual discounted price. And of course the strikethrough on the original price often gives that little joyful fealing in your stomach and makes the sale feel like a huge but temporary opportunity, which should boost impulsive sales.

Graphicriver: fresh pricing modern pricing tables

Overall the design of this table isn’t the best, especially looking at some effects on the text. Apart from that, the button itself and the background of the menu is great. Also the use of just a tiny icon in a wide open space is the best way to draw attention here, a big icon wouldn’t work half as good.

Graphicriver: riddler pricing grid II

This is probably of the best designed pricing tables on Graphicriver. The use of mouse-over info boxes is a great way to keep your table clean, but still provide all the info without linking to other pages. The rows are separated by a subtle color difference. When you look at the gradients on the menu, you actually can’t see much of it. That is great, you’ve got the feeling of smooth lightning, but not on an amateurish over the top way.

Graphicriver: pricing plans text boxes and button

This menu has an awesome color usage. The designer knows how to use colors to create strong depth, keep the dark ones at the back and pull the bright ones to the front with drop shadows. The gradients are quite realistic and convincing and the the typography on the price is strong but elegant because the .99 is tiny. Don’t get this wrong, if you’d make those digits tiny when the 9 already is small itself, you’d get a strange result.

Graphicriver: pricing table delicata psd png html css

This table’s design is getting quite outdated. But still it looks really classy and professional, that has multiple reasons. First of all, the header/top of it uses a sleek gradient with a subtle pattern behind it, combined with the text and its colors you get a typical computer feeling. You often see this style with expensive computer-related products. Also the thin colored bar is a good example how you can make a visual hierarchy with colors, without it being dominant. The small icons are crisp and clear and good for use in menus like these, you want them to be there but not dominating the entire menu.

Graphicriver: pricing tables 5 pack

This example is added in this list to showcase how you can perfectly visualize a feature. Don’t limit yourself to words and numbers, you can make percentage bars, boxes with different sizes like this example and so many more infographics. Those methods will probably be the most remarkable and if you’ve got good statistics to display, they’ll also be a deal maker.

Graphicriver: sleek pricing table/

A table with lots of info in it, but still it’s clear and spacious. The colors are well chosen in the way you can notice a difference between every column but overall the entire table stays connected because the colors aren’t too different. The font used is really standard and thin, which is actually alright in this table, it keeps everything clear and spacious.

Graphicriver: web 2.0 pricing tables

Most of the things said in the previous example can also be aplied on this example. Mainly the header/top of the menus are different here. You’re used to see rectangular shapes in pricing tables (because it is a table of course) and it isn’t too surprising when there is a curve at the top. But you don’t often see full circles apart from icons or something. You need to know that a circle is a very strong shape and numbers are perfect to fit in them, this brings a lot of focus on the price if well executed. The sign up button is at the bottom aswell as on the top which is a great idea for long pricing menus.

Graphicriver: web 2.0 pricing tables 4

The underlaying techniques and methods used in the table have been covered in previous examples. What makes this one worthy to be shown here is the unique way of putting emphasis on the middle menu. Because of the curves at the bottom which run along the other options, the visual direction always goes to the center, but all the options remain connected this way. This gives you the feel where the central option rules, but the other ones are also worth a look.

Graphicriver: web ready pricing table v10

Personally I would’ve made the stripes softer on this one, at this point they’re too vibrant and fighting for attention with the text. Apart from that, the shapes and style is very specific and would be great for food or carnival related services. Keep that in mind, don’t just design random graphics if you can strengthen the image of the business by sometimes even obvious graphics (which are good in a commercial design).

Conclusion

When you design any table you should make it easy to read and clear. Create a hierarchy by using colors, shapes, effects and placement. The little details on your pricing page WILL convert in new customers if you designed it correctly. If you were in a restaurant and got saw the menu designed in Comic Sans, would you prefer that over a classy and stylish design? Give your visitors some eye candy.

Edit: Post Updated 16 November 2011