How To Mix Photography And Text On Your New Website

On a website, text and images are like cupcakes and frosting – they are so much better together! Much like baking, mixing photography and text on your website is a special art. You can combine the ingredients in many ways to highlight each part and heighten the overall experience.

Mixing photography and text is one of the most important parts of graphic design. This is because you can’t just combine any text with any image. There are guidelines to follow if you want to keep your visitors, both when overlaying text on a photo and when putting the elements side-by-side. Good web design is more than the sum of its parts!

Why Is Mixing Photography And Text So Important?

The proper mix of text and photos will make visitors to your new website eager to find out more. It could be a header image, the background, or an infographic – a well-chosen shot with text always creates a positive response. It’s a quick and easy way of telling a small story that fits within your branding narrative.

It also adds a personal touch in a way that humanizes your business. If you’re in a more serious industry like accounting or mechanic work, a well-selected mix of text and pictures can add a personal perspective to your business.

Using Text On Top Of An Image

Putting text on top of images is fun because you can arrange the elements in any number of ways. But it can also be frustrating; have you ever played around with text on Instagram Stories and found that none of the colours looked perfectly visible on your photo? Being unable to see the letterforms is aggravating, but this challenge highlights the importance of contrast between the photo and text. 

The first step is choosing the right font and photograph to catch the eye. You can make these elements stand out by choosing the right colour, filter, text size, and position. Once the photo grabs their attention, the visitor’s eyes should go to your message and make a positive association. One way is to position the text in an area of lower focus, choosing a font colour that contrasts with the primary colour of this part of the photo.

Using a darker image with lighter text or darkening the image with a filter or overlay element can create enough contrast so that the text doesn’t get lost. This doesn’t mean only light vs. dark; when colours complement each other, they provide a natural contrast. Use a filter or editing software to manipulate the contrast and brightness in a way that enhances your message!

Make A Statement With Text Size And Positioning

Overlaying isn’t always the right design decision, because sometimes each element should be independent. In these cases, we can make the most out of size and positioning to accentuate the connections between text and photo. 

Whether you’re taking the photo yourself or finding one that’s free to use in your design, choose an image that will heighten the story told by your text and send a message in its own right. Many web designers use a large picture or series of pictures in the header to grab attention, and a new visitor to your website should comprehend what is happening in that image in the blink of an eye. After all, a picture is worth a thousand words!

The next step will be to place a sentence or paragraph in a spot that complements the photo when your audience looks for more information. Align the words so they fit right in with the layout of the image, letting the eye flow from photo to text in a natural way. If there isn’t any natural flow, the visitor can lose visual interest quickly and move on from your site.

Remember that your text is only as good as the image it complements, and vice-versa! We always consider how these two parts work together when designing a site. If the text is too small, the background too busy, or it guides their eyes in the wrong direction, your website won’t be visually appealing. Everything should relate to one another in a way that brings out the best of your small business message. Even if you’re someone who likes licking frosting off a spoon, there’s nothing more satisfying than the complete cupcake!