VisualsSpeak blog

Create more effective training materials, blogs, websites, etc. by understanding how to use visuals that reinforce your message not detract from it.

The series

This post is the third in a series about visual elements in images. Part 1 Visual Elements is about dominant lines and shapes. Part 2 Color and Contrast looks at how color affects emphasis. Here we will look at texture and pattern.

Texture and Pattern: The slippery slope

Why do I think texture and pattern is a slippery slope? Because while they greatly affect the overall impression of a webpage, blog, or presentation slide, it isn’t always considered carefully. And the tools we use to create these visuals often give us the ability to make choices that are unfortunate. Slide backgrounds are an example. They often are somewhat generic patterns or textures, but overlaid with yet another pattern created by bulleted text, it becomes a visual war for attention.

Presentation Zen has a great post on Learning from Bill Gates and Steve Jobs with a perfect example of this. Bill Gates is using a template that does absolutely nothing to enhance his message, and in some slides leads the eye to areas of no content. Notice how this frame (left) leads your eye to the bright yellow area and the woman’s back. It’s hard to read the title when it is submerged in the dark brown.

Steve Jobs uses a simple gradated background. The images and words are not competing for attention with the background. Your eye can easily take in either the words or images. Jobs’ slides are a lot easier on the eye and make it easier for the audience to maintain attention to the presentation. Enough said, visit Presentation Zen for great insights into how to use design to enhance the effectiveness of your presentations.

Let’s look at blog themes

As I was thinking about how to illustrate this point, I went over to the Wordpress Theme Viewer. A theme is like a template, in that it controls the look of your blog. The top ten downloaded themes provide a wealth of examples of strong patterns and textures created by the templates’ headers, headings, and sidebars.

I have ordered these themes in terms of pattern and texture, from ones with very strong dominant elements, to ones where the headers create strong banded patterns, to more subtle themes.

I’ve intentionally put these up as thumbnail-sized images, because it is easier to see the visual patterns when you can’t read the words. Our eyes focus on one area at a time, so it is really easy to forget to look at the overall effect. Yet our eyes do pick up on those elements, and often they distract us. Advertisers use patterns, textures, contrast, and bright colors all the time to get us to look at their ads.

In the first two, you can barely see there is dummy text in the post area, because the backgrounds are so dominant. The next four themes have strong, dark horizontal bars, which attract the eye, even before any word content is added. The last four templates are much more subtle. They don’t demand that your eye be drawn to the visual patterns of the template as much as the first six themes do.

Any of these themes might work quite well for your specific purpose. Just be conscious of why you are choosing them and ask yourself if they will service the needs of what you are trying to accomplish. And perhaps most importantly do the visual patterns serve your audience’s needs.

Don’t forget when you are looking for a theme or template, that you are often seeing it loaded up with simple nondescript filler text. How often does our content look that way? Seldom, if at all. We’ll take a look at content next.

Let’s visit Google Reader

I went over to my Google Reader to see what real content looks like without the visual components of a blog template. When you read blogs in RSS readers, you see the content separate from the template. Here were some examples:

Often the text in a blog contains links, subheadings, and bold text for emphasis. This creates its own kind of texture and pattern. Seeing your blog text in a reader is a good way to study the visual effect you are creating with your content.

Did your mother ever tell you not to wear stripes and plaid together?

There are fashion designers and models who can pull off wearing different patterns together. The average person looks a bit silly. Yet, we create clashing patterns with our templates and content all the time.

How does this happen? Let’s look at the window I am writing this in right now and what it looks like on the blog. Not the same. Yes, I can go back and forth between writing the content and previewing how it will look, but even then, it often looks different on my Macintosh than it does on a Windows machine.

What can we do to be more effective?

The first thing is just to be aware that templates and backgrounds can have strong patterns and textures that effect the overall look of your presentation. Noticing and paying attention to the overall as well as the details helps a lot.

Carefully consider the templates you choose. You can use a strong design if you are conscious about the effects it will have. If you aren’t quite as confident in your design skills, pick something a bit simpler.

Remember that subheadings, bold, and links create texture and pattern in your content.

Clashing content can be very effective for some designs. But think about your audience. Are you trying to scream to get attention? Is your audience apt to like lots of visual noise? Or is your audience new to your topic and really needing to focus on the content? Your choices add to what you are saying. Or detract from it.

Do your visuals say what you want them to?