CHICAGO318 W. Adams, Suite 1600Chicago, IL 60606312.585.7649
KANSAS CITY4600 W. 51st Street, Suite 300Roeland Park, KS 66205816.868.8320
October 30, 2021
Everyone knows that images are a powerful part of both inbound and outbound marketing. Including storytelling images into your blog layout can catch the eye, illustrate a point, and help readers to visualize the content.
Some images show the content directly, some model a similar activity. At the most basic level, images enhance our mental perception of the page.
Images and storytelling for your brand are essential. This is especially true in the visual impact of your blog pages.
Images break up the content and make subheaders more meaningful. Images give the page layout shape and personality.
Choosing the right collection is only the beginning. How you display your on-topic images on each content page will shape how your readers perceive your content, site, and even your brand personality.
Today, we’re highlighting eleven of the leading methods for integrating photos and storytelling into a website blog and content page layout. Let’s dive right in.
By far the most common and expected use of content imagery is the leading banner. Some blogs have one banner that is universal across the top of every page. Others have a unique – often shaded and titled – banner for each page topic. Some cleverly group their pillar and sub-pages visually with the same header for each greater topic.
The leading banner or header image sets the tone for the entire page. You can choose to have it take up the entire over-the-fold space or roll it back to the top bar depending on the style of your website design.
Integrating images alongside your content, there are two method approaches.
The first is column images. When placing the image, the text is pushed to the side and does not wrap into the image column. Tall images and stacks of images are best when using the column method. The second option is more common; embedded images.
Images embedded in your content. In this layout style, the text does wrap the images. This can give your page a dynamic look and highlight images that speak directly to the text. The width of your margins will determine how clean or cramped your page looks with embedded images.
When you choose column or embedded style, keep this consistent for the majority of your content pages to maintain a consistent layout style.
Think carefully about the color schemes in the images you choose. Not only should the subject of the images relate to the content, but the images should also look good with the color scheme of your website design.
For example, you might prefer images with eye-catching blues or with a hazy gray hue.
Example: Nectafy‘s powerful plant-based motif
One option is to use filters to make certain colors pop or a shaded panel to cast the entire image into the website’s colors.
Some uses – like backgrounds and title images – are well-suited to a shading panel. The thing to remember is that shading and recoloring your images can obscure the detail. This can be a good result or a poor one depending on your intent.
One option is to create an image column along the left hand side of your content. This is a bold choice done best with narrow, vertical images. Slice and size your images to fit the column and give your content a unique look.
While not many blogs choose the left hand column style, you have the option of standing out with a clean, wide-margined look that also allows you detailed illustration and layout style for your content.
The left hand column style favors brands that often feature vertical images – whether these images are models in the latest fashions or progressive style infographics.
One of the most common and readable image layouts is to centralize your images between paragraphs of text. This is often used to give the content a sense of progress and allows the author to illustrate their point.
Images are often centrally used between paragraphs in instructional pieces with one image per step of the instruction.
Interspersed images are excellent for providing scenery and setting for the content or for displaying a visual for what is being described.
This style is common because it is almost universally applicable. The centralized image spacer method works best when your images are part of the storytelling, taking their natural place in line with the written content.
If you want a column or embedded images periodically through the text, the most recognized method is to line up squared or clipped rectangular images along the right-hand side.
Because we as a society read left-to-right, it’s natural to see the images on the right-hand side.
We scan across the words gathering meaning and then see that meaning illustrated in an immersive visual at each line scan. Images to the right cover multiple lines, so you can align one image with each section of text.
How you space your righthand images will depend on how you want to present your visual information.
You may space the images evenly, match them to every section, or go with a distinctly uneven distribution to match the images directly to specific text.
An entirely different approach to images in your content is to make the image the central content itself.
Infographics are the best example of this – where the image is a unique and detailed illustration of the points you’d like to make.
Many people learn and remember information better when they see it visually represented. We’ve learned this goes beyond just seeing a chart or graph – an entire visual presentation as is designed into infographics actually helps visual-thinkers absorb information more effectively.
This is why many brands are putting their images front and center. You may also choose to write paragraphs to explain the infographic (for reading-based learners and SEO crawlers) but the images themselves are center stage.
Another version of this method is an image gallery. Photographers and news sites sometimes make an entire content page that consists primarily of a collection of photographs or possibly artistic prints likewise, the imagery takes the place of the content though you may add text as captions, explanations, or to detail the story shown in your photographs.
How-To sites have recently taken a page from student textbooks with information spotlight panels.
Consider the visual power of a shaded box with rounded corners in the middle of your content page. This box contains a snippet of useful bonus information and an image that illustrates the point.
In a how-to blog, it might be a spotlight on how to handle a small component with a close-up image. But your content can spotlight any information that should stand out to readers.
Use the container panel method to highlight your most important points, most useful tips, or most interesting facts that come accompanied by an image. The image brings your spotlighted information to life and pulls it into the real world for visual thinkers.
Another option is to go parallax. When scrolling down the content, a parallax web design scrolls the image behind at a different speed – like how street signs and buildings go by at different speeds when you’re driving in the car.
This different-speed effect is known as parallax. It gives the user the feeling of movement and of page depth – something behind something else – without using complex graphical features.
Example: The immersive Story of the Goonies website
The most common type of parallax involves one stationary image in the back that other content scrolls over. Classic parallax is when the background image scrolls very slowly while the top content scrolls at the usual pace.
The more advanced option is to use layered or multi-image parallax that is scrolled through at an uneven but depth-creating pace from the content scroll. This is most often used for multi-section parallax.
A classic variation is to split your page down the center. This works best for content sections, where one page-fold is equal to one or two sections of text and images.
Half-and-half means half your page or content area is an image that shares space with a block of text. This is a spacious and stylish way to pair images with text.
If you’re writing on a catalog of goods, a gallery of photos, or a step-by-step how-to, the half image method is eye-catching. Consider alternating whether the image occupies the left or right half if you have a row of half-and-half image content.
Last but not least, remember to use eye-catching images to inspire further reading.
At the bottom (and along the side) of every content page, you should have teasers with related titles and tempting images.
In the lower section below each blog, you can use a grid of images, each paired with a title, to lure readers into clicking another page and enjoying another article.
Example: Most news sites, including every CNN online article.
—
Are you ready to up your website’s use of photographic layouts to enhance your storytelling impact? So are we! Contact us today to perfect your brand’s imagery, videos, and presentation both on-site and throughout your social media campaigns.