Writing

6 Tips to Avoid Messing Up Your Copy When Designing Your Landing Page

O. Sentrec

• 3 min read

Copy should dictate design.

Design should support copy.

Let’s see how.

1. Visual Hierarchy

With visual hierarchy, you convey information in the most relevant order to the user. You direct viewers to the most important information first and then to the secondary content. The factors that affect hierarchy are:

  • Size. The larger the element, the more attention it will attract.
  • Color. Bright colors are more likely to attract attention.
  • Contrast. Contrast helps you show what’s more important.
  • Alignment. Alignment can create order between design elements.
  • Repetition. Repeating styles can give the reader a sense that content is related.
  • Proximity. Elements that are close to each other are considered related.
  • Whitespace. It draws attention to some elements.

2. Whitespace

It’s an empty area (not necessarily white) that helps draw attention or highlight a specific element. It has three main functions:

  • Improve comprehension by providing breathing space between elements.
  • Clarify relationships. Two objects next to each other are grouped together.
  • Focus attention. It makes particular elements, like your CTA, stand out.

3. CTA Placement

The complexity of your offer and the state of awareness of your visitor dictates when it’s right to place the CTA above or below the fold.

  • Above the Fold. Put the critical elements (headline, subheadline, hero shot, benefit, CTA, and trust indicators) in a block of content above the fold and the supporting content below the fold.
  • Below the Fold. Complex products may require longer copy because the reader needs to follow a series of steps before making a decision. In this case, the CTA goes usually at the bottom.

4. CTA Design

Best practices when designing buttons:

  • Contrast. Your button must stand out from the rest of the page. Choose a color that contrasts with the rest. Whitespace around the button will make it easy to spot.
  • Clickability. Make it look like a button. Don’t make it flat.
  • Size. A big and bold button is better than a smaller one.
  • Directional cues. Use directional cues to make your CTA stand out. By pointing to your CTA you are guiding the prospect’s attention to the button you want them to click.
  • CTA copy. Describe what happens when clicking the button. You can use supporting information, usually below the button, to clarify the purpose of the button.

5. Form Design

If you are creating a lead gen page with a form, pay special attention to the number of fields you include. A long form may be perceived as a daunting task. Reduce the number of fields to the minimum information you need to keep in contact with the prospect.

Some things you can do to avoid causing frustration to the person that is going to fill in the form:

  • When using a dropdown menu, include a viable option for the visitor. For example, “Other”.
  • Don’t include too many open-ended questions.
  • Don’t use captcha security that is difficult to figure out.

6. Organize your content to follow natural eye movement patterns

There are many possible scanning patterns, but the F-pattern and the Z-pattern are the most relevant when designing landing pages.

  • F-Pattern. Several scientific eye-tracking studies have shown that users read in an F-pattern. Visitors start at the top left of the page and scan the top of the site. They move down, reading the next row of content all the way to the sidebar. Then, they follow a “scanning pattern.” This means that the first lines of text on a page receive more gazes than subsequent lines of text on the same page. And, the first few words on the left of each line of text receive more fixations than subsequent words on the same line.
  • The Z-Pattern. It is a scanning pattern you can use for landing pages that contain minimal copy. It does not have to be a perfect Z. The visitor scans the page from the top left to the top right, following a horizontal line (use that line for your headline and subheadline). Then, the reader moves down and to the left side of the page, creating a diagonal line. Last, he moves to the right again, following a horizontal line.