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

By | Google+ , August 24th, 2012 in Landing Pages | 122 comments
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


About The Author

Photo of 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. Carter says:

    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.

  2. Paras Chopra says:

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

    • Oli Gardner says:

      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

    • 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..

  3. Jereme says:

    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!

    • Oli Gardner says:

      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.

  4. Jackie Lee says:

    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!

    • Oli Gardner says:

      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

  5. NetReach says:

    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).

  6. Oscar says:

    And you took those pictures too?! Wow!

  7. […] 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 […]

  8. […] 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 […]

  9. […] 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 […]

  10. […] 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 […]

  11. […] 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 […]

  12. […] 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 […]

  13. […] 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 […]

  14. […] 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 […]

  15. […] 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 […]

  16. […] 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 […]

  17. […] 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 […]

  18. […] 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 […]

  19. […] 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 […]

  20. […] 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 […]

  21. Very nice and recommendable article Oli, thx for sharing!

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

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

  24. sleapyy says:

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

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

  26. Will Quick says:

    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?

  27. Will Quick says:

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

    – Will

    • Oli Gardner says:

      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.

  28. […] 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. […]

  29. CSSReX says:

    Amazing tips, Thanks a ton!

  30. […] 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“. […]

  31. pril says:

    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.

  32. […] 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. […]

  33. 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!

    • Oli Gardner says:

      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.

      • Justbeenpaid says:

        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

  34. […] 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 […]

  35. […] 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 […]

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

  37. Chris Martin says:

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

  38. Andy says:

    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.

  39. 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.

    • Oli Gardner says:

      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.

  40. […] 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. […]

  41. 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?

  42. […] 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 […]

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

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

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

  46. Mousumi says:

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

  47. […] 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. […]

  48. centos vps says:

    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!

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

  50. Mike says:

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

  51. Will says:

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

  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); Вы можете оставить комментарий, или Трекбэк с вашего сайта. […]

  53. Semanticflow says:

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

  54. […] 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 […]

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

  56. […] 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 […]

  57. seo says:

    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

  58. […] 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 […]

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

  60. […] 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 […]

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

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

  63. […] 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. […]

  64. […] 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 […]

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

  66. Mousumi says:

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

  67. Mark says:

    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.

  68. IDD says:

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

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

  70. Perry L Duff says:

    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?

  71. […] 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 […]

  72. […] 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 […]

  73. […] 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 […]

  74. | eSpotlite says:

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

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

  76. […] 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 […]

  77. […] 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 […]

  78. […] 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 […]

  79. […] 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 […]

  80. […] 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 […]

  81. […] 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. […]

  82. Fred says:

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

  83. maioni says:

    It is a post good… Thank you for share…

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

  85. please tell me how you fix error.

  86. […] 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 […]

  87. […] 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 […]

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

  89. […] 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 […]

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

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

  92. Ryan says:

    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.

  93. […] 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 […]

  94. […] 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 […]

  95. […] 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 […]

  96. Rob says:

    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.

  97. ram says:

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

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

  99. krishna says:

    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/

  100. 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.

  101. MDO Studio says:

    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.

  102. […] 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 […]

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

  104. HeatherMBA says:

    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 . .

  105. […] 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 […]

  106. […] 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, […]

  107. […] 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 […]

x
Get actionable optimization tips delivered straight to your inbox.

You'll learn:

  • What it takes to build successful marketing campaigns
  • Why your landing page design and copy might be working against you
  • How to increase conversions while delighting leads and customers