How to Not Design Beautiful Ineffective Landing Pages

Today, landing pages are a must have: web designers and marketers use them to give visitors a quick, effective, and possibly engaging first-visit experience on their websites. Every time you read about landing pages and advertising, experts say that you must design your landing page according to the advertising message: never ever send people to your homepage when they click on your advertising.

A lot of great tools are born for landing pages design and A/B testing too. They are totally visual tools, presentation oriented, and very easy to use, so anybody with a landing page idea can implement it.

However, being so presentation oriented can be an issue instead of an advantage.

Convey the right message

Landing page design is first of all a matter of conveying a message: you should tell visitors the right things, show them their own pains and explain how you are solving them, or tell them an engaging story.

You want to guide visitors to the call-to-action, so they convert from casual visitors into recurring visitors or customers.

Wireframe examples VS. visual landing page. Which one keeps you away from visual tuning?

Usually, when you use a presentation oriented tool you pay a lot of attention to details. Unfortunately, you focus on the wrong details because you want your landing page to look good: you’ll have a beautiful landing page, but does it convey the right message?

Message centered design: Balsamiq at work

Balsamiq is a wireframing/mockup tool designed for application design (desktop, web, or mobile), but it also does a great job with landing pages.
Many wireframing tools exist, but Balsamiq makes you forget the visual aspect of your landing page for a while! How? It provides a lot of ready to use sketched visual controls (text labels, buttons, containers and so on). It also allows you to sketch all the new visual components you’ll create.

When we designed our landing page according to a problem-solution flow, we created a couple of hand-made arrows, some paths (get the symbol library), and composed some images to guide the visitor to the call-to-action. Then we added them to our landing page and activated the sketch flag, immediately!

So, we have been ready to focus on the design of the message flow:

• catch the user attention,
• identify the user pains,
• show that the current solutions are not effective

Finally, propose the call-to-action.

Since Balsamiq doesn’t provide any way to control the visual aspect of the page, you are forced to think about the content.

Balsamiq Trick: If you are creating a long landing page (such as our own at Dlopy.com or long sales letter), add a “DELETE ME!” text label and drag it down for a while. In this way, you’ll get a long canvas ready to draw your landing page. Don’t forget to delete the “DELETE ME!” label when you are done, especially if you are going to give the mockup to the web designer.

Don’t trust me! Try yourself: build a landing page with a presentation oriented tool. After adding the first control, your next action will be to choose the colors and move it to the right pixel. Your page will not look good yet! Don’t you like to add a shadow? Choose the font family? Before you realize it, you are totally unfocused on the message. So, you’ll have got a beautiful, ineffective landing page.

Put this post into practice, right now:

• sing up for a free trial on Balsamiq
• create a new project and then a new mockup
• download and import our symbol library for landing pages design
• design a landing page mockup for one of your projects

Don’t forget to stay focused on the message!

How do you design your landing pages? Share with us in the comments.