Table of Contents
Welcome back in the second part of the 7 Deadly Mistakes To Avoid in Landing Page Design article. I hope you enjoyed the first part and took the time to put the tips I shared with you into practice. In this second part, the mistakes you will learn about will cover wrong structure of your landing page. We will also talk about lack of contrast, using wrong colors and also using stock images. Without further ado, let’s take a look at remaining four mistakes holding you from creating great landing pages!
Mistake No.4: Wrong Structure
Let’s start this second part of landing page design mistakes with the biggest mistake you can possibly make. Well, the biggest mistake is to never actually release it because of fear or excuses, or both. However, the second biggest mistake is using wrong structure. Imagine that right after you enter the store, you will be approached by staff. His question? Do you want to pay cash or by credit card? What?? You crossed the threshold just a second ago. You had literally no time to even take a look at the products on the shelves. Now, that skinny guy is already asking you how will you pay?
I guess that almost all of you, reading this article, would see that something went wrong in the example I described above. Despite that, there is a ton of examples of this exact mistake being made in landing page design. The most painful example is when some landing page is trying to get your credit card number or email before it will tell you why you should be interested in buying in the first place. Do you remember that Features Over Benefits mistake in the 7 Deadly Mistakes To Avoid in Landing Page Design Pt1?
Now imagine that you would skip mentioning benefits and tried to convert visitors to customers right away. Pretty stupid idea right? Well, you will still find many people doing this crime. By the way, when I was working on stock market I was doing the same stupid thing! Meaning, there is a specific number of steps (three) you should do to increase the chance of turning cold-call into sale. Due to my fear of rejection and effort to speed up the process, I always skipped the first two steps and moved right to the last one. As you may guess, I made zero sales with this approach.
What was the content of the first two steps? Basic introduction of the company, asking for the permission to send a short newsletter and later call. Then, during the later (second) call, you would try to establish a relationship with the person you were cold-calling a day ago. Finally, on the third call you would present the same person with number of the best trade opportunities. At this time, you would either get one new client or throw one contact into the trash can. In short, you had three phone calls to convert sales lead into prospect and finally your new client.
Why am I giving you this Wall Street selling crash course? I want to show you that every selling process has less or more the same steps you have to follow to close the deal (or make the sale). This process is quite simple. First, you have to establish trust. Second, you have to provide the lead or visitor with reasons to buy – the benefits, not features. Third you have to ask for the sale. That’s it. Introduction, benefits and asking for sale. Let’s apply this process on landing page design.
The first goal of every landing page is to capture visitor’s attention and introduction the product or service. In other words, start with strong headline. Remember that headline is the first and most critical element of every landing page. Great headline must meet these criteria: grab visitor’s attention, inform the visitor about the product or service, be short – no more than twenty words. Also, using a header image featuring your product will increase the effect of headline farther more.
The second element that follows headline is … Yes, sub-headline (or h2). The goal of sub-headline is to convince visitor it is worth his time to stay and continue reading. Think about sub-headline as a successor of main headline. Meaning, don’t be afraid to go more into details about your product. Remember, sub-headline should be persuasive so giving visitor more information about the product will do no harm. Just avoid writing whole essay.
Right after headline and sub-headline should come some explanation of your product. You want to make the visitor familiar with the product. And again, keep it short and straightforward. Remember that you are taking the time of your visitor. When you have the explanation in place, it’s time to present the benefits visitor will gain after buying. One of the best ways to present benefits of your product is to use either lists or “boxes”. If you don’t know what are these boxes, take a look at landing page design examples on Dribbble.
Another element to include are testimonials. We’ve already touched on the subject of testimonials in “Lack of Social Proof” part of 7 Deadly Mistakes To Avoid in Landing Page Design Pt1 article. In a short, don’t fake it. Visitors will spot fake testimonial from afar. Use only real testimonials from real people. Next, use photos if you have permission to it. And, lastly, testimonials should be specific and describe the benefits your customers got.
Another element you should have in your landing page design is … Your contact information. No, that’s not a joke. If you really want to establish trust, including some ways in which visitors can contact you is necessary. Some of the basic examples can be your email address or phone number. You can also include your physical address and you username for Skype, Snapchat or another chat service you like to use. More advanced solution would be on-site chatting widget.
We are getting to the finale! The last two elements every landing page design should have are guarantee and final CTA. In case of guarantee, it helps people feel reassured and increases their trust in your product or service. As a result, it improves the chances of converting visitors to customers or clients. A good practice is to position guarantee close to the CTA. And, when it comes to CTAs … We’ve covered this topic in the first part.
360 Summary
Ever landing page should follow a specific structure. Only then you will be able to build trust with the visitors and convert them into your customers. The basic structure for your landing page design should be following: Start with strong and short headline to get attention of visitors. Next, use persuasive sub-headline headline to convince visitors to stay and continue reading. Then, you should explain your product or services. This is followed with section about the benefits visitors will get by buying your product.
In order to provide some social proof and increase your credibility you should include at least couple testimonials. This will demonstrate that other people already bought the product and were satisfied with it. To improve your credibility furthermore, you should also include some contact information like your email address or phone number. You can also include your physical address and username in chatting services such as Skype or Snapchat.
The last two must-have things are guarantee and CTA. Using some kind of guarantee will reassure visitors that even if they will not be satisfied with the product, they will get their money back. For the biggest effect, you should place these two elements close to each other. That way the guarantee will work as the last nudge for the visitor to make the purchase.
Mistake No.5: Lack of Contrast
Now, I want to go back to CTAs for a moment because there is one thing important in landing page design related to CTAs, and buttons in general, we have to talk about. This ONE thing is contrast. You probably saw and maybe read at least one post or article focused on finding the best color for buttons. If not, than let me assure you that this is not a joke. There are really whole articles on this subject. We have already talked about the importance of contrast in web design in UI design – 10 steps for great user interfaces Pt6-Color article. For this reason, I will keep it short here (maybe).
Whether you have read anything covering buttons and colors or not, don’t worry. I did the legwork for you, so you don’t have to. Drawing from number of articles and papers, the brief summary is that there is no “right” color you should stick with. Yes, you read it right. Although some colors will work better than others, such as well tested blue, the difference will not be significant. What matters much more than just color of the button is contrast you create in your landing page design. This is the conclusion of, I would say, all articles on buttons, design and conversions.
Let’s get a bit geeky for a moment and discuss color theory. In the fundamentals of color theory, we distinguish three “types” of colors. These are background, base and ascent color. As your intuition rightly suggests, background color is used the most often. This color sets the general tone and feel of the website or just any design (print, app, etc.). The second, base color, is used thorough the design to break up the background and is typically the middle child. It is neither boring nor flashy. This color works as a glue that holds it all together.
The third and last color is accent. This color is used very rarely to highlight certain elements or parts of the design. It is this color what also gives the design its personality. The accent color of your choice has to have sharp contrast to your background and base color. The only exception to this rule is situation when you’re using a monochromatic color scheme in your landing page design. In short, accent color is typically the boldest of the big three.
How can you apply this to come up better landing page design? This is easier than you might thing! Use the accent color and the power of contrast for the CTAs and just any button that should draw attention. Remember that getting attention is like creating a moment of surprise. If you do it too often it will not work. In other words, don’t use the exact same color again and again. Otherwise, it will lose any meaning.
Instead, take the accent color. Make sure it has sharp contrast to background and base color and use it only on your CTAs. Don’t waste it on any other elements or decoration. Think about it as a limited resource you cannot refill. Again, only the elements that whose purpose is to convert your visitors will use accent color, nothing else. Remember, that in landing page design, contrast is the ONE thing that can make a big difference. Here is the thing, visitors will not click on anything they can’t see. As yourself … Do the CTAs on your landing page stand out? Are they highly visible?
360 Summary
The good news is that there is no big difference in what color will you use for CTAs. That is also the bad news. Meaning, there is no “secret” color you can implement in your landing page design. There is no specific color that will make CTAs irresistible for visitors click and buy. Despite that, blue and red colors, on average, have the best results. Anyway, the real secret sauce to great landing page design is appropriate contrast. In other words, your CTAs have to stand out. To achieve this, make sure to suit CTAs in color that is in sharp contrast to background. Then, use this color very sparingly.
Mistake No.6: Wrong Colors
Let’s stay with the subject of colors for a moment. I have a question for you. When you work on new landing page design, do you consider color in the context of demography and culture? You probably know the fact that every color can induce specific emotions and mood. If not, take a look at The Color Theory Crash Course Pt.1 article. There, you can find what psychological effect specific color has. However, that’s not exactly what I want to talk about. Well, it is, but it is just one piece of the puzzle. The second piece is how culture changes how we perceive color.
Since you already have the link, I will not give you a lecture from color theory and psychology. You can find all the information you need in the article mentioned above. Instead, I will suggest that, when you will think about landing page design and what color palette to use, you will take into consideration culture and traditions. By the way, if you are not one hundred percent sure about you “color picking” skills, tools such as Adobe Color. You can also use curated catalog of color palettes such as lolcolors. And, you might also want to take a look at colorhunt.
Anyway, back to the culture and traditions. In many cases, you will not target any specific country or region. Therefore, connection between colors and culture will not play important role. However, what if, one day, you will want to change this and tailor landing page design to specific country. Or, you might get a client that will be interested in promoting and selling is products or service only to specific demographic group. In that case, I suggest that you do the research and find out how are certain colors perceived. Otherwise, you might find yourself in some unpleasant situation.
I will give you an example. Let’s say you want to target Chinese market. The first thing you should do, along with creating a persona (more about that here), is to take a look at couple examples of landing pages that are successful on this particular market. You can use them to reverse engineer the formula for success and use it for your landing page design. But before you will get to drawing board, I suggest that you learn about local traditions and cultural norms.
For example, did you know that, in China, white color is used during the time of mourning and death? Oh, also during Ghost or Hungry Ghost Festival which is a traditional Buddhist and Taoist festival held in many countries in Asia. Knowing this, it would probably not be the best idea to follow the western tradition and use in a lot of white landing page design, unless you are selling funeral services. On the other hand, if that is the area your business operates in, white color could be a wise choice. Well, only for Chinese market.
In the western world, it might look weird to use this color in the context of funeral service business. There, white would be a better choice for weddings. Luckily, there are still “safe” colors you can pick without risking any faux pas. One example of these colors is blue that is used to evoke trust, conservatism or calmness. As we discussed in the section about contrast, blue seems to be one of the safest bet when it comes not just to landing page design, but design in general.
Since people are also quite accustomed to seeing blue links and buttons, I would suggest that you go with blue whenever you will feel unsure. Before we close this section, let me give you some tips on choosing colors. First, blue color will work best for financial products and services. For luxury segment, I would suggest that you pick either black or gold. In most cultures, both of these colors evoke luxury and high value. Black is more related to power, stability, rich, elegance and trust. So it is rather power in the world of intangible.
On the other hand, gold is used as a symbol of wealth in the sense of money and palpable wealth. By the way, for these two colors is the meaning relatively the same in eastern world. What if your landing page design will be used for selling anything related to health? Stick to well tested green. Natural, harmony, refreshing, healthy, soothing and sensitive are just few examples of emotions green color evokes. Next two colors are orange and yellow. These two are the best choices for products targeted on young generation … And energy drinks.
One of the colors I would rather avoid in landing page design is pink. The reason is that for many people this color can be associated with completely different segments of products or services. For one, pink can evoke feelings of love, care and parental instincts. You know, small pink baby shoes, clothes and other stuff. On the other hand, ask on meaning of the same color some teenager and … Well, let’s say that underwear catalog will be the gentlest answer. The rest will fall into the category of things you don’t want your kids to know before their eighteenth birthday.
Anyway, let’s just say that it is always a very good idea to do the research first, find out all possible meanings and only then proceed to making the final decision. Otherwise, you might one day wake up and find your mailbox full of complaints.
360 Summary
Colors can either improve your landing page design or bury it. In many cultures, colors can have either slightly or completely different meaning. It is your responsibility to do the research and find out how certain traditions can alter your color palette. So, unless you want to consciously piss off couple people, damage your client or get some experience in refunding customers, don’t build your landing page design on assumptions.
Instead, invest some of your time in reading and searching. Also, talk with people in your target market. These people give you valuable feedback and chance to fix any potential gaps in your design. What’s more, they will also tell you whether your product or services has any chance to succeed. By the way, this is basically what lean startup is all about – to test your assumptions as soon as possible with a minimum expenditure of funds. For a quick intro into this methodology take a look at Lean startup in 6 minutes article. In the end, just remember that white is not always white and black is not always black.
Note: At this moment, I’m reading Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days by Jake Knapp. You can expect an article about the methodology featured in this book soon on this blog.
Mistake No.7: Using Stock Images
The last mistake we are going to discuss is using stock images in your landing page design. Let me rephrase it. Use of stock images is the biggest mistake you can do in design in general. Seriously, if you want to undermine the credibility of your website or your own, go ahead and use stock images. There are two main problems with stock images. First, stock images almost every time look cheap. Second, people will recognize that you are using cheap stock images. And, when something looks cheap, people are often reluctant to invest their money in it.
By the way, why do you think these images are so cheap? Think about it from the perspective of a professional photographer. Would you sell your products (photos) for three or five bucks? Probably not, unless you are a beginner who just bought his first camera. The same thing applies to web design! Would you design a top-notch website, backed with extensive research and testing, for hundred bucks? In that case, going under thousand would be a nonsense. The conclusion? Forget about using stock images. Or, even better, remove all of them from your HDD immediately.
What you can do when you will find yourself slipping to that crap? Remind yourself that you are selling professional high-quality product or service. And, the way you present it will influence how people will perceive it. Present your products or even yourself cheaply and you will have a hard time convincing people to pay higher price. On the other hand, when you use high-quality package you will have to explain people why your price is so “low”. So, remember this … Stock images are cheap because they look that way. Never use them to promote high-end product or services.
360 Summary
Never, never, never, never use stock images in landing page design. Let’s make it easier. Never use stock images in any design work. Otherwise, you are exposing your products, services or yourself to risk of being perceived as cheap. And, once people will start to perceive you that way, you will have a hard time changing their mind. I suggest that you invest in your product, service and yourself upfront to avoid any potential problems in the future. Remember that package sells as well.
Closing Thought on Landing Page Design
Here you have it! Now you know what are the seven deadly mistakes you have to avoid in landing page design. In a short, these seven deadly mistakes are focusing on features instead of benefits, and lack of any social proof. Another mistakes are bad CTAs, wrong structure of your landing page and lack of contrast. The last two mistakes are using wrong colors and using stock images. Now, it is up to you to take the information in this two-part article and put it into practice. Soon, you will see the results!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
