Design superiority effect occurs when you combine text and visuals together to enhance audience retention of your message. Although not every visual needs to utilize text, text, especially, in stand-alone presentations can enhance a slide, add value to the cohesive look and communicate a more impacting message. The pattern of blending text with images or text on top of background images can provide contextually rich and emotionally engaging experience.
Few years back, web designers had the constraints of using smaller images because of bandwidth issues, however, with the advent of new technologies, connection speeds and screen densities have rapidly improved, and now they’re much more opened to use larger images along with texts.
Design decision associated with this method is important to consider, and therefore, developing best practices to govern this technique is imperative to produce high-quality design. To prevent images being lost or text becomes muddled, or both, let the words state and images express properly. Let us find out how text and images can be harmonized to balance the readability of both.
Balancing contrast by color and brightness
Using images that have significant contrast with text or vice versa is important. For instance, darkening images with filters or using darker images with lighter text, or overlay elements can be effective ways to utilize contrast in your design. To achieve the perfect balance of color and brightness, following are some of the important tips to remember
Try the visual flow
The visual flow of an image is an important part when it comes to working with text and images. Here are a few steps to follow while working with visual flow
The above example is a typical bad example for placing text over image.
The text finds its ideal space in the above example.
Balance contrast through positioning and sizing
If you want to improve the contrast of an image in relation to a text, adjusting the color is not the only thing that can help. The right size and position of the text with relation to the focused elements of the image is important. This is essential for better readability of text. For instance, if your image comprised of a large sky, where you have adequate area to place the text, a much readable position of the text would be obviously in the sky rather than in the center of the image where the skyline appears.
Use of color cast
Using color casting is an effective way for images to allow for text placement. Color cast enable you to opt for color that has high visual interest. This is used to balance the overlay color transparent for the image to show through, but not so transparent that the text becomes difficult to read.
Utilize depth of field for better readability
You must choose those images that utilizes depth of field. This technique allow a smoother backdrop for placing the text, and most importantly increase readability. To obtain the best results, place your text on the ‘out-of-focus’ portion of the image and ensure that the text color contrasts well with the primary color of the out-of-focus area.
When there is one concept, one image without any space
You might have a relatively busy image you’d like to use in your slide. There is no specific detail in the image that can be showcased. What will be your next step to blend text and image perfectly?
Choosing the right image subject
Choosing generic imagery is of no help when you want to communicate something important to the audiences. Consider the following factors while using images
Put text in the background
Background plays a crucial role than the foreground when it comes to placing the text and image. Typically backgrounds are less busy and easier to work when placing the text. Most importantly, backgrounds often have single color, creating an ideal location where text color is easy to figure out and easier to read. Background provides a natural looking placement that does not require you to make much alterations to the main image. Subtle shading effects for text placement adds an element of depth to the image.
Besides, it is important to use simple typography and a straightforward image for the best outcome. Your image should get highlighted without any obstruction and your text should be clearly readable.
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.