Have you ever come across a landing page that wouldn’t let you leave? Not because of engaging content, but because it physically stopped you from closing the window. That’s one way to capture attention, but definitely not the best way. And that’s not the type of landing page we’re discussing here. Instead of relying on scammy pop-up windows and cheap gimmicks, you can create beautiful landing pages that convert visitors into followers or customers.
So, be honest-- when you first read “landing page,” what came to mind?
A lot of us associate landing pages with affiliate marketing. We’ve all landed on a questionable marketing page. The ones that autoplay whiteboard explainer videos and wear you down with never ending, repetitive content.
Or maybe you associate landing pages with startups. It’s true that many startups rely on that faithful “coming soon” page to generate interest and collect emails for future beta launches.
But, even if you’re not an affiliate marketer or a startup, you can still use landing pages. You may want to advertise your design services through Google Adwords, and send potential clients to a distraction-free sales page. You may have a client who needs a landing page and doesn’t even know it. With these skills that you’re about to learn, you can upsell landing pages to your client and make more money.
Learning how to design a killer landing page will add value to your design offerings. Ready to give it a shot? Let’s start with the basics.
What is a Landing Page?
Technically, a landing page is any page where a visitor lands. But, this article refers to a specialized landing page, where you guide visitors to do a specific action. That action could be to sign up for your newsletter, buy your ebook, or hire you as a designer.
Unlike the rest of your website, a landing page operates like an island. It’s not connected to the rest of your website and it only has one focus: convince the visitor to do the one thing you want them to do.
On a regular website, you welcome visitors to roam wherever they want-- about, contact, blog, etc. On a landing page, there is no where to go-- either answer your call-to-action or quit.
Landing pages work much better when they’re straight-forward.
Why Do You Need a Landing Page?
The only purpose of a landing page is to sell. Either you’re selling your design services or you’re selling your information for their email address. Your information comes in the form of newsletters, downloadable books, design freebies, pay-what-you-can fonts, courses, etc. As you can see, it doesn’t always include a monetary transaction.
No matter how you use a landing page, the goal is to convert visitors into clients or community.
Every designer can benefit from a landing page. Why? Because a lot of designers suffer from the “this is just a hobby, but it would be cool if you paid me” disease. Some designers are also afraid of talking money or overcharging.
If this sounds like you, let your landing page do the talking for you. On a landing page, you can share your rate and talk about all of the reasons why you’re an awesome designer. And you can do it without coming off as conceited, because it’s expected in a landing page.
You can also suggest that clients include a landing page in their design package to generate more leads. Or maybe your client has come to you and asked for a landing page. Well, buddy, you’re in the right place. Let’s get started and learn some essential elements of a landing page.
Say it with me: There is no navigation on a successful landing page.
Why? Because you don’t want visitors distracted by all the shiny options on your menu. Instead, you want them focused on one thing-- your call-to-action.
If you provide your full menu on a landing page, a visitor will be tempted to read more about you on your About page, or look through your portfolio, or check out your blog. Before long, they’re on a rabbit trail and off of your website and onto somewhere else. They’ve completely forgotten about your offer.
Remove all distractions. Unless you’re also including a video, the only clickable option on your landing page should be your call-to-action.
Although there’s no set rule when it comes to layout, here’s a basic guide:
You greet the visitor with a powerful background image that conveys the mood of your offering. If you’re asking for donations, show an image of the kids who’ll be receiving a donation. If you’re selling a software or application, show a video still of your software at work.
Next, you position your unique selling proposition next to the image. Use bullet points to capitalize on the visitor’s need to consume information quickly.
Below your proposition, include a descriptive call-to-action. Make it obvious and unavoidable.
All of this information should be above the fold. Visitors shouldn’t need to scroll down to see your call to action. A recent study showed that visitors spend 80% of their time above the fold and only 20% below the fold.
That’s not to say you shouldn’t go below the fold. Many landing pages work better in long form, where you can explain the benefits of the product or service in detail. If you choose to do this, remember to add you call-to-action button on each “screen,” so that it’s always accessible as the user scrolls down the page.
3. A Color Story
Colors affect mood. Google knows this, that’s why they tested 41 shades of blue to see which one resonated most with their users. Coca Cola, Pizza Hut, Frito Lay, McDonald’s, and Nabisco know this, that’s why they use red and yellow to stimulate hunger and excitement.
So, let’s do an experiment. What do you feel when you see these colors:
If science is to be trusted, this is what you should feel:
Applying this to your landing page, red is a surefire way to grab attention and generate excitement. Blue is good for communicating sincerity. These two are the best color choices for a call-to-action button.
When it comes to the background color, it’s hard to go wrong with the authority of gray or the clean simplicity of white.
Avoid using too many colors on your landing page. Choose two or three harmonious colors to convey your message.
Everyone loves a pretty picture. Even better? The brain processes images faster than text.
Use an image that captures that mood of your product or service. This is where you can really inject your personality.
We all know how difficult it is to convey tone through text. That’s why you should text needs imagery and a color story. I may not understand, or believe, that your product is geared toward business, but when you show me images of business people using your product, it clicks.
But, a very huge warning-- please don’t do this:
There’s nothing more soul crushing than seeing a generic stock image of some guy who doesn’t use your product, doesn’t know about your product, doesn’t know that you exist, and probably doesn’t even exist himself.
Instead, go for authentic pictures of people who actually use your product. It doesn’t have to be a professional photograph, but it does need to be a true representation.
Why? Because you’re building trust with your audience. You want them to have confidence in you-- and every element on your page needs to support that.
I do support stock images in some cases, but never on a landing page where you need to show realness.
If you don’t want to use a photograph, use an illustration, or a mock-up (but be careful of entering into the overly generic category).
Video is a popular choice for landing pages, and there’s a reason for that. Using videos on landing pages can increase conversion by 86%. Choose this option if your product or service is complicated and conversion depends on the customer fully understanding the product.
Keep your video short, sweet, and to the point. Your video shouldn’t explain how to use it, but focus on how easy it is to use.
Visitors always look at your landing page from a “what’s in it for me” perspective. Every single word in text or video should answer that question over and over again.
Not sure what the difference is between copy and content? Content is meant to inform. Copy is meant to sell.
On your landing page, use copy.
I won’t lie to you and say that writing copy is easy, because it’s not. Effective copy pushes people into pushing your call-to-action. In order to trigger that, you must understand emotions and why people are interested in your services to begin with.
For example, why would a person want to buy your book, or retain your services? (Hint: it’s not about you, it’s about them.)
The short answer is that the potential customer wants to improve their knowledge or their website. Your copy should answer that deep quest, not drone on and on about how great your services are. Only indirectly can you do that.
Directly, you must focus on the clients needs and why they should care.
7. Call to Action
The call-to-action is the most important element on your landing page. It tells the visitor what they should do to get whatever it is that you’re offering.
Don’t settle for those pre-made “submit” buttons. No one wants to submit. That’s a horrible word!
Instead, use words that describe what is happening or will happen. Here’s some examples:
Join our community
I want my freebie
Get results now
Thank you for your donation
Give me my free ebook
Download yours right now
I want a better website
I love discounts
The list goes on and on. The point here is to craft a call-to-action that reflects the tone of your landing page. It should be personable, and it can be fun or serious, depending on the topic.
Forms should be simple. In fact, I’m a big proponent of the one field form-- email address only. If you ask for date of birth, daytime phone number, mailing address, and blood type, you’re turning away a lot of folks who would’ve easily given you their email address.
People do not want to give away all of that information to you when they don’t know if they can trust you. Respect that.
You can always ask for more information once you establish a relationship.
9. Social Proof
People like to know they’re not alone. A landing page is a great place to add testimonials or other forms of social proof.
Use names, photos, websites, Twitter handles along side the testimonials. Having those references validate the testimonials.
Another way to add social proof is by adding numbers of subscribers to your call-to-action. For example:
Join 15,702 others who’ve signed up for the newsletter!
It may seem simple, but the little things can positively persuade conversion.
10. Responsive Design
Your landing page must be responsive. Over 80% of Internet traffic comes from mobile devices. If your landing page looks skewed on mobile browsers, all of your hard work will be for nothing.
Make sure that your landing page can respond to every viewport.
Wrapping It Up
Hopefully, this primer on landing pages has inspired you to go out and create your own. There’s no time like the present! Have fun creating a landing page, and when you do, link to it in the comments so that we can check it out.
Get Daily Web Design News Every Morning
Join our mailing list to receive the latest news from our Web Design Ledger.