Think back about your time in school, more specifically your least favorite subject. Now try to focus on the topics that you remember most effortlessly in the same subjects today. You will most probably find that the concepts that were illustrated with diagrams are the easiest ones to remember, and this is not just a random occurrence.
It is a fact that continues to be stamped as the truth more and more by studies, showing that the human mind absorbs information visually much better if it is graphically illustrated than just in the form of text. This is the reasoning behind the huge diagrammatical illustrations in children’s books since they are easy to notice and commit to memory.
That said, designers of content on every platform must seek ways to incorporate images into their text content. This is the age of the internet and virtually every brand and enterprise runs a website for promotion of the brand awareness. Most are catching on with the fad and they are realizing the potency of images on their websites.
Sadly, it is not enough to just have images on the site, you need to craft them onto the site skillfully so that they do not stand out for how ill-fitting they are. Let nobody lie to you that all attention is good attention; there does exist bad attention and a conspicuous mistake is up there with the easiest way to garner the latter.
So this article is dedicated to ensuring that what is meant to make you stronger does not instead maim you. How do you marry text and images so that the content on your web design comes out seamlessly harmonized? Here are some pointers.
- Align text and background
The figures and shapes that are in the background of the post that you put up are fundamental to the overall design of the web page. If used well, they can easily be the difference for your page and its effectiveness in getting the message you need across.
For instance, if you are in the beverage business, you can have a photo of a plain colored cup with a suitable, relevant, and concise quote right beside it. For harmonization, you can have a flower on the cup whose color is similar to that of the text font. Below is an illustration.
- Have clear backgrounds
Clearly, backgrounds are a big part of designing your webpage and this reflects strongly on its combination with text.Where the most part of the message is carried in the text, you need to have a quieter background. This means that you must select a background image that is as clean and clear as possible.
The subtlety of such an image implies that it does not overpower the message that is carried in the text, which should ideally be in a color that is as strong as possible for the perfect contrast. An example of such a background is the evergreen image of the skies or some clouds. It is eye-catching, calming, and subtle. It also goes well with most of the font colors that you may wish to use. Here is an example:
- Mix and match
Other times the purpose of having an image is adding life and color to the content; making your site more attractive and lively. Indeed, there are numerous tools that will help you find the shapes and colors that you can use for your web content but that is only the simple part. The harder part is putting together the colors that come together right and make no mistake, it is a thin line between getting the right match and making a hot mess.
To mix and match shapes the key is in combining rounded shapes with rounded letters and using sharp letters together with sharp shapes. For instance, you can ideally combine text that is in caps with a triangle, by placing the message inside the shape since capital letters usually have sharp edges.
As for color combinations, that comes down to personal taste and preference. However, you can study the site’s main clientele, you may find general trends that lead you to identify what color combination will be suitable for them. Below is an illustration showing a general example:
- Use transparent shapes
Most web designers have tales of how they engage in the painstaking search for suitable images for a website, only to end up with colors that are too strong and hence render the text unreadable. Now, this can feel like a complete waste of time if you have to ditch the images because after all, perfection is the aim.
However, it does not have to be that bad. You can add transparency to the objects that you desire to us on the site using online tools such as Visme. Below is an example of the results of using these tools, taken from Visme
- Use Blurred background images
Most often when using images in the same context as text, you will find that the saying “less is more” rings true. There are many advantages to having an image in the middle, at the beginning, or towards the end of your text.
After all, a picture is worth a thousand words and that is where the strength and weakness because sometimes you really just do not need all of the one thousand words.
Such excessive images may seem overbearing on the text and that makes for quite an unpleasant sight, while a blurred background is as illustrated below:
So there you have it. The key message in this whole piece is that you can have the best caption or message in text, you might even have the ideal image to go with it but still not get the combination right.
Sometimes all it takes is a little rearrangement, other times it is having less of one element and more of the other. However, you can always get help in creating the ultimate combination as there are numerous tools at your service including the examples below.
About the Author:
Janet Anthony is a blogger from Kansas City and content editor at WritingDaddy.com who has been writing professionally for five years now. She mostly writes about web design, SEO, digital marketing, and internet marketing. Her motto is “What you do today can improve all your tomorrows”.