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.
Make your visitors pay attention to your landing page!!!
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 toguide the eyes of your customers with directional cues.
In this post I’ll break this into 2 main categories:
- Suggestive Directional Cues: Abstract techniques that guide attention in a more subtle way.
- 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
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).
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
Position and color contrast are used here to move your eyetowards 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
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.
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
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
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 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.
6. ENCAPSULATION
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
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.
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 resistancethat 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).
– – –
WittyCookie is an award-winning digital agency that specializes in affordable web design, graphic design, and SEO solutions to help small businesses grow.
Service plans start at just $19/month, all-inclusive with web design, web hosting, email setup, ongoing maintenance, and unlimited updates. We charge no setup fee, no cancellation fee, and no term contracts with a full money back guarantee.
Visit wittycookie.com to get started.
WittyCookie 