7 Landing Page Tips and Tricks | Photo Composition Techniques

How to Create Good Landing Pages

Creating a good landing page UI is essential to grabbing the attention of your visitors in order to direct them to accomplish your intended conversion goal. As a result, it is important to understand what your conversion goal is and to therefore center the design of your landing page around that goal. There are many ways to watch and direct the attention of your users. One way to do this is by effectively choosing the most effective landing page images to use and applying different compositions in photography to persuade your audience to convert. Even thinking about photo composition can help with conversion! In this blog, we will discuss some techniques, tips, tricks to help you achieve the best landing page using photography and by applying good photo composition techniques.

Photo Composition Tips and Techniques for Landing Pages

By using proper photo composition techniques in your landing page layout and design, you can use the composition, spacing, and lines of your chosen image to direct and guide the eyes and awareness of your users. Here are some landing page tips and tricks on how to use and apply the best photo for the landing page of your website.

1. Whitespace

Whitespace, also referred to as “negative space” or “air space”, is the blank space surrounding the object of importance in the composition. The color of this blank space is not that important and doesn’t necessarily have to be white. When using imagery in your landing page, our tip is to make sure to give your call to action button enough breathing room with sufficient whitespace around the button in order to allow the CTA to stand out from the rest of the design. This compositional technique will help provide balance to the page while also allowing you to emphasize on important messages and calls to actions.

2. Color Tricks

Color can be used to create an emotional response from your visitors. When using colorful background images, choose the color of your image according to the mood and emotion you want to invoke in your website visitors. For example, the color orange is often associated with youth, liveliness, and fun, while grey and blue tones are more frequently used in finance and more suit and tie industries. 

On top of this, one way to use color to help users concentrate on your CTA is to use only one color and its variety of tones for your entire landing page design, and to use another color for your CTA. By using the correct color and design techniques, this will make your conversion button truly pop and jump out from the rest of your web design.

 3. Contrast

The more your call to action stands out from its surrounding environment, the more eye-catching and visible it will be. By using a photo composition that helps to contrast with the CTA to make it highly visible will consequently increase the chances of conversion. A CTA with contrast is more impactful than one that blends into the background. Our tip and trick is to make sure that you have a high enough contrast level between your CTA and your chosen image to effectively raise your conversion rate. 

4. Direction of Gaze

Another tip to think about is to concentrate on the direction of gaze in your photo composition. As humans, our innate response when we see someone looking at something is to follow their direction of gaze to see what’s happening. If the image you choose to use has an animal, human, or anything with eyes, you can use the direction of their gaze to direct your audience’s attention to the call to action. 

5. Encapsulation

Use the composition inside of your chosen photographs to give compositional direction to your web design. The trick is to have a form of encapsulation in the photo to help you frame the photo composition for your users, helping to create a tunnel vision effect. This forces viewers to pay attention to what is inside that encapsulation. You can use these dynamic shapes in the photographs of your website to contrast the gaze of users.

For example, as you can see in the image below, the archway forces you to pay attention to the view inside. It creates a frame for the scenery, preventing your eye from wandering elsewhere in the photo.

6. Arrows

Arrows are very clear and straightforward signs that are used to explicitly let people know what they should pay and give attention to. You can use arrows in your landing page and point to your CTA to create a very bold and frank website design – people for sure won’t miss it!

7. Vanishing Point

A vanishing point is the point where two receding parallel lines seem to converge and meet to create the effect that it eventually seems to disappear. These converging lines automatically draws our attention to the vanishing point, consequently making it a good place to put your CTA.

To get started on making the best landing page for your website, check out WittyCookie’s award-winning Web Design services!