7 Steps To Effective Landing Page Design

If you have been online for long, you are likely familiar with “landing pages”A landing page is a web page that prompts a visitor to take a single specific action.  Such as subscribing to a newsletter, or signing up for a webinar. In this article, we’ll discuss how to make sure that more visitors take action on your landing pages.

 

Step 1 – Performance Optimisation

Performance is a topic that is too often neglected when discussing landing page optimisation. Most landing page tips focus on things that are only important AFTER the visitor has landed on the page. If a landing page takes to long to load, the on-page elements become irrelevant as few people ever see them. To avoid losing visitors before the page loads, make sure your landing page loads in less than 3 secondsYou can test landing page speeds by copy pasting the page URL into a free online tool such as GTMetrix.com.

 

Step 2 – Choose Your Colors

Color is one of the most important aspects of any web page.  After all, it is the first thing that a visitor will notice. Be sure to use no more than 2-3 colors on your landing pages: A background color, a headline and bold text color, and a standard text color.

 

Background Color

Think of the background as the canvas upon which you will “paint” all your landing page elements. The last thing that you want is obnoxious colors that outshine everything else on the page. Instead, use colors like white, and soft shades of blue, green, brown, or black.

 

Headlines, Bold Text, & Call To Action Color

Headlines, bold text and calls to action require a different approach. You want your headlines, bold text, & bullet points to jump off the page.  They should be the first thing that a visitor notices when they reach your landing page. Select a color that contrasts with your page background as much as possible.

 

Text Color

Your text should be easy to read, but you don’t want it competing with the other elements for attention. It’s usually a good idea to stick with some shade of grey for landing page text.  The lighter the background, the darker the grey, and Vica Versa.

 

Step 3 – Writing For Conversions

The copy (text) is arguably the most important element on your landing page. However, this will depend on where your visitors are coming from. Organic traffic from search engines will need a lot of detail.  A visitor who has clicked an ad will need less detail.  This is because the ad creative will have already provided much of the information. The following elements can all be labeled as “copy”.

 

Headlines

If used properly, headlines can convince a visitor to take action on their own. Every headline should do the following;

  • Make it clear WHAT your offer is.
  • Make it clear HOW your offer will benefit the visitor.

The headline should do this as quickly and clearly as possible. Take the headline of this article for example.

7 STEPS TO EFFECTIVE LANDING PAGE DESIGN

It’s been broken into two essential parts:

 

7 STEPS…

This first part tells you HOW it’s going to help you.  It’s going to give you 7 actionable steps that show you HOW to improve your landing page.

…TO EFFECTIVE LANDING PAGE DESIGN

This second part tells you WHAT you are going to get.  You get a more effective landing page. Keep the headline simple and benefit driven and you will see your conversions increase.

 

Bold Text & Bullet Points

Bold text and bullet points highlight the features and benefits of your offer.  They should be used sparingly throughout your text. These sections of text allow visitors to scan your page, without having to read every word.  Yet they still provide a thorough understanding of your offer and what you want the visitor to do.

 

Text

The bulk of your text will go into more detail than most visitors will ever read. Most people will only read the headline and scan the highlights.  That should be all they need to decide whether they want what you are offering. But for those people who want more information, you can go deeper into detail in the bulk of your text.

 

Step 4 – Proper Use Of Images or Video

Proper use of images is an important part of most landing pages, but images can be tricky… Often the image that you think will perform the best gives you the worst results. A commonly used image type that converts well is a personal image of you or your team wearing open, honest smiles. This attaches a face, or faces, to your brand that people then associate with your products.  It’s easier for people to trust a smiling face than an anonymous web page. 

If you decide to use a video on your landing page, the same principles apply as with images.  Video however can be much more powerful. I will not go into a great amount of detail on the use of video on landing pages.  There are entire YouTube channels and blogs dedicated to this already. If you are new to online marketing, I would recommend sticking with images.  Only move to videos once you are ready to invest the time and money to get it right.

 

Step 5 – The Basics Of Buttons

Call to action buttons are usually complicated by marketers.  In reality, they should be the simplest element on the page. A call to action button should:

  • Contrast with all other page colors so that it pops off of the page,
  • Have a clear call to action, (Ex. “Get Your FREE PDF Download Here”).
  • Be featured above the fold* on the landing page, as well as near the middle and bottom.

By the time someone is looking at your call to action button they have already decided whether or not to click. Don’t overthink your buttons.  Just make sure they are visible, clear, and functional.

* “Above the fold” refers to the section visible on a web page before the visitor scrolls down.

 

Step 6 – Two Step Optin Forms

If your landing pages goal is to capture visitor information for follow up. The best way to do that is with a two step optin form.

This means that:

  • The first step of the page provides the information and call to action.
  • The second step is a popup optin form or payment processor.

Always use two step optin forms.  They are more effective than embedding your forms directly onto the landing page.  They allow you to get the user to say “Yes” before requesting any information, which is a powerful psychological trigger.

 

Step 7 – Above The Fold

Finally, you want to ensure that all of the elements mentioned above are located above the fold. This area should contain:

  • A Headline,
  • An Image or Video,
  • Bullet Point Features and Benefits,
  • A Call To Action Button which links to an appropriate form.

The area below the fold can contain more information for those who want it.

 

Landing Pages In A Nutshell

Landing pages do not need to be complicated. Unfortunately, there is a lot of software on the market offering landing page templates.  That means that to sell more templates, these software companies keep creating more.  The more there are, the more complicated they get.  

Keep it simple.

  1. Focus on the benefits that your product or service will provide to the visitor.
  2. Make it as easy as possible for them to get your product or service.

That’s it.

 

Top UX Trends 2016

Top 10 UX Trends In 2016

If you’ve been using the internet long enough, you’re probably able to look back and see some of the shifts and trends that have happened over the years.

These shifts in web design happen because the market evolves, requiring new technology, better usability, and more importantly, designers are stepping up their game and keeping each other on their toes.

As more and more clever designers start tapping into the new technologies becoming available to them, the trends will continue shifting. The only way to keep up with the pack is to be able to spot them, and then learn how to implement the changes into your own designs.

This article will cover some of the shifts in design that we’ve seen over the last year, and where we think things are going to be heading into 2016, 2017, and beyond.  If you want to stay relevant as a web designer, you need to not only keep up with the changing landscape, but also be able to easily adapt, and develop the right mindset to spot potential shifts into the future, as well.

Photoshop is making it’s way out, along with image heavy designs.

When designers figured out that they could create a blocked design that could then be layered with high quality photoshop images, the internet changed in a big way.  Long gone were the days of static HTML pages, boring table layouts, and endless scrolling to see the entire page.

However, as increased numbers of designers jumped on board with CSS based layouts, and layering images to the backgrounds of their layout, site speed began to slow to a crawl.  

Around this time, internet bandwidth and speeds began to go up, so the image heavy designs weren’t nearly as noticeable.  The static HTML sites, during this time period, would load lightning fast.

These days, though, with more people browsing the internet on their mobile devices, history is beginning to repeat itself.  

Slower bandwidth, and image heavy designs are working to keep the users from actually visiting the site – instead, hitting the back button and looking for another site that loads quickly.

Most times, too, image heavy designs cannot load properly on smaller touch screen devices.  This leaves images looking chopped up, layouts broken, and the user wondering where they should be clicking.

There is no generally accepted standard, so take your mobile visitors into account, and start creating designs that do away with the heavy, slow loading images, in favor of a CSS heavier design that loads much quicker, provides additional effects, and is compatible with most of the touch and mobile devices available today.

Designing around time spent onsite.

Web user’s attention spans are not getting any longer.  In fact, when a visitor lands on your website, you’ve got mere milliseconds to grab their attention before they’re distracted and thinking about other things again.  

That means, if your website takes forever to load (because of heavy images, hint, hint), you’re putting yourself at a disadvantage before you ever get the chance to convert that visitor into a new customer.

When you manage to get the site loading quickly, and have captured enough of the visitor’s attention to keep them browsing around, it’s time to figure out what they’re doing on your site, the paths they’re traveling through, and how long they’re spending on each page.

By using click trackers and heat maps, you’ll be amazed at what really goes on behind the scenes, when a visitor is working their way through your site.  Take this data and start working to get your most critical content into the “hot” positions on your pages, and watch your overall conversion rates increase.

Website Heat Map

Content is the new architecture.

Websites got away with using landing pages alone, in years past.  From their homepages, to the pages used to showcase their products and services, designers figured out that bare minimum content was enough to get by.  The internet is evolving again, though.

Revisiting a user’s attention span, it takes more content these days to get a visitor interested in what you’re offering, where, before, you could simply get a landing page with a couple hundred words of compelling copywriting to convert them into a sale.

Blogging is taking over in 2016, even for large corporations.  Businesses of all sizes are realizing the benefits of providing longer, more engaging content to their readers, and are relying on enticing headlines to get the visitors to stop clicking around on their favorite sites, and get them to move over to their own website.

Long Form Blog Content

Think about the advertisements that you see these days.  When was the last time you saw an ad that took the user straight to a product’s landing page, and then only contained 100-200 words of copywriting?  Chances are, not that many.

Nowadays, you need to work on funneling the visitor through longer content that gets their mind off of being sold to, and then use the same content to funnel the visitors onto your sales page.  If the visitor gets a hint of being sold, they’re going to hit the back button, or go back to what they were doing before they landed on your site in the first place.

Touch first designs are becoming more popular.

You probably already know (or at least, should know) that responsive designs are a requirement in 2016.  You can’t just get away with having a desktop version and a separate mobile version of your site.  They need to be one, in the same.

Likewise, even desktops and laptops are following suit with mobile devices, and becoming touch screen.  As the internet’s population gets lazier, and lazier, you’re going to have to work harder, and harder to keep their attention focused on your site.

One great way to do that is by implementing those touch focused design elements into your layouts across the board.  

There are really no downsides to having flat buttons and other elements that come natural to touch users, because desktop users can still click a mouse and the same urge to click carries over from their mobile devices.

In other words, the same types of designs and layouts that work great for smartphones and tablets also work great for desktops — even as they become more touch focused.  If your website is easy to browse around on using a small screened smartphone, it’s going to be just as easy to navigate on a desktop computer.

That means you can write off creating designs solely for desktop computers, instead focusing on smaller screens, and then include responsive elements that also look good when they’re scaled up on a desktop computer.

Incorporating customer data to increase user experience.

Implementing heat maps into your custom designs is something that you should already be doing, and something that large advertising agencies picked up on long ago.  The heatmaps and click tracking that were mentioned previously in this article are precisely the type of information that you need to be tracking.

Instead of using it to test the efficacy of your advertising, though, you need to use them to figure out what visitors are doing on the internet, when they land onto a site, so that you can begin creating designs that are focused on getting the most important functionality into these “hot spots”.

On a separate not, it can also tell you where you are potentially losing out on visitors.  For instance, if you implement the tracking and notice that visitors are scrolling halfway through the page, you can begin to address any issues that may be happening around that area.  

Most times, changing up the page copy, adding in the next step for your visitor, or even figuring out what the next logical step for them may be will not only increase their usability, but also increase the amount of conversions you’re able to make on the same design — without feeling left in the dark about where visitors are dropping off.

Large brands and advertising agencies have used heat maps and click tracking for years.  Now, designers are finally starting to figure out the power of the technology, and using it to help them create better designs that focus more on usability and functionality and, more importantly, reducing your bounce rate, rather than just looking good.

Card layouts, Hero images, and Rich animations.

We’ve already told you that getting your visitor’s attention while they’re on a mobile device is next to impossible these days, but there are a few design elements that you can implement to help you make sure they don’t hit the back button too quickly.

Card layouts, “hero” images, and rich animations all help keep your visitor’s attention, while not weighing down your site too much, or causing it to load slowly.

Card layouts are designs like Netflix and Pinterest use.  They lay out multiple cards for visitors to browse through, and continually load more as the user scrolls further, and further down the page. These cards are also database driven (in most cases) and are designed to load more cards that are similar to what the user has already clicked, and prefers to see.  

Think about your Netflix dashboard and how they automatically deliver shows and movies that are related to the shows and movies you’ve previously watched.  That means, as a designer, it’s time to start learning how to control the database to start displaying the most relevant content to your visitors, based on their past browsing patterns.

“Hero” images are the large images that take up the entire section “above the fold” and depict the company, brand, or website in a shining light.  For example, check out the image below by Tatabrew (http://tatabrew.com/).  It displays the company’s image front and center, and requires that you scroll down to get to the actual content.  This has a huge impact on grabbing your visitor’s attention as quickly as possible.

Tatamagouch-Brewing-Co-Hero-Image

The last design element that can get your user to stop what they’re doing and take notice are rich animations.  Much like a hero image, these animations occur when a user clicks on something, or runs their mouse over an element in your design.  

Most commonly, rich animations are used to bring in pop under forms that allow the users to subscribe via email. They’re also commonly used in navigation menus, background images, and slideshows.

Getting micro-commitments and interactions from the user.

In the age of mobile, getting your visitors to make “micro-commitments” to your website is the first step in getting them to convert into a subscriber, or a larger financial transaction down the road.  

Funneling visitors down the path you want to take them is becoming more critical, and requires a bit more creativity than simply stating “click here”.

Nowadays, you have to use the headlines in your content, and then expand on the headlines with extensive content marketing to ensure that visitors are going where you want them to, when you want them to.  

In times past, this was left up to the copywriters, but it is falling more and more on the designers desk to get the visitors taking smaller steps that add up to a bigger “yes” down the road.

As the visuals and layout of the design are being pulled up on smaller screens, the actual real estate available to work with is quickly diminishing.  

That means you’ve got to prioritize the design elements that you want to showcase at the top of the screen, and then move further down into the less-than-priority elements as the user scrolls.  

Getting this right requires a fine balance between design and content still, but going into the future it’s going to fall more on the designer’s hands to get this area right so that the copywriter has a good platform to start working with.

Flat, responsive designs are here to stay.

3D images and highlight text look great on desktop devices, but with the wide array of mobile devices available, it’s practically impossible to optimize your design for every single screen.  

That means designers can finally get away with being lazy, and implementing more “flat” elements into their templates.  It also means that the newer templates will continue to load faster, and faster, and remain compatible as new devices with varying screen sizes continue to roll out.

Designers realized the quick loading, flat, responsive designs are a hit with mobile users.  Taking it one step further, “parallax” scrolling has made it even easier to keep lengthy pages loading as fast as possible.

Unfamiliar with what “parallax” scrolling actually is?  Take a look at this link on fracking.  They are a prime example of how to properly pull off the infinite scroll, and combine it with the rich animations mentioned above.

Now, the design we just linked to is a pretty in-depth example of what flat designs are (no 3D images) coupled with parallax scrolling, so even if your skills aren’t quite to that level, it gives you a bar that’s just been set that you should start working towards.

Customer research and feedback plays a bigger role than ever.

When was the last time you got live feedback from actual users of the designs you’ve implemented?  

If you’re like most other designers, you slap together a bunch of code, make sure it works across multiple devices, that the code is clean, and then you set it up on a server for your client to take control.

This is a huge mistake, though, because real world usage research and feedback from visitors that are going to be navigating around the site on a regular basis is critical to not only make sure what you’re building actually works, but helping you learn and grow as a designer into the future.

Designers and clients aren’t the users of sites, so a truly functional design requires customer input and the use of tracking data to properly pull off.  Big brands do it, so why aren’t you?

The next time you’re putting a design together for a client, send some traffic to it and install a live chat box in the lower corner that pops up as a user scrolls.  Ask them directly for feedback on the usability of the site, and what they think could be improved.

Keep in mind, though, these are customers — not your fellow designers.  

You’re going to get all sorts of off-the-wall answers, but every now and then you will find a diamond in the rough that gives you a solid avenue to approach, in terms of improving the design, functionality, and usability.

It will also get you in the head of the visitors who use your designs every day, and get you out of the designer state of mind.

Branding and typography are more important than ever.

With flat designs allowing less design elements to help stand out, the overall branding strategy and typography are becoming more important.  Building a memorable design that’s still functional is a hurdle designers are trying to overcome in 2016.

Your branding includes quite a few different aspects, and is going to vary from client to client, and design to design.  

The colors that the client chooses, the type and style of logo they display front and center, the typography chosen, whether there are videos on the page, or if it’s a page selling products, everything pulls together to give the user an overall experience.

Taking it one step further, this branding experience is going to have to work with multiple different platforms, from social media, to display ads, and email marketing.  

That means it’s even tougher for you, as a designer, to give a consistent look and feel that’s going to work for your clients, for their customers, and be compatible on various platforms — not to mention devices.

Typography In Web Design

Source: Matcha Ocha

How to stay ahead of the design curve going into 2016, and beyond.

Some trends have come and gone, while others are going to be around for years to come.  If you want to step up your game as a designer, here’s the areas you need to be focusing on going into 2016:

  • Photoshop and image heavy designs are becoming a thing of the past.
  • Figure out how your visitors are spending their time on the site, then design around it.
  • Keep your content front, and center, and use it to funnel visitors where you want them to go.
  • Think about your touch-enabled visitors, because they’re becoming priority #1.
  • Incorporate customer feedback and research into your designs to increase user experience.
  • Use database driven card layouts, hero images, and rich animations to grab the visitor’s attention.
  • Get “micro-commitments” from your visitors to lead them closer to a sale down the road.
  • Flat, responsive designs aren’t going anywhere, anytime soon.
  • Both customer, and client feedback will help you grow as a designer going into 2016.
  • Branding and typography are more important than ever, and need to remain consistent.

If you’re ignoring any of these areas, you’re going to get left behind by the competition and the big brands who are spending millions of dollars every year on developing their websites.