From the moment a user reaches your landing page, a timer goes off. You’ve got roughly 15 seconds to convince your user this is where they want to be. So, how do you get your user to commit? How do you make sure your landing page has got what it takes?
The human attention span has dropped to 8 seconds .(If you’re still here, I’m honored.)
Before we get into the nitty-gritty, let’s quickly talk about “landing pages”. A landing page is a standalone web page created to cater to very specific business goals; it could be a marketing or an advertising campaign or simply to create a brand presence. This is where a user “lands” when they click on a link in an email, an ad, or from a homepage.
Unlike a homepage, a landing page is designed with a single primary goal. It is essential to know the purpose of your business which in turn will allow you to dictate the goal of your landing page. Do you want users to join the waiting list for your product? Do you want them to sign up for your newsletter? Or lead them to an offer? Or do you simply want to create brand awareness?
While most business goals are geared towards a definitive action, some landing pages are simply built to create awareness. Start by first identifying your main business goal and then move on to what you are trying to convince your user about. As cliché as this may sound, to convince your user you need to step into their shoes (or Crocs, or socks).
Time for some role-playing!
Remember, the overall goal of your landing page is defined with the help of a CTA (Call To Action). Typically, landing pages contain ONE main CTA that completely grabs the users' attention.
Ola’s website vs a landing page for their electric scooter While the home page has dozens of distractions, the landing page is focused. They have used the help of big visuals and clean design to keep the user engaged. The big text upfront with good copy throughout keeps the user scrolling.
Nowadays, building landing pages is advertised as something you could put together while watching an episode of Curb Your Enthusiasm (no offense to no-code platforms, we are big no-code supporters at Tuesday). Trust me, there’s more to it than simply drag and drop.
Here are some landing page best practices to get you started:
A landing page has ONE single goal so it’s important to keep all distractions at bay. One way to do this is by ensuring your navigation is straightforward; remove unnecessary links and secondary CTAs.
Whatever be our attention span, it is no secret that given multiple links at hand, we would love to hop around and explore, thus moving away from the subject.
Those first 1440x900 pixels are where it’s all happening. Out of the 15 seconds a user spends on your landing page, 80% of it is spent on the first fold. Make sure your brand’s headline and CTA are clearly visible in the first fold.
Use different media, like images, videos , and GIFs, to keep your landing page engaging and interactive. Not only does this stop your user from “bouncing” but it’s also an effective tack for explaining how your product/service works
One way to convert your user is to make them feel safe. A sense of stability is essential; whether that comes from the brand voice, your copy, or including testimonials from satisfied customers. Alternatively, trust is built by knowing what not to do. At the age of 7, I convinced my parents of the ONE thing I absolutely wouldn’t do if left home alone, burn the house down (they believed me). Sometimes, talking about what you know you shouldn’t do reassures the user and helps them feel safe.
Great copy should be effortless and should roll off your tongue like the latest song by the Gorillaz. Landing pages benefit from keeping the content short and straightforward; try to use fewer paragraphs and more bullet points.
It’s no shock that most users are browsing on the go; on the way to work or while eating lunch. This means smaller screen sizes and slower load times. Make sure your landing page fits all screen sizes and allows uniformity and seamlessness.
A/B testing your landing page informs you which version of your landing page results in more clicks and better conversion. Tweaking your headline, changing your offer, or making the color of your CTA more saturated, could make all the difference. Tools like VWO and Optimizely provide plenty of versatility while testing.
Performance monitoring helps improve the service speed of your website, which ultimately increases user satisfaction and retention. There are many free and open-source tools across the internet that help you track the performance of your website. Lighthouse audits your page across categories like accessibility, best practices, SEO and provides a detailed report. GTMetrix is another great tool that identifies the issues that are impacting your performance and also provides the appropriate solutions.
Like all great design journeys, we begin by understanding our target audience and what is it that our landing page is trying to achieve. Make sure you establish a marketing strategy that clearly identifies the end goal. Grab a sticky, jot it down and keep it within sight at all times. In this phase, we create a Figjam and carry out brainstorming sessions. Our whiteboard is usually a collection of:
‘Know your users’ is a mantra we never lose sight of as designers. One of the best ways to do this is by creating personas. Give your user a name, guilty pleasure, and map out their needs and wants. This allows you to understand the expectations and motivations of your target users which in turn lets you build a successful landing page.
This exercise helps deepen our understanding of competitors’ products. It helps us find out gaps in the existing market and add features to our landing page that would bridge this gap. Moreover, it serves as evidence to back up our design decisions. Begin by grabbing a few screenshots of competitors landing pages and note down what works and what doesn’t for each.
A mood board is a collection of different kinds of elements; from images to textures that help collate and visualize concepts. Creating a mood board is a practice we stand for as a design team. If I could create my own job title it would be something along the lines of “Mood-Board Maker”. Besides being fun and inspirational, putting together a mood board also allows everyone to be on the same page before the actual design begins.
P.S: To master the mood board, check out this article.
Once we’ve done our research and everyone is in accord, we start to fill in the blanks. This step involves writing the content; which plays a pivotal role in the success of your page and creating a wireframe to give your page an ideal visual hierarchy.
By this point, we’ve created a new page on Notion and we’re ready to get going! The key to a good landing page is a persuasive copy. Sure, a captivating headline will hook users in, but the way to win over viewers is to make sure all your content is crisp, concise, and convincing.
It’s time to take a step back. We ask ourselves, how can we create a sense of trust and urgency in the user? How do we convince them this is exactly where they want to be? At this point, involving all the stakeholders is beneficial. It helps further understand the brand’s tone and how they want to come across. Here are a few tips:
It’s a Sunday afternoon, you’re in the mall and you see that perfect hoodie. It’s got everything you want: 8 pockets, a little Pikachu upfront, and even a secret pocket! Turns out your size just isn’t available but now you can’t get it out of your head. Likewise, colors and a good typeface tend to distract us and convince us that this design is the best.
Here comes the need for wireframes. Without all the adornments, a wireframe allows you to focus on your information architecture and visual hierarchy. It ensures the proper flow of information along with the landing page. One of the principal concepts of conversion design is creating an information scent. This is a trail you layout on the landing page that you want the users to follow as they navigate through. Wireframes help you do just this!
Page scanning patterns. As humans, we typically tend to scan information from the left. Ideally, it is best to place your CTA on the left-hand side of your page. The F & Z patterns are the most common and effective visual hierarchy patterns followed by designers. Get into it deeper here.
A style guide is nothing but a set of rules that need to be followed by all designers while they design the components of the landing page. Style guides cover everything from typography to colors. It is key to maintaining consistency throughout your landing page and minimizes decision-making. Believe it or not, you don’t need to use a color picker every time you need that one shade of blue or teal.
On Wednesday, whether we’re building a landing page or a product, building a style guide is imperative. It helps onboard new designers to the project much faster and assists developers in building fully responsive, foolproof products. Enough from me, you can head over here to read more about style guides.
Only took us 5 steps to get here but it’s time to start bringing your ideas to life! Sure, writing convincing copy helps you convert your landing page visitors but what really keeps them there is the look and feel of the page.
Visual design is unique to every designer and every brand. It’s something that cannot be taught but must be experienced. We try to keep our landing pages as visually simple and clean as possible to help improve visual focus.
Here are some of the main elements of visual design we focus on:
Using images and videos in your first fold greatly improves your chance to connect with the user. You can use media purely to create an emotional connection, but it can also be used to show your product/service in action. Landing pages built by Apple use beautiful, crisp images on clean, consistent backgrounds that immediately allow the user to feel inspired. Focus on keeping it simple and clean and you’ll see a wonders unravel.
Getting our users to convert is definitely the primary goal of the landing page but we also want our users to scroll below and learn more. One way we do this is by using a cutoff affordance or dropping visual cues. Leaving elements on the bottom of the fold incomplete or simply adding an arrow point downwards, prompts the user to scroll further.
You go to a website and it’s usually the colors that make that first impact; they dictate how the rest of your experience will be. Similarly for landing pages, it’s essential to remember:
As designers, we sometimes are overcome by the need to fill in the entire canvas to keep the page engaging but, trust me when I say white spaces can make ALL the difference. Using white spaces strategically can help you keep your landing page uncluttered. Adding white space around the CTA, also helps it stand out.
Never underestimate the power of a good typeface. Not only is it the base of how your information is getting delivered to users but it also helps create a hierarchy in your design. Type hierarchy is created by using h tags from <h1> to <h6>. These tags also help in SEO purposes while building landing pages.
Be careful while pairing fonts, don’t go below 14px, and keep it fun!
Visual design in itself is a vast and never-ending conversation. Given above, are just some of the main elements to keep in mind to build effective landing pages. Start small, try to pick what’s important for your brand and user type, and work with that.
One of our greatest pet peeves as designers, is with developers not being able to convert our designs into reality, whether it’s a matter of a couple of pixels or the wrong icon. Now with Webflow, at Wednesday we build our own landing pages in a matter of days. Implementing our landing page designs into reality usually covers three phases:
By following a set of wiki of already established rules for the box model and naming conventions we start by converting our Figma designs into Webflow pages. We begin by building a completely responsive style guide across all breakpoints on Webflow and start building one section at a time, ensuring full responsiveness.
(I’d need another whole article to get into Webflow best practices, but that’s for another day!)
If you haven’t heard of Webflow, you’re missing out. Get started now.
Yup, we’re back to feedback.
By now your stakeholder might be getting antsy. The release date of the landing page is right around the corner and suddenly, that one paragraph on the page just doesn’t make sense. By using tools like MarkUp, we use the staging site to get any last-minute feedback directly on the website.
Webflow helps you follow SEO best practices. These help you rank higher in search engine results and make sure, your target user finds your page. At the end of each project, we take some time out and ensure we’re on track to convert more users.
Press publish and voila, you’re now one of them(in a) million landing pages out there.
You made it but the journey doesn’t end here. Keep your landing page up-to-date, respond to your users’ queries and keep tracking it using analytic tools to help govern future decisions.
Here are a few of my favorite landing pages. Have a look and you’ll know just why!
Designing a landing page will always be a challenging task, especially with all the edgy content going out nowadays. Most landing pages these days use BIG copy that takes up the entire first fold and funky buttons with great interactions. They keep the content simple and keep the user curious and wanting more.
Understand your business strategy, get ahead of what your users want and the rest will just fall into place. Keep in mind, if you’re not converting users something simply isn’t working.
Or, do none of that and simply reach out. We build cool landing pages and we’d love to help.
Song of the article: Seven O’Clock by Pearl Jam(I Hope this song helps you create an epic landing page as much as it helped me write this article)
Ummesalama is a UI & UX designer at Wednesday Solutions. She loves to make mood-boards, listen to Kings of Leon, and endlessly stare out of windows. Connect with her on LinkedIn here.
Looking for help with development, design, or product strategy? We're here to help.