Examples of Effective Landing Pages & Tips

When you discover a new website, whether on your own or through a web search, consider the first page you usually end up on. That’s easy to imagine, right? Because you — and almost everyone else — likely land on the main, front page. Many refer to this as the landing page, for obvious reasons.

The landing page is people’s first impression of a website, business or individual. If performance is shoddy or the images look sub-par, that’s going to reflect on the associated brand or business. If the fonts are tough to read, or the content is riddled with grammatical errors, you’re going to assume the team behind the site is also plagued by these issues.

The simple point we’re trying to make here is if you’re going to ensure any page on your website is the absolute best it can be, put extra effort into your landing page. As the first place both new and loyal customers go when they begin your carefully crafted customer journey, it’s the doorway to all your other channels. It may even be the first — or last — introduction an audience has to your business or products. Did you know 53 percent of mobile users abandon a website or portal that takes longer than three seconds to fully load?

So, if you haven’t already, it’s time to get serious and improve your landing page with some best practices. What better way to do that than to look at real-world examples of web design and innovative content in action?

1. Appearance and Visual Fidelity

It seems silly to have to say this, especially with today’s emphasis on technology and digital content, but the look and feel of your landing page matters. If your page is ugly, has a poor design, experiences slow loading times or anything of the like, your audience is going to have a negative outlook on your brand or business.

Mobile devices can now display high-resolution images and video, with little to no loading times experienced. That’s important, because in the past you largely designed a desktop version of your site with high-res, high-quality media, and dumbed everything down for the mobile version. Today, if you don’t directly design for mobile, you likely develop something called a “responsive design,” which scales the media and content to match the resolution of the device users are visiting from.

Mobile delays and poor performance make audiences more stressed than the average horror movie. How’s that for tanking a reputation?

Take the MECO landing page, for instance. It doesn’t matter what device you’re browsing on — you’ll see incredibly vivid and colorful imagery, and captivating, yet clear, fonts. Scroll down the page some more, and there’s even some fantastic animation to go along with everything. Nothing on the site is too taxing, even on mobile. The visual fidelity and performance are there, and it’s stunning all around.

2. Colors and Fonts

Yes, we touched on the appearance and visual aesthetics in the tip above, but colors and fonts deserve their own section. Both a stark color contrast and an ugly font can cause serious damage to the reputation and bounce rates on your site.

Colors are important because even without images, you can use them to present beautiful and striking backgrounds and accents. Gradients, for instance, which have two colors merging in a unique style, offer an incredibly stunning appearance to the background of a content section or page.

Of course, if you slap poorly selected fonts and even font colors over a background, it can make the content difficult to read, or even frustrating for your audience.

Naturally, both the colors and fonts you select for your landing page need to mesh well, adhere to positive user experience standards and be convenient, yet attractive. Half of Us has some amazing use of colors and fonts on their landing page. Pay attention to the smaller background elements, especially with how nicely the fonts and colors play together.

3. Keep It Simple

Menus and navigation exist to direct your audience to other important areas of your site. The landing page is for quick, striking introductions. For that reason, you should keep the elements, media and content as minimal as possible.

Get straight to the point, and provide your audience with the tools or options they need to move to the next step in your customer journey or experience program. For example, Hello Bar has a single URL tool on their landing page. The company promises to help you “convert more visitors into customers” with their innovative product. Rather than waste time telling you about it, they simply offer encouragement to give it a try, and it works. You land on the page, and you’re more inclined to submit a relevant URL. Bam, you’re in, and you’re hooked.

4. Existential Musings

Who are you? Why do you exist? What do you do? What can you do for your customers and audience? As quickly and efficiently as you possibly can, state this information and or present it to them right on the landing page.

Yes, many of the customers visiting your site know who you are already. A large majority of your audience, however, is going to discover your business via web search, affiliate links or even typing your domain name into their browser. They have no idea who or what you stand for, so just tell them.

In line with the tip above, keep it simple, consistent and brief. Bloom, a web design agency, does exactly that on their landing page. What’s the first thing you see? The company name and a brief, yet effective, description: “An intuitive graphic and web design studio for purpose-driven entrepreneurs.”

They explain who they are, what they do and exactly the kind of customer they engage or assist. You can find your own colorful way to do this, but always make sure new customers and audiences know who and what you are. Furthermore, tell them what you specialize in. If you make home goods products, talk about what you offer. If you’re an advertising agency, list some clients or showcase a few portfolio pieces.

5. Give Your Visitors the Power

Your audience and customers are going to do what they want, when they want to. That’s the entire concept behind mobile web and modern design. Customers now have the power to engage exactly when they’re good and ready. Your landing page is the way to facilitate this relationship or engagement.

Right from the start, you need to give customers the power to achieve whatever you want them to. Because that sounds broad and confusing, let’s focus on one element you already know: the call to action. This step involves a button, statement or design element that compels your audience to do something.

You may want them to make a purchase, subscribe to an email newsletter or even reach out to a brand rep. Whatever the case, you deploy a call to action to get them to follow through. A prominent call to action is one common way of giving your visitors the power.

Apple’s smartwatch landing page is a unique portal that relies on this concept entirely. When you first arrive, you see the usual suspects: a top-seated navigation bar with various options and sub-menus, and a visually appealing background that shows the product. Right away, you can follow through to learn more about the product, or you can just jump to a portal to buy it. From the moment you arrive to the moment you leave, the power is in your hands.

Need more reason to provide a call to action? Consider that consumers now spend 68 percent of digital media time on mobile, and 35 percent of online purchases also happen on mobile. Giving your visitors the power, especially on mobile, is the way to boost conversions and engagement.

6. Tactile, Interactive and Real Experiences

Through concepts like parallax design, virtual reality and even chatbots or AI assistants, web experiences are becoming much more tactile, interactive and real. Customers have learned to embrace these new concepts, too.

Honu for iPhone has a vivid, bright and ideal website that exhibits this concept. Through parallax and brilliant imagery, you get a true feel for their product and what it does. More importantly, you can admire the attractive design and aesthetics, mirroring a real-world demo of the item. You know how sometimes it’s better to see a product in person? That’s exactly the kind of experience you’re looking to deliver online.

Your landing page is the first impression that needs to go well. Always look at your site from a user’s perspective. Applying the strategies above will not only provide insight into your business but it’ll lead to loyal customers.

Lexie Lu is a freelance UX designer and blogger. She enjoys researching the latest design trends and always has a cup of coffee nearby. She manages Design Roast and can be followed on Twitter @lexieludesigner.