Words and pictures should be the best of friends
when a page contains images and words that fight, much of the power of both is lost. Getting them to work together isn’t so much a nicety as a requirement for good web copy.
odern web copy suffers from an embarrassment of options when it comes to making your pages stand out. Words, images, and video can all sit together on a page and provide much more as a whole than they would alone. Since the first newspapers, getting words and images to sit well together on the page has been recognized as important. Fast forward to today, and specifically digital web copy, and the aim is still the same; to expound on your message. This means that selecting the best image is only part of getting it right. The image composition, location on the page, supporting colours and theme of the picture all have a big impact on how the image will sit on the page. How can you help your images mix well with your text when it comes to digital pages?
Be sympathetic to the feeling of your article
Your article will have a style and tone, a vibe if you will. The images you select should match this overall feeling. Let’s take this article, the one you’re reading right now. It’s fairly friendly and laid back; informational and helpful in tone. I’ve tried to select an image, left, that works well, while also illustrating the point that I’m trying to catch a feeling. The image I’ve selected is fairly warm. It features some of the elements I want to project, namely digital, helpful and friendly. I’ve captioned it to explain why it’s there. Since I’m using this photo to make a point it also adds to the overall understanding of the reader. We’ll talk about placement later, but suffice to say I wanted to make this image feel part of the text. To this end, I added it so that the text flows around it rather than placing it separately to the text. It’s unobtrusive but still serves its purpose.
Don’t pick images that go against to vibe of the article. For example, if your piece is uplifting and inspirational don’t bring the reader down with dark and heavy imagery. Are you making serious and thrusting points in a heavy-hitting article? Then flippant imagery is out. Let me give you a great example of where things didn’t work out, it’s a little old now, from 2015. Brenda Barron pointed out in her article on bad web design the page from the US House of Representatives Judiciary Committee – titled “At the Flick of a Switch” – which utterly did the digital equivalent of faceplanting.
It’s a serious site, dealing with political issues. They just plastered the page with utterly disjointed meme-style images from films and well-known gifs of the time. Honestly, it’s one of the strangest design decisions I’ve seen in a long time and I can’t imagine what was going through the head of the person (or people) who did it. The page is dead now, but let’s hope lessons were learned. It earned some scathing attacks and generally made them a bit of a laughing stock.
Image placement; getting images and words to play nicely together.
Consider what part images and text will play in your article. The part of the webpage that people can see without scrolling, called the fold, is the most important real estate you have when designing a page or post. Filling it with content that doesn’t grab the reader quickly can mean your carefully crafted article is ignored and has a high bounce rate. Images have some big advantages over text, they draw attention, trigger emotions, and frankly, they are a more preferred medium. However, not all information can be disseminated with images alone. How then to select what to put above the fold? One option is to use a header image like I’ve done in this article, that places text over an image. You get the best of both worlds and create an attractive start to the page to boot. You can put your cunningly crafted headline and impart some punch with a striking image.
As you move into the body of the article it becomes more about the abilities and looks of your site layout and blog post format. Without getting too deep into the elements of general page design, just remember some key points about layout ;
- People skim read web content.
Don’t expect people to stick with large blocks of text. Use images to break things up and provide a little light relief.
- It’s harder to read on screen than in print
Escape the trap of reader exhaustion by showing your point rather than telling. If you can provide an example with a picture, do it.
- Like you edit your words, edit your images.
As you’re creating your page or post you’ll add and remove images and change their layout. When doing your final edit, check the images still work alongside the text.
- Tell a story with your images.
Try to create a flow using the images. Pick a consistent theme or style to the pictures and link them together using text.
- Don’t be scared of white space.
Don’t be tempted to place loads of images and text close together, they’ll crowd each other out. It’s far better to have some white space and allow the page, and the reader, to breathe.
While it can take a long time to source great images that will bring your page to life, it’s worth the time you spend. Getting your content in front of the right eyes can be tricky and the last thing you want when they do arrive is for them to leave because they didn’t like the way the page looked. Getting text and images to work together will make those same visitors love your work and bring in those all-important shares, likes and engagement.