Monday, January 23, 2017

10 Quick Tips to tighten your Landing Page design

I’m proud to say One Page Love features over 6k websites now. To add more value I write a micro-review with feedback on each website featured.

Unfortunately, with the continuous push to increase quality, not all submissions get in. These 10 tips below form the most common feedback I give users to help improve their Landing Page design.

What (exactly) is a Landing Page?

Before we begin, let’s define a few things…

A Landing Page aims to provide the perfect (read minimum) amount of information for a user to make a decision and act upon it. This website page is often seen as a standalone long-scrolling One Page website and has no additional pages (like about, services, contact).

The purpose of a Landing Page is to encourage user interaction (sign up, download or sale) without the user clicking to other pages. This successful interaction is also known as a conversion.

This article can be your checklist to communicate in the clearest way possible, cut through clutter and in-turn, increase those sweet sweet conversions.

eBook Format

Buy the eBook

If you really enjoy the article and want to support – I’ve added all these tips into a neat eBook (pay what you want) in PDF and ePub (iBooks) format.

I also threw in a couple bonus tips on “Deconstructing your About paragraph” and “Understanding Storytelling in Landing Pages”. At the back is a printable 20-point ‘Design Checklist’ to ensure your Landing Page is watertight.

The bulk of the eBook is all below but the contribution helps keep One Page Love ad free:)

Hope you find value in the article!

Much love,
Rob

ps. the awesome cover illustration is by Karolis Strautniekas

“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.” ~ Hans Hofman

Tip 1 – Keep brand capitalization consistent

So often overlooked, inconsistencies in your brand name affects first impression and can even create confusion. Here are the possible variations I’ve seen using “One Page Love”:

  • One Page Love (correct)
  • Onepagelove
  • ONEPAGELOVE
  • onepagelove
  • one page love
  • One-Page Love
  • Onepage Love

Here are some popular ones:

  • WordPress (1 word, 2 capital letters)
  • MailChimp (1 word, 2 capital letters)
  • Stack Overflow (2 words)
  • Facebook (1 word)

Avoid ALL CAPS if you can but choose one and stick with it.

Tip: Visit your live Landing Page, use your browser in-page search and try find all possible variations of your brand name.

Tip 2 – Don’t neglect Retina optimization

If anything, you absolutely must have a Retina-optimized logo. A “pixelated” logo affects first impressions like you won’t believe.

This basically means your logo needs to be double the size on Retina screens or must be in Vector format ie. SVG

Note the “pixelated” logo on the left and crisp Retina-optimized logo to the right:

Retina Logo Comparison

Next on priority list would be app or website screenshots, the crisper the better first impression:

Retina App Comparison

Lastly is your big imagery:

Retina Big Image Comparison

Tip: Use ImageOptim for optimizing bigger, rich color images. It’s debatable what the ideal page load size is, but optimizing everything is always good practice.

Useful links:

Tip 3 – More padding and then some

The majority of users are going to skim your content. If you bundle everything together they are going to skim even more.

81 percent of people only skim the content they read online. Usability expert Jakob Nielsen reports the average user reads at most 20 to 28 percent of words during an average visit. (source)

Whitespace is often technically referred to as negative space. But it’s really the breathing room for your content and also for the user. This slows them down and increases focus.

The Brenner Cycles websites features gorgeous breathing room

We talk about “graceful downgrading” of padding from desktop to mobile (eg. 40px desktop, 20px mobile) but what about “graceful upgrading” to huge monitors? What a delight it is to see optimization with generous padding (along with bigger fonts) on larger resolutions:

Graceful Upgrading

Tip: If you’re questioning if you should increase padding, you should probably double it.

Tip: Increase padding but still stick to a grid.

Tip: Reverse engineer your padding allowances by working around the perfect line length (characters per line) based on your font size.

Useful links:

Tip 4 – Consistent vertical spacing

So we covered grids (commonly used for horizontal padding) but we often overlook vertical spacing in a Landing Page.

It can get pretty technical with things like Vertical Rhythms and Baseline Grids but what about consistent section spacing and padding between elements?

Here is a classic long-scrolling Landing Page I threw together with “sections” of content:

Now note the consistency in vertical spacing and secondly how the smaller gaps are half the ratio of the bigger gaps:

Tip: Keep spacing within consistent ratios. Example: if we set 50px button, then set section title bottom margins also at 50px and section diver spacing at 100px. Consistency is key.

Useful links:

Tip 5 – Less images, better images

It can take one good image to completely change the emotion of your user. Unfortunately, same goes for one bad image.

 “Simplicity means the achievement of maximum effect with minimum means.” ~ Dr. Koichi Kawanaite

Good imagery builds trust. Trust leads to conversions.

Spend the money. Get a photoshoot of your team, your product, your food. The ROI on a photoshoot is always guaranteed.

The Dona Rita website features only 4 quality images that completely capture her product and brand.

Tip: Once you have a good selection, ask yourself if each image truly captures your story or compliments your brand. Eliminate everything non-essential.

Useful links:

Tip 6 – Less fonts, more weights

Different weights within one font family can really strengthen the heading and paragraph arrangement.

This paired with quality text contrast (next up) will create a beautiful reading experience for your user.

Tip: Try stick with two font families (maximum three) in your Landing Page.

Useful links:

Tip 7 – More text color contrast

Never have pure black (#000000) text on a pure white (#FFFFFF) page background. Soften the blow with an off-white background and a grey text hierarchy. Example:

  • #f8f8f8 background
  • #111111 main headings
  • #222222 sub headings
  • #444444 paragraph body copy
  • #666666 block quotes

Illustrated to the right:

Same goes for pure white on pure black. The contrast is too high. Note the softer color scheme with a dark grey hierarchy to the right:

Tip: Experiment with completely different color palettes within your Landing Page. Start by taking your main brand colors then creating a softer hierarchy of colors.

A quality color scheme is instantly remarkable and can strengthen your branding.

Useful links:

Tip 8 – Make sure your Call-To-Action button is an Ace-drawing Maverick

Not crazy Mel Gibson but more classic, winning Gibson.

Try softer pastel colors for backgrounds then use a Maverick (stand out) color like orange, red, green or blue for your call-to-action buttons.

Keep your call-to-action button style consistent. It will remind your user what you want them to do as they scroll.

Call To Action reference

The ‘Pattern by Etsy’ Landing Page features the same color and styled buttons but they change the wording to correlate with the section copy.

Oak by Absolut Landing Page

The ‘Oak by Absolut’ Landing Page features strong call-to-action buttons as they match the brand color.

Tip: Make sure the first call-to-action button is above the fold.

Useful links:

Tip 9 – Polish with Text Kerning and Font Smoothing

It’s incredible how the smallest kerning tweaks can transform a Landing Page design. This example shows subtle kerning in the headings only:

Tip: Different font families act differently, some will need more kerning, some will need none.

By adding just a few lines of CSS code you can really polish a Landing Page design. Here is the code I use on most of my projects:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "liga" on;
}

The difference is seen below:

Font Smoothing Reference

Both are taken off the same Mac device. The right having the additional Font Smoothing CSS styles.

Useful Links:

Tip 10 – Declutter throughout

Earlier we cut down on images but why stop there. We are not trying to convince the user with as much as possible, it’s as little as possible.

“One does not accumulate but eliminate. It is not daily increase but daily decrease. The height of cultivation always runs to simplicity.” ~ Bruce Lee

Get in the mindset that every piece of content needs to contribute or it must go:

  • 2 brilliant testimonials – not 8 average ones.
  • 2 highlighted power features, with 4 smaller features below – not a grid of 12.
  • Your 8 best wedding photographs – not the past 4 years of work.
Launchday Landing Page

Launchday started gathering email address simply with a minimal Landing Page containing intro copy and a demo video. Note the beautiful Maverick call-to-action button too.

Tip: Kill those social share icons, especially the embedded ones. If they are essential, hard code them.

Tip: Replace, don’t add. When you get new testimonials or images, try replace the old ones.

Bonus Tip: Make it remarkable with love

When something is remarkable it sits in the easy-access area of the brain. This is what triggers word-of-mouth, your free form of advertising.

remarkable (adjective): worthy of attention; striking.

Make the user feel you actually give a fuck. Show you care by adding love:

  • Style the default UI in 3rd party scripts like Lightbox (more)
  • Add subtle CSS load transitions and fades (more)
  • Add personality with an emoji ( 🌵 )
  • Add a custom preloader animation (more)
  • Highlight the menu item matching the current page section (more)
  • Add an x-factor (more)
  • Spend time on your website footer (more)
  • Give away something of value

Conversely, show you care by removing:

  • Misspellings
  • Pop-ups
  • Scrolljacking
  • Lies
  • Verbosity
  • Jargon
  • Clutter

You love your product, you’re proud of it.

Much so you spent a huge amount of time and energy nurturing it’s Landing Page.

Further Resources

Enjoyed the article?

Buy the eBook

If you really enjoy the article and want to support – I’ve added all these tips into a neat eBook (pay what you want) in PDF and ePub (iBooks) format.

I also threw in a couple bonus tips on “Deconstructing your About paragraph” and “Understanding Storytelling in Landing Pages”. At the back is a printable 20-point ‘Design Checklist’ to ensure your Landing Page is watertight.

Thanks for reading!

Please pass it on to friends if you think it will help them:
http://ift.tt/2jgUjyu


by Rob Hope via One Page Love
Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)