Wednesday, May 18, 2011

Pricing Tables – Best Practices, Tips and Inspiration

Pricing Tables – Best Practices, Tips and Inspiration: "
Pricing tables have become an essential element of every online business website. While it can hike up your business if done neatly, it can also be the tombstone of your online business. A pricing table’s task is to help users choose the best pricing plan for them based on their needs. But we often find the tables dazzling and hard to understand. Designing an efficient pricing table requires a subtle yet solid mix of design and usability. In this post I’m going to share some tips on creating stunning pricing tables, discuss some of the best practices and present a list of some of the most successful pricing tables out there.

Structure


Most of the pricing tables are horizontal because it’s easier to compare the offers and see features. That doesn’t mean you should always use the horizontal layout, though. It really depends on the variety and complexity of the information you want to display in the chart. Best practice is to use a horizontal solution when you have to display a lot of features and a vertical one when you don’t have a lot of plans to offer and you’re not planning to include a long list of features.

Dropbox-pricing-charts-best-examples-tips-inspiration

Dropbox is an example of vertical layout pricing chart. Their plans only have minor differences so this is an efficient way to display them.

Champion-sound-pricing-charts-best-examples-tips-inspiration

Champion Sound is a classic example of horizontal pricing table structure. They need to include some features which are easier to compare viewed side by side so a horizontal layout is the best solution here.

Design


Design can do one of two things to your business – either sink it or raise it to the top. You have to be very careful when designing a pricing chart. Fonts, headlines, layout – it all has to be balanced and done neatly. Furthermore you have to make sure the chart’s design works with the main site. However don’t forget about your main goal. In pricing tables, design is just a tool to achieve your objectives, namely – increase sales. Simplicity is the key to success. Remember that you’re not creating a collage for school, you’re creating a design for a specific reason. Don’t clutter your chart with unnecessary elements. A common mistake is to write down a list of features most of the plans don’t offer and then put dozens of red crosses in your chart. Consumers don’t want to see what you’re not offering, they want to see what you’ve got and for what price.

Think-vitamin-pricing-charts-best-examples-tips-inspiration

Think Vitamin is an excellent example of proper use of design in pricing charts. In the left section you can see features and the most important phrases are bold. They’re using subtle green checkmarks and there are only two red crosses which are necessary to compare these two plans.

Rulefm-pricing-charts-best-examples-tips-inspiration

Rule.fm is another example of appropriate use of design in pricing charts. They’ve adapted the chart to their main design and have managed to use design elements neatly and plainly.

Emphasis


Emphasizing one specific plan is a common practice and you should do the same. With a lot of different plans to choose from it’s important to make it as easy as possible for your customers to choose the right one for them. With an emphasis on one particular plan you immediately draw your visitors attention to that one special plan. Most of the services choose to highlight the most popular package, however you can experiment. Yet don’t go to extremes- highlighting the cheapest and most expensive plans won’t bring much income. Emphasizing the right one can seriously enhance your business and it can also be incredibly useful from a potential customers point of view.

There are plenty of ways to emphasize a plan. Vivid colors, different backgrounds, badges, frames, huge call to an action buttons. Design and creativity – it’s all up to you. However keep in mind that exaggeration will only do harm. Never emphasize more than one pricing plan. Using different backgrounds for each pricing plan can be fine though you have to be careful with that too.

Shopify-pricing-charts-best-examples-tips-inspiration

Shopify uses a bigger background graphic and price font size to emphasize their most popular plan. They’re using different backgrounds for each pricing plan though they haven’t exaggerated the color scheme and the colors create the right ambiance.

Ning-pricing-charts-best-examples-tips-inspiration

Ning is using a different background color to emphasize one specific plan. Note that it’s the medium-price plan so emphasizing is most likely used as a marketing strategy. The green immediately catches your attention and most likely you won’t even look at the other pricing plans.

Difference


If you’re offering both free and premium plans then from the business perspective your goal is clear – convince people to choose the premium plan. This is where design and marketing play a major role. You have to be able to share your message quickly and in a visually effective way. It may not be important if you don’t offer a free plan though you should still be aware of this. Try to distinguish the differences between pricing plans as clearly as you can. A common mistake you should avoid is writing down a list of features that are available in each plan. Also think about the sequence. You want to place your main and distinctive features for each plan somewhere near the top. As you’re coming to the bottom you can start to include some features that are provided in all plans.

Big-cartel-pricing-charts-best-examples-tips-inspiration

When looking at the Big Cartel pricing chart I just can’t fight the feeling of actually wanting to sign up. They’ve managed to distinguish their premium plans from their free plans and make it very appealing.

Evernote-pricing-charts-best-examples-tips-inspiration

Evernote has also achieved an appealing look for their premium plan. Besides the smooth pricing chart they’ve got some descriptions with icons in the page. Remember that charts ain’t the only way to attract clients.

Be Clear


While you may think that offering more plans is effective and gives costumers a wider range of choice,having too many plans can severely affect your bottom line. What’s more, a lot of services don’t offer enough unique features to sustain a lot of pricing plans. The most popular solution is to have about 2-5 plan options. Going beyond that will just confuse your costumers and harm your business.

So you’ve created your, let’s say, three pricing plans and now you have to introduce the clients to the services you offer. You write down every single thing you offer including a lost password’s recovery. Then you look at your final result and conclude that you have to scroll the page down to see all the features. That’s a fine thing to do if you want to shoo your costumers for good.

Having the right pricing plans isn’t enough. You have to present your services the right way. There are pricing tables that leave you uncertain and confused about what the company is trying to sell. And there are tables that leave you puzzled and overwhelmed by the quantity of features. With more features the amount of information the visitor has to absorb grows. You need to find the right balance between too much and not enough information. You want your feature list to be comprehensive but concise so that after reading it the potential consumer can knows what he’s getting for his money.

Animoto-pricing-charts-best-examples-tips-inspiration

Animoto pricing chart undoubtedly won’t leave you confused. They’re using a minimalist design style with some accents. They’re offering three pricing plans and each of them is distinct. The main features are listed at the top and followed by more advanced features which are offered only in the pro plan.

Draftboard-pricing-charts-best-examples-tips-inspiration

Draftboard has gone with the “less is more” approach. They’re using a modest gray pricing chart with green accents. The chart is not cluttered with unnecessary elements so it’s very easy to comprehend. Plus they’ve highlighted one particular plan so it’s even easier for potential clients to make the decision.

Wrapping up


A lot to take into consideration, isn’t it? Well, wherever there’s money involved you’ll have to adapt and shape your design in order to achieve the desired result. I hope these five points helped you to get a little insight into designing effective pricing tables and gave you a clearer idea about embracing design and how best to combine it with marketing. These guidelines aren’t written in stone and it’s up to you how you follow them. Maybe you find them useless for your business and that’s absolutely fine. There is no one right formula for designing pricing tables since every business is a bit different. However I believe that these points made you at least consider your existing/forthcoming pricing table. That would be about it from theory outlook. Time to give you some terrific examples. Below you’ll find 15 examples of well-designed pricing tables for your inspiration.

Inspiration


1. Skype


Skype-pricing-charts-best-examples-tips-inspiration





2. Teambox


Teambox-pricing-charts-best-examples-tips-inspiration





3. Proposable


Proposable-pricing-charts-best-examples-tips-inspiration





4. Vaultpress


Vaultpress-pricing-charts-best-examples-tips-inspiration





5. Drupal Gardens


Drupal-gardens-pricing-charts-best-examples-tips-inspiration





6. Wufoo


Wufoo-pricing-charts-best-examples-tips-inspiration





7. Formstack


Formstack-pricing-charts-best-examples-tips-inspiration

8. Squarespace


Square-space-pricing-charts-best-examples-tips-inspiration

9. Zendesk


Zendesk-pricing-charts-best-examples-tips-inspiration

10. Crazyegg


Crazyegg-pricing-charts-best-examples-tips-inspiration

11. WooThemes


Woothemes-pricing-charts-best-examples-tips-inspiration

12. Campaign Monitor


Campaign-monitor-pricing-charts-best-examples-tips-inspiration

13. Raven Tools


Raven-tools-pricing-charts-best-examples-tips-inspiration

14. Typekit


Typekit-pricing-charts-best-examples-tips-inspiration

15. Business Catalyst


Business-catalyst-pricing-charts-best-examples-tips-inspiration
"

Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources

Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources: "
This time we will review some helpful resources for designers, how you can find them, and how can they help you.

Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free.

And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. Someone else has done it for us. Why should you start from scratch if you can get some cool things and just make them better?

So, this is a post with a lot of links, and with my opinion about many of them. In short, we will be talking about:

• Creative photos collections

• Cool Icon packs, Buttons & Menus

• Professional Font faces

• Useful patterns, brushes, backgrounds, textures

• Templates and other miscellaneous elements

• Online generators and other tools

So, let’s rock!



Creative Photo Collections




Actually, most of you always use stock photos in your layouts. Yeah, they are nice, but many of them just don’t get the point across that you want. Don’t get mad, they don’t ruin your work. But they don’t make it brilliant either.

So, usually you have 2 options:

  1. Use premium stock photos
  2. Take your own photos

I think there is a third option that we almost always forget: Some really artistic and creative photos out there.

We have a lot of photo collections, with photos for specific situations. Think about it, when you are talking about victory, for example, it’s much better to use a real emotional winner photo than a commodity clip art trophy image.

Why they are good: Using in-context funny or emotional images is the easiest way to get your reader’s attention, so you get more time to explain your point.

What you should pay attention to: You must pay attention in copyright notices for images. We can’t steal someone elses image just because it is on the web.

Good Start points:


Cool Icon Packs, Buttons & Menus




Sometimes we need an idea of how could we put those 20 links that the customer wants in a really good-looking menu. Moreover, you have to worry about all the “call to actions” and semiotics stuff for icon and button design.

When you feel like this, it is time to steal someone elses design :D

Why they are good: Depending on the site you use to search, it is possible to find really complete icon packs, with “generic” icons for customization (just the background, for example). Many people may have solved the problem with 30 links in the same menu already.

What you should pay attention: It is worthless to find a really cool icon pack, button or menu that you don’t know how to customize. So, if you get a cool wooden icon pack, but don’t know how to make a “home” icon (maybe it is missing), you can’t use it.

Good Start points:


Professional Font Faces




I have to tell you a secret. I don’t know anything about typography. For real. I know just the basics, that serif and sans-serif stuff, but anything beyond this, don’t count on me.

Everytime I read something about typography I get amazed on how this is a wide field to study. And how we are getting better and better at it.

With all this @font-face stuff, it is almost a crime to not use a really professional font in your headlines (at least) without fear of the monster of cross-browser compatibility.

Why they are good: They give a really professional look to your project and they are easy to use.

What you should pay attention: You should notice copyright restrictions (yeah, not every font is free), and whether or not the font you want has some special characters (it is hard to find, for example, c with cedilla or grave accent, really used in Portuguese).

Good Start points:


Useful Patterns, Backgrounds, Textures




Yeah, I love patterns and textures. I used to download patterns because some of them I just don’t know how to create myself, and sometimes I just need a preview of how the work would look with that pattern. Actually, there are so many combinations of patterns, textures and brushes that you could spend all your life just trying combinations. So it is better just to pick some good samples, isn’t it?

Why they are good: They save you a lot of time, with complex and tiled patterns.

What you should pay attention: When you use a texture for websites you have to pay attention in their screen size, because we have a lot of different screen dimensions nowadays, thus many users can see that ugly white background when your texture ends.

Good Start points:


Templates and Other Elements




Yeah, we have a lot of other elements ready to use, that couldn’t be in above list. There are a lot of boxes, ribbons, slide shows, form elements, complete page templates and many other things that you could use in your work. There are a lot of creative design solutions for problems that we all could pass (like slide shows, or complete admin panels), and with this samples, you save a lot of precious hours.

Why they are good: They surely save you a lot of time, and brings you inspiration for common problems.

What you should pay attention: For every element we have a lot of possibilities, and many of them could be good. You don’t have to find a magical unique solution for everything, for each problem there’s more than likely a solution out there. This is why we have so many links in here :D

Good Start points:


Are You Hungry Yet?


I know that you have some useful links to share too. Why don’t you put them in comments, or write a response in your blog?

I’m sure that we will always need new sources to make our designing process more effective.
"
Enhanced by Zemanta

Space Photoshop Brushes

Space Photoshop Brushes: "License: Free for personal use Author: redheadstock Download this file 16 Space Brushes for Photoshop 7+, Photoshop Elements 2+, GIMP 2.2.6+

"
Enhanced by Zemanta

Star Brushes

Star Brushes: "License: Free for personal use Author: DemosthenesVoice Download this file There are six high res star Photoshop brushes in the set created with a Wacom.

"
Enhanced by Zemanta

Star Brushes Volume 1

Star Brushes Volume 1: "License: Free for personal use Author: JonasKr Download this file Star brushes for Photoshop CS3+

"

Starfield Brush Set

Starfield Brush Set: "License: Free for personal use Author: gvalkyrie Download this file Starfield Brushes by Gvalkyrie

"