Published on | Prototyping: From UX to Front End — Medium Sophie Riwaters

It can be a real challenge to create a top-notch landing page. Not only that it needs to be eye-catching, but it also needs to be informative for your audience. If you already own a website, you should know by now how hard can it be to drive quality traffic to it and that’s only the tip of the iceberg.

So why should you even bother, when you already have a killer web page, right?

A Landing page is often confused and referred to as the page in which a visitor is directed to through links. However, a landing page is a web page itself that serves as the entry point for your main website or a particular section of it. It needs to be specified and functionality added to it for an example:

attract visitors.
get contact information such as email
convert visitors to customers

Their sole purpose is to make visitors click the call-to-action.

There are plenty of reasons to fire up a landing page right now:

gives you credibility — in the eyes of your visitors. This is because you can tailor a landing page until it suits your visitors like a glove. In other words, you tend to solve a specific problem for them.
improves SEO — a relevant landing page with quality organic content will skyrocket to the Moon and elevate you in search engines.
increase your chances — regardless of the size and stage a landing page is a great lead magnet. By building trust and -like mentioned above- credibility helps you to distinguish yourself from the competitors.

Sounds good right? But where should you start?

Before you jump right into the middle of templates, take your time and dive into the amazing world of UX.

UX stands for User Experience, and it comes from User-Centered Design (UCD) which is important because when you design something, you do it with a reason. It deals with how your visitors feel when they interact with your product, website or in this case, a landing page.

In other words:

“UX can make a difference between driving them crazy because of you OR crazy for you.”

Tip #1. Emotional UX Design improves landing pages

Like it or not but we are driven by emotions -even if you consider yourself a real Marlboro cowboy-. So when talking about emotional design what you do is actually designing the context itself that triggers certain emotions. Emotions will connect you with your audience more effectively. Understanding their motives will help you discover what and how they want certain problems to be solved.

Ways to apply emotion:

Text — that shows you care! Highlight their problems so they can see that you understand them. Also don’t just write down stuff, engage in conversations. Don’t be afraid to use humor, or sadness if appropriate.
Stories — show experience. Sometimes a simple “Been there, done that” draws more attention than “dry” facts. Just be legit and enthusiastic about it.
Use powerful images — those trigger emotions and correspond with your product or service. Don’t just simply tell them how great you are when it comes to solving their problems, show them! While stock photos can be “comfortable” solutions but you should look for real life scenarios with real people involved instead. Doing so will build social proof.
Videos — can connect people like a thousand pictures. You can still get fast page load times even if you inject videos, so..

People love gifts — it makes them feel special, or that they are in just in time for something. Giving will make you look generous, just be honest about it. No hidden charges, or conditions. If you give, you give because you mean it and by doing so you’ll be building trust in no time.

Emotional design in work:

Source: webprofits.com.auSource: 99designs.com

Tip #2. The psychology of colors

Choose colors wisely — I’m sure you’ve heard some urban legends about brands applying the color psychology to brainwash the audience. This might sound little off charts but the fact is, colors play a huge role. In a research, Hubspot tested the following hypothesis:

“So, which color would convert more people to click? Would it be green, which connotes “Go,” or red, which connotes “Stop”? Would those connotations actually affect whether or not people clicked?”

Source: Hubspot.com

After a few days and 2000 visitors later, they got an unexpected result.

“The red button outperformed the green button by 21%.”

In a study by Joe Hallock, 232 participants from 22 countries were asked about their preferences regarding colors. It turns out that 57% of the males preferred blue as their favorite, while none of them voted for purple. However, 23% females tend to like purple, but blue — by 35% — still remains favorite in both genders.

So what’s up with purple?

Purple is sometimes connected with fear, but it also represents peace. Often beauty and imagination are also associated with it.

Tip #3. Contrast and accessibility

When it comes to contrast, people usually refer to the term as complementary colors. This is not the full meaning. Contrast is also about value.

Using low-value contrast can be a challenge to read for people with color vision impairments. The image below shows how they see red/green color, which is a very common and problematic combination for them.

source: usertesting.com

Around 8% of the male population suffers from some form of color blindness. If you’re using colors with low-value contrast, be aware that users who have color blindness might not be able to make out the words or the images at all. A dark red on a light background like shown on the image below solves this problem so you won’t lose conversions.

source: usertesting.com

Users were much more likely to click a CTA button that strongly contrasted with the background.

Tip #4. Visual Hierarchy

When a landing page is designed, different elements have different purposes and priorities. The closer the design gets to the expectations of the visitors the better. The visual hierarchy has influence over where visitors look first. You might have heard of eye tracking studies. It’s been around since the 1980s and it proved its significance.

The two main patterns when designing the path of reading website content also applies on landing pages.

Following the F shaped pattern users first start to read in a horizontal movement across the upper section of the page. This is followed by a second horizontal movement but it covers a shorter area. The last phase is when the visitors read vertically on the left side, moving down. Worth to note that there can be more horizontal movements involved in the reading process.

Source: 99designs.com

Another desired pattern is the so called Z shaped pattern. According to Jerry Cao, when users consume less text-heavy, but visually “richer” content, they usually follow a Z shaped pattern. Using scroll heatmap tools or click heatmaps can make it easy to decide what goes where.

Source: webdesign.tutsplus.com

Tip #5. White space

The space around images, the margins, paddings, the space between lines. White space or “negative space” is wasted space.

WRONG

White space is more than just plain emptiness. Think of it as “less is often more” rule that helps to avoid distractions.

Some benefits of using white space:

improves readability and prioritizes content, UI elements
essential for keeping up a clean, elegant look
guides the user

White space is an essential element in web design and “is to be regarded as an active element, not a passive background,” — Jan Tschichold

If you wish to read the full article click here: Read more.

Please write a comment, your feedback means a lot to me! Also sharing and recommending is a big motivation. I appreciate every help! ❤

7 UX Tips for Designing Killer Landing Pages was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

7 UX Tips for Designing Killer Landing Pages

Cool stuff, every week

More Articles