Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:47 minutes
Pricing400
  • Overview
  • Transcript

2.1 Be Consistent With the Website’s Design

Best practice #1 is: be consistent with the website’s design. This is very important because the pricing table is just like any other element of your website. As a smaller part of the whole, you need to make sure it fits in.

2.1 Be Consistent With the Website’s Design

Best practice number one, be consistent with your website's design. This is very important, because your pricing table is just like any other element on your website. It's part of your website. So when you design it, you need to make sure it fits in. Now, there are a few situations when this might be problematic. The first situation is when you download a premade pricing table, and you just copy and paste the markup in CSS and just change the text. That's really easy to do, you can find a bunch of free or paid elements on the web, but the result is not that great. Now, ideally, you would have the original designer that made your website create a few extra elements, like a pricing table. So if you do that, everything will match up nicely. But if that's not possible anymore, like maybe you are not in touch with that person any longer, and you do need to grab a third party pricing table, try and pick one that's as close as possible to your website aesthetics. Now, once you do that, you need to edit the CSS to match the colors and typography to those of your websites. Nothing worse than having an element that uses a different font or different colors than the rest of your website. Now, another situation is when you want to add too much emphasis on that pricing table. You should avoid doing that. Sure, a pricing table, because it's basically the gateway to making a sale or making a conversion, it needs to have a little bit more emphasis. It needs to stand out a little bit more. But if you take it too far, that's not good. It's just gonna look out of place, and it might have a result other than what you originally intended. So add a bit of emphasis, but not too much. Now, another situation is when you have two pricing tables that are different from one another. And I'm gonna show an example here from desk.com. They have their main pricing table, which shows the essential information and a bunch of features. But then they have a full breakdown of those features in a plan comparison table. Now, they're doing a pretty good job of matching up the two tables, with the exception of a few minor things, but it's nothing that serious, really. So this is a good example, because it shows you the kind of pricing tables you could have, like this is one type, this is another type. And the goal is to integrate both of these with the website as much as possible. Now, as I said, they're doing a pretty decent job of that here. Now, let's see some examples of websites that integrate their pricing tables really, really nice. And the first one is from TunnelBear. Now TunnelBear goes with this entire bear theme, right? Hence their brand name and their entire website. Now let me actually show you their website. They have all of these illustrations with the bear, like this one for example, [LAUGH] like this one, so it's a very a nice website. And they're keeping that, let's call it bear motif, in their pricing page by using bears, or TunnelBears, as illustrations for each of their plans. And even the names of their plans are related, I guess you could say, to the whole theme that they're going for. So very, very nice, I especially like this Godzilla bear here. Another good example is Volusion. Here is their website. And their pricing page, or their pricing table, looks something like this, right? So they integrate it very nicely from everything, the typography, the colors, the box shadows that you see here, you can also see them used on the buttons. So this pricing table fits in just perfectly. Then we have Zendesk with their pricing table. Now this, the website from Zendesk, has a very funky style to it, and that translates very well to their pricing tables, which currently look like this. Again, everything from typography, colors, spacing, sizing, they fit very, very well. So that's best practice number one, be consistent with your website's design. Let's move on to number two, which is name your plans correctly. That's coming up in the next lesson.

Back to the top