The 6 Big Rules of Landing Page Design (Straight from Highly Successful Web Designers)

There’s an old-school marketing mantra that goes like this: “If it’s ugly as hell, it will probably sell.”

That might have been true back in the days when junk mail and infomercials were hot marketing tactics. But as far as I can tell, that day is long gone—especially when it comes to landing page design.

In fact, in the early days of Leadpages, we saw some of our biggest conversion-rate breakthroughs when we took garish-but-functional landing page designs and had a professional designer reskin them. Some of these redesigns boosted the conversion rate as much as 50%–60%.

Today, you'll have a hard time finding an "ugly" page if you look through our highest-converting landing page templates. Our designers have made sure of that.

But what if you don't want to start from a template? What if you want to make a landing page that's totally unique, from the ground up?

The drag-and-drop page builder gives you the flexibility and freedom to create whatever you want. Including the freedom to make big design mistakes. Unless you have a team of designers whispering in your ear along the way, you might start to question your judgment pretty quickly.

So how do you think like a highly sought-after landing page designer without dropping everything and enrolling in design school?

To find out, I called in a couple of experts.

Travis Moore has been a graphic designer for about a decade. He began building landing page templates to make a little extra money on the side while working for marketing companies, but it quickly became a passion. He’s created hundreds of templates at this point—too many to count, he says.

Kayla Sawtelle is a web designer here at Leadpages. I wanted to get her perspective as someone who creates our very own brand materials and webpages, in addition to some landing page templates.

They both shared their best tips on designing beautiful landing pages that not only look great but get conversions.

I also asked Travis and Kayla to tell me all the things they double-check before hitting publish. I’ve turned that list into a pre-publish design checklist you can save and look over every time you create a new page. Click below.

Rule #1: Keep an eye on design trends

When’s the last time you arrived on a webpage that was packed with photos, videos, written information, and buttons asking for your information, all packed tightly onto the page and you were inspired to actually give that site your email address or buy the product it was selling? It’s probably been a while because cluttered pages with a lot of information are so out of style.

Travis explains, “Currently, the design trend is flat and minimalistic. The days of extreme gradients and drop shadows are dated.”

While you certainly don’t want to do what everyone else is doing just for the sake of blending in, you should keep in mind the trends of the moment in order to ensure that your page doesn’t look dated. A big part of the movement towards simplicity in web design is a desire for fast load times and pages that look clean on mobile devices.

Simplicity is a result of technology developing over time, so it really will look dated if you’re not keeping it clean and simple, and looking dated might hurt your conversions. “My main point is that you don’t want your page to look too dated or strange to the viewer as it will reduce conversions. It’s a balance,” Travis says.

Plus, keeping things simple will keep your load times nice and fast, a crucial factor for getting more conversions. According to Kissmetrics, a 1-second delay in page response can result in a 7% reduction in conversions. So keep it simple!

Rule #2: Leave some wiggle room

The key to this simple aesthetic is whitespace (or empty space if your page isn’t white). Kayla emphasizes that this extra space, which she calls “breathing room” not only makes your page look more modern and can help it load faster, but it also keeps your reader from getting overwhelmed.

In her Elegant Non-Profit Landing Page template, Kayla keeps things simple by focusing on a beautiful photo and a call to action. Then she leaves a little gap before the text of “Help Us Reach Our Goal.” The spacing gives the feeling of the expansive forest and also is simple enough not to distract a potential lead.

“It’s good to have space above and below sections because your eyes can get overwhelmed by reading too much. It makes you pause for a minute to notice a new thing,” she says.

Ideally, that thing you notice will be a strong call to action, and you’ll be moved to opt-in.

Rule #3: Use design elements to organize information

Sometimes, you just can’t keep it super simple and you need to give your leads a lot of information. Instead of hitting them with a wall of text that lets them know, essay-style, why they need your product, you should break it up and make it easy to read.

First, figure out what your highest priority information is, and then look at what else absolutely has to be there. Ask yourself what you can break up into bullet points and which related ideas you can group together.

Kayla recommends boiling down the main points and making them bold or creating headlines for each main point. She also says that graphics can be really helpful in breaking up text—or even replacing text if they can get the point across.

In this Coach Guru template, Kayla has organized the text in a few different ways. She draws attention to the first paragraph of the text by placing it front and center, then divides the second part of the page into two. Once it’s time to talk about this business’s services, she helps visitors quickly find the information that’s most relevant to them by providing space for icons to indicate the subject matter.

Can you imagine reading all of this text without the visual break of the different sections, images, and headlines? It would be a headache, and you’d probably skip most of the reading and move on to find a page that was easier to understand.

Rule #4: When it comes to colors, less is more

Travis and Kayla were both quick to point out that one of the biggest mistakes they’ve seen in landing page design is using too many colors or colors that serve no real purpose.

“The more colors you have, the more you need to take into account the meaning behind them,” Travis said.

Colors help you mentally prioritize information. For instance, if you use a mostly grey color scheme with some blue accents and a red call to action, you’re effectively setting up a color scheme that prioritizes your CTA box. All of the grey is going to register to your page visitor as the lowest priority, and blue will be of medium importance.

Kayla and Travis both advise that you should have one color that you use just for your CTA button. This will help it stand out from the background and emphasize the action you want your page visitor to take. Even if you squint your eyes to make the page seem blurry, the CTA should contrast enough to still stand out against the background.

Travis accomplishes this task well with this landing page template (find it by searching for “Business Training Class" in the template marketplace. The yellow button stands out against the background, drawing your eye immediately to the “Save my spot” call to action. Even when you squint your eyes to make the page blur, you know where he wants you to click.

Another way you can use color to emphasize what’s important is by shifting the background color. For instance, Kayla noted that our own design team will sometimes make the background of the pricing section of a page bright blue since this is crucial information for potential customers to have. Visually, the color stands out from an otherwise white background and tells you this is important information.

Colors can also help you establish your branding and authority, so be sure to use your brand colors.

Kayla emphasized the importance of creating a consistent experience for your customer so that they build trust in your brand. Especially if they are coming from an ad somewhere, you want to be sure to keep the colors consistent so that potential leads aren’t thrown off and tempted to navigate away from the page. Colors are an easy way to reassure leads that they’re in the right place, which will make them more likely to share their information.

Another issue with text is when it is difficult to read. If your information is important, you probably want to double-check that you’ve picked a color combo and size that’s easy to see and easy to read. That means no light grey and no itty-bitty fonts. Kayla used colors for her text that contrast with the background color, making the text super readable.

Readable text is just one of the many things you’ll want to double-check before hitting “publish” on your new design, so I’ve created an easy pre-publish design checklist to help you keep track of all of the little details.

Rule #5: Use images that support your content

Travis said one of his biggest landing page design pet peeves is the use of images that have nothing to do with the offer. This usually happens when someone reaches for an image with broad appeal but doesn’t quite think through its purpose on the page. Sure, everyone might enjoy fantasizing about being on a tropical vacation—but if your landing page is about accounting software, an image of a beautiful beach scene isn't likely to reinforce your authority or your brand image.

Images should support what you’re selling or the action you want a visitor to your page to take. If you’re putting an image on the page, ask yourself why you’re using it and what purpose it has.

In this Travel Landing Page template that Travis designed, the images are doing the work to make a reader want to get more information.

The images say what the text doesn’t have to. The sunglasses with a reflection of palm trees are enough to make me want to take a trip to the beach, and the smaller photos support this spirit of exploration and adventure. A tour company using this template would only have to fill in a few crucial details above the fold—no longwinded copy or flashy descriptions of the joys of travel needed.

Photos can also offer visual cues to subtly direct a reader to exactly what you want them to do. For instance, if you have a photo of an open laptop greeting visitors to your page, you can have the laptop face toward your call to action. It will act like a little arrow saying “look over here!” and serve as a visual cue to remind visitors of the action you want them to take. The photo in Travis’ example subtly points toward the call to action with the angle of the sunglasses.

You can use large photos like this, but be sure that your load time stays fast by resizing images to smaller file sizes.

Rule #6: Design for all screen sizes

It’s just a fact these days that people are reading just about everything on their phones, and your landing page is no different. Before publishing, you should always check how your page is going to shift once it’s on a smaller screen.

According to Monetate, in an analysis of online shopping sessions, global conversion rates on smartphones in the first quarter of 2016 were about 1.43%, compared with 3.89% on the traditional desktop. You’re fighting an uphill battle for conversions on mobile, so you have to be certain your landing page design isn’t working against you.

With Leadpages, luckily, it’s really easy to check that everything is working on mobile right within the landing page builder.

In fact, it’s guaranteed that your page will look good on mobile—every Leadpage is mobile-responsive right out of the box, even pages you build from a totally blank slate in the drag-and-drop builder. That said, you should still make sure all your most important elements end up where you want them on mobile before launching a page.

When you’re editing a landing page in the builder, you can easily preview it will look on a tablet and a phone.

After I clicked on “phone,” I was able to see that this landing page that Kayla designed looks great on mobile. All of the information is still there and nothing has become too large (or too small) for the screen.

Some of the top issues Kayla sees on non-responsive mobile pages are information getting cut off, the text being impossible to read, and images that don’t resize properly and therefore take up most of the screen.

All of these issues are just hurdles for potential leads that will make them unlikely to convert. But sometimes the issues are a lot smaller, and you might just want to change the spacing, the size of your images, or the height of your headlines.

If you want to double-check that everything is perfect before you send it out into cyberspace, be sure to download the Landing Page Design Checklist below.

Did we address your biggest design headaches? Let us know in the comments what your biggest challenges are when designing a new landing page.