Unlike a website with multiple pages, a landing page is a single webpage created with ‘one’ specific purpose in mind. In this case, housing your freebies and selling your offers. A great landing page should lead your customers on a journey that draws attention to what you offer and convinces them to invest in you. It should make your customers want to read further and stay on the page. For that, it’s important to make your landing pages ‘pop’.
Below are some design tricks that help with that.
Give Your Landing Pages “Space”
Space refers to the open, unfilled areas between different landing page elements. Though popularly known as ‘whitespace,’ it can be of any color. Preferably one of your brand colors.
It allows readers to gradually see your content instead of cluttering your page with information. Thus drawing attention to individual elements.
Here’s how you can use space in your landing page design to make it ‘pop’.
- Use space around call-to-action buttons and important sections like FAQs and pricing tables to make them stand out.
- Don’t clump the page’s text, images, and other graphics altogether. Instead, see how they correspond with each other and use appropriate spacing to separate them for better comprehension.
- Use darker colored sections next to lighter colored ones. Or alternate them for better separation of information.
- Add negative space around important media to draw attention to it.
- Have space around headlines and other important text for ease of reading.
Use Color Theory
Different colors bring out different emotional responses in people. For example, red promotes urgency, and green is associated with refreshment. Check out the color associations of each color and pick 2 to 3 colors based on the associations you want your readers to pick up on.
Visitors also need to understand the information quickly and easily when they land on your page. And sometimes, the wrong color combinations can throw a spanner in the works, like yellow on a cyan or light blue background. The color wheel is the best way to find color combinations that work together. You can use analogous and complementary colors or one single color in different hues and shades for balance and harmony.
Light colors on dark backgrounds and vice versa are also perfect for ease of reading. You can also throw a couple of neutral colors like gray, black or white in there for better readability and contrast.
Design for Mobile Devices
53.3% of web traffic is now mobile. That’s why it’s important to ensure that your landing page looks good and is readable on all device sizes, not just the desktop or the laptop. For that, you need to:
- Keep it simple. Give people what they are looking for without making them wade through a ton of information or design elements.
- Ensure that the text is easily readable. It shouldn’t touch the sides nor have too much margin.
- Resize images, so they fit completely on smaller screens and aren’t cropped off.
- Hide images that hinder the scroll.
- Keep your clickable elements larger and more spaced out.
- Ensure the sections stay together as intended and don’t separate from each other in mobile view.
Make Your Landing Pages Pop with “Emphasis”
There are certain words and sections you want visitors to pay more attention to. For that, you need to place an emphasis on those words and sections. You can do that by:
- Underlining, bolding, or italicizing buzz words.
- Highlighting big ideas to draw more attention to them.
- Adding a pop of color to a section or specific text in said sections to make them stand out (like testimonials or prices).
- Using Contrasting colors in the background and text.
- Using different colored boxes to highlight different features and benefits or different people’s testimonials.
- Having the CTA in a vibrant color over light background.
- You can also place emphasis on micro text inside the testimonials to ensure the reader sees just what others find great about you.
- Use Uppercase Letters in TITLES and Headlines.
- Use arrows (▶️) and checkmarks(✔️) to encourage people to get it done.
Play around with different font sizes. Make the important text stand out by using bigger fonts.
Use Directional Cues
You use directional cues when you subtly want to encourage your readers to look at some element of your landing page. Like 🔽
- A little arrow indicating a scrollable section.
- An image where the eyes of the person in the image are pointed at the text.
- Images where the graphics all point at certain text.
Notice how her head angles toward the text?
Make Them ‘Hear’ Your Copy.
Your landing-page visitors can’t connect with your personality by hearing you speak. They can’t tune in to the subtle inflections you can hear when someone speaks. So you can do the next best thing by:
- Grouping related or similar points together. Like features and benefits in a single column.
- Transition to a new topic (for example, from the headline to the introduction) by inserting space to break the reader’s thought process.
- You can also do the same to indicate a change in ideas, tone, or emotions.
- You can establish a cadence by using smaller fonts for less important information and emphasis for the more important stuff.
Use Balance in Your Landing Pages
A well-balanced landing page is more pleasing to the eye than one where:
- The graphics and text are unevenly distributed
- The page seems image/text heavy on one side and empty(ish) on the other.
For well-balanced landing pages, you need to;
- Have equal spacing on the top/bottom, left/right of every section, element, and layout.
- You can use the grid option to ensure various elements of your design line up with each other.
- You can also make a section within a section if the text and graphics are well balanced.
The image above is also an excellent example of balance. And I’m not saying that just because our amazing Website Designer made that.
Pay Attention to the Typography
- As tempting as it is to use multiple fonts to emphasize different sections of your landing page or make your design prettier – don’t. Here’s what you can do instead:
- Select 2 to 3 fonts for your landing page and keep them the same throughout.
- Have 1 or 2 main (simple) fonts for most of your text and headlines.
- Add a third decorative (but still readable) font for emphasis.
- Keep all your fonts easy to read.
Be Creative with Details
The devil (or, in this case, conversion) is in the details. You can add a dose of creativity to detail and explain complex topics simply. You can:
- Use mockups to show how a course/pdf/ebook will look when it reaches the readers.
- Add spacers and lines to disrupt the flow of reading and negative space or directional cues to draw the readers’ attention to another piece of information.
- Use photos and graphics that speak to your ideal audience.
- Use icons to turn mental concepts into physical ones, like the example below.
Don’t Forget to Brand Your Landing Pages
As you can see from the examples above, we’ve used a single landing page to draw attention to all the design tricks to make landing pages pop. The colors, fonts, and images hold true for all the sections. That’s what we mean by styling for the brand.
For that you need to know who you are serving and determine how you want your brand to be perceived by them. And once you’ve determined that, use the words, colors, and images that represent your brand the best.
Just like colors, shapes and lines also have meaning. Figure out what they mean and use them on your landing page to create associations.
Don’t confuse the reader by using too many colors or shapes. Pick the 5 best colors (Including neutrals and contrasting colors that complement each other) and up to 3 shapes to represent your brand. Use them to style your landing page. Use photos that resonate with your target audience and represent your brand the best.
So there we have it. The 10 design tricks to make your landing pages pop. I hope you enjoyed reading it as much as I enjoyed writing it. Need help building your landing pages? Amazing OBM is a team of master marketers standing by to provide done-for-you copywriting, branding, and web-designing services. Contact us for a free consultation so we can chat about what your business needs.
10 Design Tricks to Make Your Landing Pages Pop
August 9, 2022