Want to write a blog post for Unbounce? Send us your idea and you could be the next conversion hero.

Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages

Make your visitors pay attention to your landing page!!!
Make your visitors pay attention to your landing page!!!

I’m going to take a different approach to this post and use photography to illustrate some principles of design.

Understanding these fundamental concepts will help you grab your visitors attention and direct them to your intended conversion goal.

The most important element of any landing page is the conversion goal. Similarly, the most important aspect of your landing page design is to focus the visitor’s attention on that conversion area.

Using Photography to Illustrate Visual Techniques

There are multiple ways to catch the attention of your visitors; you can use bold, catchy, funny or controversial copy or beautiful typographic design, you can have a video to allow a multimedia experience, and you can use some fundamental principles of design to guide the eyes of your customers with directional cues.

In this post I’ll break this into 2 main categories:

  1. Suggestive Directional Cues: Abstract techniques that guide attention in a more subtle way.
  2. Explicit Directional Cues: The use of arrows and real-world indicators familiar to our learned behaviour.

Some of these principles can be utilized by using photography directly, and for the rest, the illustrative powers of a photograph should be all you need to understand the concept.

TIP: Click the photos for a closeup…


Suggestive Directional Cues

1. WHITESPACE

whitespace in visual design
In this example, the muted tones of the meadow drive your eye to the Pronghorn positioned in the corner.

Whitespace (or more correctly “blank space”) is an area of more or less nothing surrounding an area of importance. The reason I say blank space is that the color of the space isn’t important.

The purpose is to use simple spacial positioning to allow your Call To Action (CTA) to stand out from it’s surroundings and give your eye only one thing to focus on.

Landing page tip: Give your CTA or lead gen form some breathing room to allow it to stand out from the rest of your design.


2. COLOR

Color can be used to create an emotional response from your visitors. Orange for example is known to generate positive feelings and as such is a great choice for the color of your CTA. (You can also consider the positive affect of Green for go, and Blue as the classic click-me link colour).

Contrast using color
The color here is so extreme that you can\’t help but pay attention to it. This example also illustrates the contrast of color compared to the muted surrounding area.

Another important consideration is the contrasting effect of color. This idea borrows from the whitespace and contrast techniques described in points #1 and #3 in that it’s a method of “isolation via difference”.

In this first example, an “in your face” approach is used – the color is so overwhelming that you can’t help but stare at it – in this case often in disbelief as it’s a remarkable example of nature.

Landing page tip: Let your primary conversion target dominate the page.

Color and contrast
Color and contrast

Position and color contrast are used here to move your eye towards the grasshopper. The reason is that the entire shot is a single color except for the subject or interest.

Landing page tip: Use a single color (with a variety of tones) for your entire landing page – except for the CTA.

Make it jump off the page.


3. CONTRAST

You can't get much more contrasty than black and white.
I dare you to click on anything but the moon.

This is a fairly simple concept that applies across the color spectrum, but is most easily viewed in monochrome.

Landing page tip: The more you can make your Call To Action stand out from it’s surroundings the easier it will be to see. If you have a lot of black/grey text on a white background, then a black or white CTA won’t provide the desired contrast and you’d be better off with a colorful element. But if you have a very clean design without much detail or copy, a big black or white button can be dramatic.

contrast-lake
Attention is focused on the primary element rising from the lake, and a secondary feature (the bush) due to the contrast with their surroundings.

This is a more subtle example that shows how contrast can be used to highlight one or two key elements of a design.

Your eye is drawn to the Tufa formation rising from the lake, and then bounces down to the bush.

Landing page tip: Test using an impactful and contrasting photo as your hero shot, and mirror the palette choice and contrast levels on your CTA to draw a parallel and guide the visitor from the emotional element to the conversion goal.


4. THE SUGGESTIVE POWER OF THE EYE

As humans we’re all programmed to understand the purpose and use of eyes, and the meaning that comes with a stare/glance/look from the eyes of someone or something else.

Here the monkey\’s eyes and tilted head force you to stare at the Banana
You can\’t help but look down from the head of this Coyote
A subtle suggestion to follow the gaze of the Elk to the flock of birds
A subtle suggestion to follow the gaze of the Elk to the flock of birds

Imagine walking down a city street. There is a single person standing looking directly up in the air. Our innate curiosity requires that we follow their gaze to see what’s happening. Turn this into a crowd of people looking in a certain direction and we behave like sheep or lemmings, blindly (?) following the implied or perceived importance of the actions of others.

In the first example, the Capuchin is looking at the Banana as if were a hand in a game of cards. Curiosity is the motivation that forces you to follow his gaze.

With eye movement comes head movement. In this shot, you are not only curious about what could be in the grass, but you are forced to look downwards with the Coyote.

You’d want your conversion target to be where he (and everyone else) is looking.

In the 3rd example, the directional cue is much more subtle, but still very clear. Your attention is first driven to the Elk in the bottom-right corner (this would be your primary headline or Unique Selling Proposition).

You then follow his gaze to the left to see what he’s looking at – arriving at the flock of birds flying over the river – which would be your CTA.

Landing page tip: Use photography of people or animals on your landing page and have them stare directly at your CTA with either the angle of their head or their eyes (in a closeup).


5. INTERRUPTION (Surprise)

There’s a reason why banner blindness has helped click through rates plummet over the last few years.

Visual surprise
Visual surprise

People have become programmed to know where the advertising is positioned on your website, enabling them to switch off (or put on blinders like a racehorse) to concentrate on the content instead.

To prevent this you need to surprise people.

In the photo shown, the person (me) is so out of place in the photo of a desert slot canyon that it makes you question it’s purpose or reality.

Landing page tip: Go a bit punk and try something radical on your landing pages.

A slight rotation gives this button enough difference to catch your attention.
A slight rotation gives this button difference to catch your attention.

While you don’t necessarily need to have a naked man streaking across the page – you could try something as simple as taking your Call To Action button and rotating it by 30-45 degrees to create an unexpected design shape.

Here’s a look at a button I used when we first launched the Unbounce website. I purposely gave it a twist to spice things up and draw attention to it.


6. ENCAPSULATION

The river frames the central feature and traps your eyes inside
The river frames the central feature and traps your eyes inside

This is a classic technique used to hijack your visitors eyes and create a tunnel vision effect. You can think of it like creating a window on your landing page where your CTA is the view.

In the first example a strong dark line is created by the river which helps to hold your attention in the center of the frame.

The arch forces you to pay attention to the view inside it
The arch forces you to pay attention to the view inside it

In the second example, a circular arch creates a frame for the feature in the distance, preventing your eye from wandering elsewhere in the photo.

Landing page tip: Use strong dynamic shapes to constrain your points of interest.

Think of the classic James Bond intro sequence where you see him inside a circular design. (Examples here).


Explicit Directional Cues

The previous examples were all very suggestive and implied an interaction with your visitors. If you want to get a bit more instructive and literal, you can try using more explicit directional cues to point and lead the way.

7. ARROWS

Photo credit Missy Shana – MissyShana.com

As directional cues, arrows are about as subtle as a punch in the face – which is why they work so well. With so little time on your page, guiding the user to the checkout is a smart move.

Arrows let you say, “ignore everything else and pay attention to this please”.

The awesome example opposite shows 3 types of cue all at once. The arrow is a directional pointer, the man opposite is then firing you right back to the guy with the arrow using his eyes, and finally the upside-down text acts as an interruption that make you stop and stare (and most likely rotate your head to figure out what it says).

I used an arrow as a directional guide on the 101LandingPageTips.com site to move attention from the main product image and headline, down to the primary conversion area – the lead gen form.

Landing page tip: Call attention to your most important page elements by using strangely placed and angled arrows. Tie a sequence of arrows together to define a path for the visitor to follow, ending at your CTA.


8. PATHWAYS

The road leads your eye directly to the large rock Mesa at the top of the photo. Place your CTA here.
The road leads your eye directly to the large rock Mesa at the top of the photo. Place your CTA here.

Pathways are representations of real-world wayfinding avenues that trigger our brain into thinking we need to follow them. This example shows a long straight road, leading your eye to the large rock formation at the top of the photo. Roads are so strongly ingrained in our psyche as the path of least resistance that we naturally gravitate towards them as a transport guide.

Landing page tip: Design converging lines to draw people to your Call To Action. Triangles are the most dynamic of all shapes, and their natural tendency to point make them a special design tool (in the same way that an arrow is a more intricately designed pathway).


Note: All photos by Oli Gardner except #7 by Missy Shana.

Got Any More Examples?

Please comment if you find any other photos that illustrate either these or any other design principles.

And if you have sample landing pages that show them in action please share for everyone to learn from.

Cheers.

Oli Gardner


Build a High Converting Landing Page In Minutes

About Oli Gardner
Co-Founder of Unbounce. Oli has seen more landing pages than anyone on the planet. He is an opinionated writer and international speaker on Conversion Centered Design. You should follow Oli on Twitter
» More blog posts by

Comments:

  1. Chris Martin

    Lovely post. You could easily package this up and sell it as a wso. Really good ideas that make sense. Definitely bookmarking. Thanks…

    (1)
    Reply
  2. Andy

    Great post Oli – we recently went through a massive conversion program for a client and virtually all of the things you’ve mentioned were used. Even the simplest thing like a colour change on a button can have a huge difference.

    Your post describing conversion reasoning from a design perspective shows just why a marketing team ought to work directly with their designers.

    (1)
    Reply
  3. Carter

    Awesome post Oli. Color and compositional rules really apply well to landing pages — it’s a nice break from traditional interface design where you have multiple goals to design for. Landing Pages are not easy by any stretch, but easier to apply these rules.

    Color theory is an interesting topic with landing pages, especially when you’re already working with an existing brand and color palette. I’d be curious to hear about any successful AB Testing that has shown an increase in conversions just from changing some colors.

    (0)
    Reply
  4. Paras Chopra

    Amazing post, Oli! The amount of details, effort and magic that you put into each of your posts is simply unparalleled.

    (0)
    Reply
    • Oli Gardner

      Thank you Paras.

      Very kind words. I’m glad you’re enjoying what I’m writing – it makes it worthwhile.

      I hope your beta is rocking along!

      Cheers
      Oli

      (0)
      Reply
    • Adam Beaumont

      Agreed, I am testing these techniques out on a landing page of my own, I will let you know the results, hopefully I will an increase in conversions..

      (0)
      Reply
  5. Jereme

    Awesome post. Appreciate your insights. I can totally relate as an avid photographer myself, and aspiring to learn more about conversions. You shoot as good as you write!

    (0)
    Reply
    • Oli Gardner

      Thanks Jereme,

      Finally, someone commented on my photography! :)
      Not that I was at all self indulgent when writing this post…

      I do find though that applying other mediums or real-world examples can aid the learning process.

      Glad you liked the post.

      (0)
      Reply
  6. Jackie Lee

    Oli, another cool and insightful article. We are constantly featuring your posts internally on our internal yammer wall to educate our folks@clickTRUE.

    Keep up the good stuffs!

    (0)
    Reply
    • Oli Gardner

      Thanks Jackie,

      Your feedback is much appreciated, and good inspiration for me to crank out some more posts.

      I’ll be focusing more on this again once we launch in the coming days.

      Cheers
      Oli

      (0)
      Reply
  7. NetReach

    Yes, I agree with the comments below…great post! Explanation then tip.My background (WAAY back when) is fine arts, all of these kind of visual controls of the “canvas” are exactly what visual artists have used (Degas is a great example). Anyhow, it is interesting that often our clients want us to just link into their website to make sure that the PPC visitor “can get enough information” it ends up being a bit of an educational exercise (and I can see how it feels unintuitive).

    (0)
    Reply
  8. Oscar

    And you took those pictures too?! Wow!

    (0)
    Reply
  9. The 12-Step Landing Page Rehab Program [Infographic] | SmithTeam.com

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  10. The 12-Step Landing Page Rehab Program [Infographic]

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  11. The 12-Step Landing Page Rehab Program [Infographic] | SeoWhy

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  12. Finally… This Works » Blog Archive » The 12-Step Landing Page Rehab Program [Infographic]

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  13. The 12-Step Landing Page Rehab Program [Infographic] | TechNetSource

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  14. The 12-Step Landing Page Rehab Program [Infographic] | Google Seo Guide

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  15. The 12-Step Landing Page Rehab Program [Infographic] - Webular Technologies

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  16. The 12-Step Landing Page Rehab Program [Infographic] | Search Engine Daily

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  17. The 12-Step Landing Page Rehab Program [Infographic] | Best Traffic Tips

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  18. SMEDIAM – The Social Media Channel for Growing Your Business Online » The 12-Step Landing Page Rehab Program [Infographic]

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  19. The 12-Step Landing Page Rehab Program [Infographic] | digitalmarketingtalk.co.uk

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  20. The 12-Step Landing Page Rehab Program [Infographic] :: Seattle Internet Marketing Group

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  21. TG SEO » The 12-Step Landing Page Rehab Program [Infographic]

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  22. The 12-Step Landing Page Rehab Program [Infographic] | Mobil Seo

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  23. Webstandard-Blog

    Very nice and recommendable article Oli, thx for sharing!

    (0)
    Reply
  24. Your Landing Page Sucks! Here are 10 Examples That Don’t… | Unbounce

    […] of the following pages exhibits excellent qualities of conversion centered design, but most of them also do a couple of things […]

    Reply
  25. One man cured of HIV « My Blog

    […] edwards manchester vs arsenal health care ruling judge henry hudson Posted in Uncategorized | No Comments […]

    Reply
  26. sleapyy

    Nice post, Oli! I very appreciate your insight to “real life” ilustrations instead of “only website examples”.

    (0)
    Reply
  27. The Best PPC Blogs – The Definitive List of Pay-Per Click Blogs

    […] 8 Visual Design Techniques to Focus Your Attention on Your Landing Page […]

    Reply
  28. Will Quick

    Great post, Oli! One question: do you think it’s best to stick to one of these techniques per page, or to split test a lot of different ones on their own to see what works?

    (0)
    Reply
  29. Will Quick

    Sorry, that should say “do you think it’s best to use a combination of these on each landing page”

    – Will

    (0)
    Reply
    • Oli Gardner

      That’s a good questions. There are several that can/should be combined together:

      – whitespace
      – colour
      – contrast
      – directional cures (arrows)

      Encapsulation and interruption are fairly design dependent. And the power of the eye is only relevant if there are eyes present.

      As a starting point I’d stick to those first 4 that I just mentioned.

      (0)
      Reply
  30. Landing Page « Retail Mktg

    […] If I had to distill it down to two points, I’d say a headline that you can read in 5 seconds and know what the page and offer is about and a brutally obvious cal to action (CTA). For some inspiration when designing your page to convert – read Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. […]

    Reply
  31. CSSReX

    Amazing tips, Thanks a ton!

    (0)
    Reply
  32. 22 Creative Landing Page Designs – A Showcase, Critique, and Optimization Discussion | Unbounce

    […] These are some of the things I’ll be looking for along with the classic design techniques I referred to in “Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages“. […]

    Reply
  33. pril

    Great POST! thank you for sharing and it’s well thought out. This is great for people who aren’t that familiar with design, good guide.

    (0)
    Reply
  34. The 12-Step Landing Page Rehab Program [Infographic] | Unbounce

    […] For a more exhaustive study of the effects of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. […]

    Reply
  35. Nik Pasic (@nikpasic)

    Wow. Yet another brilliant article. I was aware of quite a few of these, but you’ve managed to explain and word them beautifully. This makes explaining the reasoning behind why I do some of the things I do so much easier. Thank you!

    (0)
    Reply
    • Oli Gardner

      Glad you liked it Nik! It was a fun one to write. It’s really interesting to think of the subliminal or unconscious persuasion devices that design can be used for when trying to improve conversion.

      (0)
      Reply
      • Justbeenpaid

        Hi Oli,
        Thank you for this great article!
        I loved it! it was really great looking into it. I really appreciate you dedication to this website and to your readers.
        Have a great week.
        Rick

        (0)
        Reply
  36. QuickThoughts – A place to think and share » Blog Archive » Will a Wink Make You Think? » QuickThoughts - A place to think and share

    […] Looking for more interesting observations on eye-gaze and online images? Check out Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages on Oli Gardner’s […]

    Reply
  37. 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate | Unbounce

    […] Use QR Codes for Better Conversion Rates 85 comments The Cat in The Hat Teaches SEO 43 comments Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages 38 […]

    Reply
  38. Il design e le conversioni | Web Marketing Blog

    […] tratto da “Design for conversion“, di Oli […]

    Reply
  39. Lauri Flaquer

    I’m amazed at this post. Yomar Lopez and I were just having a conversation about this last night.

    In fact, I was agonizing just yesterday about whether to use an image with a white or black background on my post. I kept going back and forth and eventually just chose the white one. To be honest, I whimped out! Now, after reading this, I think I may have made the wrong decision. My bad.

    Thank you for the terrific post and the breathtaking photos. I appreciate both and can’t wait to see what you have in store for us in the next post.

    (0)
    Reply
    • Oli Gardner

      Thanks Lauri. I wouldn’t worry too much about your image choice – you could always test the 2 variations. I would say though that it’s never a silver bullet. The first step in an optimization process is to try and understand your customers and what they would want and expect on the page – and to try and design something that helps them do that.

      Then create a new design based on the practices above – with the goal of persuading your visitors to convert.

      (0)
      Reply
  40. Design for Conversion, Adwords & Awareness, Retail Future Trends & Content in Social Networks

    […] Designing for Conversion –  Oli Gardner from the Unbounce team illustrate the visual design principals that encourage users to do things we want them to do. […]

    Reply
  41. Sheila Martin

    Hi Oli,

    Terrific post!

    BTW, it looks like you’ve lost one of your domains: http://101landingpagetips.com/

    … or perhaps the URL has a typo?

    (0)
    Reply
  42. 101 Landing Page Tips | Head Studios - sydney video production, corporate video production, and online video production company

    […] know wh&#1072t th&#1077&#1091 &#1072r&#1077 supposed t&#959 d&#959. Read th&#1110&#1109 post &#959ndesigning f&#959r conversion f&#959r &#1072n &#1110n-depth look &#1072t th&#1077 &#965&#1109&#1077 &#959f directional […]

    Reply
  43. Nestor Gonzalez Sainz

    Good job Oil! Useful.
    Interesting way of saying interesting things.

    (0)
    Reply
  44. Your Landing Page Sucks! Here are 10 Examples That Don’t… | Vevosi Marketing Blog

    […] of the following pages exhibits excellent qualities of conversion centered design, but most of them also do a couple of things […]

    Reply
  45. 10 Links im November 2011 | The Shop Analyst

    […] Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages […]

    Reply
  46. Mousumi

    Very good post with lot of techniques on focus of landing page design.

    (0)
    Reply
  47. Email click-throughs aren't as elusive as you may think | Emma Email Marketing Blog

    […] the button? (That has been shown to increase clicks.) It should be very obvious, and you should use visual design techniques to grab the attention of readers. Try different shapes, colors and sizes of your buttons. […]

    Reply
  48. centos vps

    Exceptional post however , I was wanting to know if you could write a litte more on this topic? I’d be very grateful if you could elaborate a little bit further. Bless you!

    (0)
    Reply
  49. 6 Unforgettable Blog Posts of 2011 (about blogging) | Better Blogging Ways

    […] 5. Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages […]

    Reply
  50. Mike

    Amazing post, Oli! The amount of details, effort and magic that you put into each of your posts is simply unparalleled.

    (0)
    Reply
  51. Will

    Only came across your website yesterday and I am finding the blog very useful! Some absolutely fantastic photographs to illustrate your point! great work

    (0)
    Reply
  52. Визуальные приемы, которые позволяют повысить конверсию | Блог экспериментов в интернет-маркетинге.

    […] [via] Tweet (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId="; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); VK.init({apiId: , onlyWidgets: true}); VK.Widgets.Like('vk_like_1382', {type: 'full', pageTitle: 'Визуальные приемы, которые позволяют повысить конверсию', pageUrl:'http://clevers.ru/?p=1382', verb: '0'}, 1382); Вы можете оставить комментарий, или Трекбэк с вашего сайта. […]

    Reply
  53. Semanticflow

    Some highly converting landing pages here : http://www.semanticlp.com/

    (0)
    Reply
  54. The Basics of Eye-Path Tracking in Designing a Good Landing Page User Experience | Unbounce

    […] can follow a completely different path as dictated by proper design. In a previous post, Oli covers 8 Visual Design Techniques that can be used to dictate eye path and improve landing page […]

    Reply
  55. What’s your conversion rate? | HelpAttack!

    […] visual techniques to influence action.  For example, what if the faces in images on your page are looking at the donate […]

    Reply
  56. Rockstar Landing Pages that Deserve a High-Five (or do they?) | Unbounce

    […] do find a stellar landing page, you may want to jump out of your seat and high-five it. It will be conversion-centric, trust-inspiring, energetic and straightforward all at […]

    Reply
  57. seo

    I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not 100% certain. Any recommendations or advice would be greatly appreciated. Cheers

    (0)
    Reply
  58. Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User Experiences « Local Search Engine Marketing Blog

    […] can follow a completely different path as dictated by proper design. In a previous post, Oli covers 8 Visual Design Techniques that can be used to dictate eye path and improve landing page […]

    Reply
  59. Sleep Dentists

    I agree. Focusing the attention on your landing pages is definitely a must. They are your conversion funnels.

    (0)
    Reply
  60. A/B Testing is no Leap of Faith: 29 Ways to Test Based on *Real* User Insight | Unbounce

    […] that draws the most attention may make the difference between a click through and a bounce. Use directional cues to point people in the right […]

    Reply
  61. Glitzerschrift

    Thank you for these amazing tips! Now i have to try them :)

    (0)
    Reply
  62. Your Call to Action is Lame! Here are 10 Ways to Make it Convert [Examples] | Unbounce

    […] You should also consult this post on Conversion Design Techniques. […]

    Reply
  63. 6 Ways To Make Your Emails Easier To Click Through to Generate Higher Readership. | Mayecreate Design

    […] the button? (That has been shown to increase clicks.) It should be very obvious, and you should use visual design techniques to grab the attention of readers. Try different shapes, colors and sizes of your buttons. […]

    Reply
  64. The 12-Step Landing Page Rehab Program [Infographic] | SEOmoz – H7inc

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  65. 35 Beautiful Landing Page Design Examples for You to Drool Over [With Critiques] | Unbounce

    […] conversion design rules to make your CTA stand out (whitespace, color, contrast, directional […]

    Reply
  66. Mousumi

    It is a very good post on landing page design visual impact to attention on landing page design.

    (0)
    Reply
  67. Mark

    Nice post on the very important design of call to action on the landing page, thanks!
    I found point 6 encapsulation a little hard to put into practice, will be nice to add a sample.

    (0)
    Reply
  68. IDD

    Thanks, i find the picture of the grasshopper especially illuminating on contrast.

    (0)
    Reply
  69. Conversion Rate Optimization Best Practices for Web Forms

    […] 8 Visual Design Techniques to Focus Attention on Your Landing Pages […]

    Reply
  70. Perry L Duff

    This is some AWESOME information! But how exactly do get started setting up a landing page, and from what external links, and how do I send them to my website, or straight to an affiliate offer?

    (0)
    Reply
  71. The 12-step landing page rehab program | VentureBeat

    […] can see an exhaustive study of the effects of directional cues in an earlier post I wrote that uses photography to illustrate each of the methods […]

    Reply
  72. The 12-step landing page rehab program | Share Blog

    […] can see an exhaustive study of the effects of directional cues in an earlier post I wrote that uses photography to illustrate each of the methods […]

    Reply
  73. The 12-step landing page rehab program

    […] can see an exhaustive study of the effects of directional cues in an earlier post I wrote that uses photography to illustrate each of the methods […]

    Reply
  74. | eSpotlite

    […] You should also consult this post on Conversion Design Techniques. […]

    Reply
  75. 35 Beautiful Landing Page Design Examples to Drool Over [With Critiques] « Local Search Engine Marketing Blog

    […] conversion design rules to make your CTA stand out (whitespace, color, contrast, directional […]

    Reply
  76. 50 Ways To Seduce Your Web Visitors With Persuasive Landing Pages

    […] Embrace white space. It will make your call to action stand out. When Skype simplified their landing page and increased white space, downloads increased by […]

    Reply
  77. 10 Stops to Take on the Road to Lead-Generating Landing Pages [INFOGRAPHIC] | The Worlds Tech Blog

    […] page. You can also make it stand out more and encourage greater conversions by using principles of conversion-centered design to draw attention to your […]

    Reply
  78. 10 Stops to Take on the Road to Lead-Generating Landing Pages [INFOGRAPHIC] | Complete SEO Marketing News

    […] page. You can also make it stand out more and encourage greater conversions by using principles of conversion-centered design to draw attention to your […]

    Reply
  79. 10 Stops to Take on the Road to Lead-Generating Landing Pages [INFOGRAPHIC] | Internet Marketing Denver | ReachLocal Denver | Social Media Denver

    […] page. You can also make it stand out more and encourage greater conversions by using principles of conversion-centered design to draw attention to your […]

    Reply
  80. 10 Stops to Take on the Road to Lead-Generating Landing Pages [INFOGRAPHIC] | Instant Pay Video Technology

    […] page. You can also make it stand out more and encourage greater conversions by using principles of conversion-centered design to draw attention to your […]

    Reply
  81. Step-by-Step Guide To Creating SEO Landing Page That Converts

    […] For more exhaustive study on the effects of directional cues for landing pages, read Oli’s Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages. […]

    Reply
  82. Fred

    Wow…what a great article! Absolutely loved the pictorials to illustrate the points too. Great work!

    (0)
    Reply
  83. maioni

    It is a post good… Thank you for share…

    (0)
    Reply
  84. 12-шаговая программа оздоровления посадочных страниц (инфографика) | Весь интернет в одном блоге

    […] указанные методы: Дизайн для конверсии – 8 визуальных дизайнерских приемов привлечения внимания на ваших посадочных […]

    Reply
  85. how to fix error 3194

    please tell me how you fix error.

    (0)
    Reply
  86. The unGlossary of A/B Testing: Terminology & Tips to Run Better Tests | Complete SEO Marketing News

    […] the big shiny button that you want to focus all the attention on. CTA Tip: Use the tips of conversion centered design to focus people’s attention on your CTA (or in the case of a form, the entire conversion […]

    Reply
  87. How To Create A High Converting Landing Page | Robert Salatino Design, Branding, Advertsing and Marketing

    […] CTA should use principles of conversion centered design to stand out from the rest of the page and leave no doubt about it’s purpose. Aside from the […]

    Reply
  88. 12-шаговая программа оздоровления посадочных страниц | Сайт для Интернет-торговцев

    […] указанные методы: Дизайн для конверсии – 8 визуальных дизайнерских приемов привлечения внимания на ваших посадочных […]

    Reply
  89. How To Create A High Converting Landing Page | MediaStreet News & Opinions

    […] CTA should use principles of conversion centered design to stand out from the rest of the page and leave no doubt about it’s purpose. Aside from the […]

    Reply
  90. Your Call To Action Is At Rest — SEO Company Singapore

    […] You should also consult this post on Conversion Design Techniques. […]

    Reply
  91. 10倍売れるECサイトを作れる!8つの心理効果に基づいた画像の使い方

    […] 本日は、Unbounce の “8 Visual Design Techniques to Focus Attention on Your Landing Pages“の、画像によって演出できる8つの心理的効果に注目して、WEBに最適な画像の使い方をご紹介する。 […]

    Reply
  92. Ryan

    What an amazing article! Thank you for explaining a lot of the concepts behind landing page design, rather than just giving a bunch of tips without identifying the reason it actually works. This industry truly is a complicated one, but I feel I have a much better fundamental understanding after reading this article.

    (0)
    Reply
  93. Is your donation form costing you money? (Part 1)

    […] step further by having the person in the image looking towards the donate button. This creates a directional queue in the visitors mind and causes them to look towards the donation button while they are feeling […]

    Reply
  94. Zorg voor relevante landing pagina’s | CS kennisbron

    […] The most important element of any landing page is the conversion goal. 8 Visual Design Techniques to Focus Attention on Your Landing Pages Bron: unbounce.com […]

    Reply
  95. 10 A/B Testing Lessons I Learned the Hard Way | The Hired Guns Blog

    […] have much to do with one another. Designers with conversion experience know that it’s function over form. Over the years, we’ve designed some beautiful pages that have lost a lot of money. This […]

    Reply
  96. Rob

    This is a great post and based on the feedback just goes to show how well landing pages can work within a website when used correctly.

    (0)
    Reply
  97. ram

    Landing Page quality is much more important and little bit of on page seo rules will help any site to get more customers

    (0)
    Reply
  98. 35 Beautiful Landing Page Design Examples – James Caldwell

    […] Use conversion design rules to make your CTA stand out (whitespace, color, contrast, directional cues) […]

    Reply
  99. krishna

    Great Post Oil. And nice photographs which could explain the essence and need for having a Landing page. Landing page design elements vary with respect to the purpose and nature of business. Read more from http://semlandingpages.com/blog/why-different-types-of-landing-pages/

    (0)
    Reply
  100. myntra discount coupon

    It’s really very difficult in this busy life to listen news on TV, therefore I just use web for that purpose, and take the most recent information.

    (0)
    Reply
  101. MDO Studio

    Excellent post. Every designer needs to pay attention to not only the position of elements in the page, but also how photography can enhance, help focus or detract from them as well.

    (0)
    Reply
  102. Top 3 Tips for Landing Pages that Convert • 7Boats • Tweaking Websites

    […] might end up being your best friend when designing a page that increases conversions. Experts at Unbounce.com suggest, “The purpose is to use simple special positioning to allow your Call To Action (CTA) to […]

    Reply
  103. 101 правило оптимизации интернет магазина | Юрий Кольцов

    […] они поймут, что делать дальше. Прочитайте статью об увеличении конверсии с помощью качественного дизайна и изучите подробности использования […]

    Reply
  104. HeatherMBA

    Am happy that my new site incorporates so many of your recommendations! Thank you for insights that make sense. Helps that the lead partner doc understands the importance of color, design, space . . and the importance of a strong site; visually, content, and function. I think I may need more work on my CTA next round of maintenance though . .

    (0)
    Reply
  105. Landing Page: i 12 consigli per migliorare la conversion rate – pt2 | MarketingArena

    […] icone, come frecce o linee, pos­sono essere uti­liz­zate per pun­tare l’attenzione del visi­ta­tore verso alcune finestre/oggetti. Ma è pos­si­bile foca­liz­zare l’attenzione anche in modo […]

    Reply
  106. » Landing Page: i 12 consigli per migliorare la conversion rate — pt2 - AWD SeoWeb

    […] icone, come frecce o linee, possono essere utilizzate per puntare l’attenzione del visitatore verso alcune finestre/oggetti. Ma è possibile focalizzare l’attenzione anche in modo implicito, […]

    Reply
  107. 【转载】The 12-Step Landing Page Rehab Program [Infographic] | 点石成金

    […] of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages.Doctors Orders: Learn to point. It might be considered rude in some cultures, but in […]

    Reply
  108. How Design Impacts Blog Readership | Articulous.net

    […] and illustrations as a way to quickly get the gist of a story without investing too much effort. Effective images therefore leverage white space, contrast, color, interruption and other techniques to intrigue and […]

    Reply
  109. How Design Impacts Blog Readership | Best Part Time Job

    […] and illustrations as a approach to fast get a crux of a story though investing too many effort. Effective images therefore precedence white space, contrast, color, stop and other techniques to amour and pull a […]

    Reply
  110. How Design Impacts Blog Readership | MarketingTumbler.com

    […] and illustrations as a way to quickly get the gist of a story without investing too much effort. Effective images therefore leverage white space, contrast, color, interruption and other techniques to intrigue and […]

    Reply
  111. Landing Page Design: Rules Of Thumb Your Boss Expects You To Know | latestbiznews

    […] 8 Visual Design Techniques to Focus Attention on Your Landing Pages […]

    Reply
  112. How Design Impacts Blog Readership | MBA and Business School Online

    […] and illustrations as a way to quickly get the gist of a story without investing too much effort. Effective images therefore leverage white space, contrast, color, interruption and other techniques to intrigue and […]

    Reply
  113. How Design Impacts Blog Readership - How To Make Money Online

    […] and illustrations as a way to quickly get the gist of a story without investing too much effort. Effective images therefore leverage white space, contrast, color, interruption and other techniques to intrigue and […]

    Reply
  114. Tips on Creating Military Discount Landing Pages - Official ID.me Blog

    […] has great tips on how to use color and the power of a reader’s eye for suggestive directional cues and outright explicit directional cues to highlight your […]

    Reply
  115. Making your website flow meet your conversion needs

    […] the same rules as photographic composition, you should isolate the areas that you want to call attention to . To allow the eye to focus on a […]

    Reply
Comments