VisualsSpeak blog

This post is part of a series on Visual Language. Starting with the premise that you have to be able to see the various aspects of a visual in order to be able to create visuals, each post is exploring a different aspect that goes into visual language.

Shape
Shape is comprised of several things. For simplicity, we will talk about a line drawing, which uses a line to define the outside shape of an object. There are several things that affect the perception of that shape. These include the positive (foreground) and negative (background) space, contrast and color. The following screencast talks about each of these while showing examples.

So What?

When we begin to understand and can identify the various elements that go into visual language, we can begin to use them to convey what it is we want to say visually. There are many ways you can bring emphasis or attention to an area of an image. We learn what they are so we can utilize the best ones to create the effect we are after in the particular instance. It’s like learning vocabulary. After a while you start to discern the difference between rain, sleet, downpour and drizzle. Then you can select the word that hones in on just what it is you want to say.

There are related posts about Line and Color and Contrast.

Does any of this help you see the various aspects that contribute to effective visuals?

What we can learn about visual language from Web 1.0 vs Web 2.0

I watched the VizThink webinar yesterday, How is visual thinking related to e-learning? where Tony Karrer was asking Dave Gray questions. (The recording is now available here). A couple of things jumped out at me. First Dave talked about drawing pictures in his classes in high school. He was already making sense of the world through drawing, and finding value in being able to go to the teacher and ask if his depiction was correct.

I too was drawing all over my papers in high school, but I was drawing elaborate patterns in the margins. My images reflected what the topic ‘felt’ like. The common thread is we were using drawing as a means to process information early, and doing it a lot. The difference is Dave was drawing things that were more literally descriptive, where I was capturing essence. Which makes sense, I went on to study textile design, and have focused on using visuals as a process and connector.

The other thing that jumped out is how frustrating this visual stuff can be for people. Tony is a highly respected e-learning professional who knows the value of visuals. I could really hear the frustration in not being able to make the leap from where he is to where he wants to be in producing visuals to enhance his messages.

What does web 1.0 versus 2.0 look like?

Tony mentioned he has been struggling with illustrating how the world is shifting relative to e-learning. He referred to his chart of e-learning 1.0, 1.3, 2.0.

Here is a screencast where I describe an image I created using the VisualsSpeak ImageSet. For the purpose of illustrating my point, I made an image based on how I understand the transition that is happening from Web 1.0 to Web 2.0, which is similar to what Tony mentioned as an example. This will help you see how you can discover some of the essential qualities of visual language that will make your visuals more effective.

(Left- Web 1.0 transitioning to Web 2.0 on right)

So What? How does that help me create a visual?

My description of the collage in the screencast reveals my impressions, my story of how I see the transition from Web 1.0 to Web 2.0. In this kind of process you can discover a lot of the content you want to get across.

But there is another story in the visual language that can unlock the essence of what you want to communicate visually. You can look at the overall arrangement of the images. The left side that describes Web 1.0 is more gridded and ordered. The edges of the images are aligned to each other. When you move into web 2.0 the images are fanning out from each other.

Next you can look at the lines and shapes in the images themselves.

Notice the type of shapes held within the images I selected to depict Web 1.0. There are a lot of squares or grids like those in an orderly table or spreadsheet. There are also lines much like those used in a graph.

The shapes common in my Web 2.0 depiction are circular, radiating in or out depending on your perspective, and vertical zig-zags. To me, Web 2.0 takes on the form of not being so linearly organized. How do you see the transition? Do you have a different way of visualizing it?

So what do I do with that?

Well, if you are selecting a photograph or clip art to illustrate these concepts, you can use these visual elements to guide your selection. You might search for a structured grid or a surrounded web (such as the spiderweb picture) for Web 1.0. In contrast, you might search for an image that had lines radiating from a circular form for Web 2.0.

You can also begin to develop an illustration from the patterns.

(In this sketch I used the Web 1.0 concepts of grids and graphs to transition into the more radiating form of Web 2.0)

This is just a quick overview, intended to show a process that might be used to generate ideas for effective visuals. Creating a finished visual is more complex, and does take a certain time investment. However, if you can identify some of the essence of what you are looking for, you can also hand it off to a graphic designer or illustrator to develop the ideas more fully.

Do you have some additional input for developing visuals? Or would you like me to elaborate on anything I said in this post? Let me know.

This is the first topic in a series about visual language. The posts are intended to provide a basic understanding about some of the foundational elements that go into visual language, so you can communicate more effectively with visuals.

Starting to explore visuals
Visual language is complex. You can’t really separate one aspect out, since visuals contain multiple elements. However, we can focus more attention on one aspect than another. So for example, we are going to talk about lines in this post, but you could also talk about shapes in many of the images. The goal is to train your eyes to be able to notice the details, and to be able to discern which elements are important to what you are trying to communicate.

I don’t think it is possible to create visuals if you can’t see its elements. I suggested beginning to explore a common everyday object, and I chose my keychain. I’ve been doing this two ways. I sketch while I’m doing other things at my desk like listening to webinars and conference calls. I’ve also been photographing and using Photoshop to call out various elements. While I can show you pictures of things, you’ll get more out of it if you are also exploring an object of your own. Where is your key chain?

Line

You may have noticed that many of the people who use visuals to explain concepts or help others in their thinking or communication use line drawings to do so. Info-graphics, graphic facilitation, and even mind mapping all use line as a key element to get ideas across. Therefor, it is an important element to not only understand, but to develop the skills to use it effectively.

Line is a very versatile and important part of visual language. If you can see it and work with it, you can utilize it for a whole range of expression. This is the realm of the cartoonist, a mastery of line brings the work to life. Yet it is quite challenging to figure out just which line, how much of it, and what quality of line will get across the essence of what you want to say.

Here is a screencast showing some of the ways you can start to explore line.

The parts

You can spend more time looking at the photographs of the process I went through to explore line on the computer by clicking on the image to enlarge it. I will note that it took quite a bit more time to do this on the computer than it would have taken to draw with a pen on paper. Of course, now that it is in digital format I can make versions and alterations much quicker. For me that’s why I often draw on the computer after doing a few preliminary sketches on paper to make sure I have a general understanding of what I am looking at. Once I have done the basic work of getting the image in digital format, I find I am more willing to try a number of different variations.

Practice drawing something simple. At first you may not be aware of what the important lines are that need capturing. A bit of practice will help you and soon you will begin to see how emphasizing one line over another changes the focus or meaning of your drawing.

I wrote another post on a different aspect of line, Are your visuals saying what you want? Part 1

Do you have other ways of exploring visual language? Some other way that has given you insight?

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?

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 second in a series about visual elements in images. The first one, Are your visuals saying what you want? Part 1 Visual Elements is about dominant lines and shapes. The next will be about texture and pattern.

Changing the emphasis in an image with ‘contrast’

Your eye will naturally be drawn to areas of contrast in an image. You can use this to your advantage to control what part of a visual you want to call attention to. The intention of this post is not to tell you how to create these effects (done in Photoshop), but rather to begin to understand the elements in an image which contribute to the visual story, so you can make better decisions about selecting images to use in blogs, presentations, training materials, etc.

With enough practice, many people can learn to use Photoshop and other image manipulation software to emphasize the visual story you want to tell. The important part here is training your eye to ’see’ how your images affect what you are presenting. Even if you don’t have any desire to learn photo editing software, by grasping these concepts you will be able to convey the effects you want to create to a graphic artist much more easily.

In the image below on the left side, the painters blend into the building. By making the painters lighter in the version on the right, they stand out more. I also added more yellow to the sky which helps it to blend better with the yellow building and to better help keep the focus on the painters.

In the next image by adding ‘contrast’ to the sky, the focus of the image is shifted up to the top of the hill. The dark top left corner balances the dark in the bottom right, further encouraging your eye to focus on the center of the image. Notice how the image on the left doesn’t have a focal area and leaves your eye wandering in search of one.

This example is more subtle, but the cats eyes in the left-hand photo blend in with the surrounding fur. Adding some color and increasing the contrast makes the grey fur darker which makes the cat’s eyes more pronounced.

To dramatically change the mood of the photo on the left, I added a lot of ‘contrast’ and made the eyes whiter. We call this the “Manson Family Effect”.

Bringing attention to your visual story through color

Color theory is very complex. It took four years of art school and many years of practice afterward for me to really be able to work with it consistently and beyond having a ‘knack’ for it. I’m only going to scratch the surface here, with a few concepts.

Yellow is naturally lighter than other colors. As you saw above with adjusting the contrast in the images, in general your eye is drawn to the lightest areas of a photo, particularly when it is next to a dark area.

The photo of the bicyclists wearing yellow is just as it came off the camera. The jackets are bright yellow, but you might not realize how light in color they are until I change the color to bright red in the next photo.

When the jacket color is adjusted to red, you can see how light they are….most would say they are pink. The jackets appear to pop off the page and almost look detached from the bodies underneath.

When I remove the color contrast by making the jackets grey, they blend back into the photo. Notice how all the junk in the background becomes more evident. In the top two photos your eye is drwn toward the colorful jackets rather than the wire running through the woman’s head. Ouch!

Your eye doesn’t see like the camera. The eye is selective in what it pays attention to. The camera captures everything that is there. Sometimes by adjusting the color and/or contrast we can enhance what we want people to pay attention to and keep them from focusing on the things we don’t.

Here is another example. The original photo is on the left. The pink flower is quite bright and stands out. When I grayed the color, it sits back and the yellow above it becomes more important. There isn’t a strong focal point in the middle photo. When I tinted the pink flower to yellow in the far-right photo, the flower moves forward to being the focal point once again.

For maximum effectiveness you want to control where the eye of the viewer is being drawn, and align those areas with the most important elements of whatever you are trying to communicate.

Want to learn more about color?

One of the most important books about color is Johannes Itten’s , The Art of Color. While it is a bit dense, the illustrations are priceless. I have spent many hours studying this book. Luckily, there is an online mini-course that covers many of the principles in the book in an engaging fashion. Color Contrast & Dimension in News Design. It was created for journalists, and is well worth visiting.

If you’d rather just play with colors with some suggestions about what colors might combine to convey a particular feeling, try Palette Man.

If you have a color you are trying to find other colors to go with it, try Color Harmonies.

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

You know that pictures make your training materials, blog, website, etc. more interesting. But are you using them as effectively as you could be? In this series of posts, we’ll be taking a look at what makes an image speak, to see if you’re getting your images to reinforce what you want to say.

What are the elements of the visual story?

There are a number of elements that make up the visual language of an image beyond the content of the picture. Here are some examples:

• Dominant lines and shapes
• Color
• Contrast
• Texture
• Pattern

In this post, I will focus on dominant lines and shapes. I’ll write about others next week.

Dominant lines and shapes

Here we have two photos of a dog swimming. Same dog, similar colors.

The dominant lines in the pictures are quite different. If you learned to read a language like English, your eye automatically starts at the top left side and moves to the right. The same holds true for images. Your eye will tend to follow the dominant lines in an image from top-left to right.

The picture of the dog with the ball in it’s mouth, moves the eye to the right along the diagonal, returns to the left along the bottom diagonal, then wraps around to focus on the dog’s face. The other picture brings the eye down vertically to a vortex of tension created by opposition of the lines pointing up from the bottom. The focus is the nose of the dog.

Even if you don’t consciously notice the dominant lines, your eye will subconsciously follow them. They will lead your attention, which is why identifying them can help you be more effective with the images you use for your blog, presentations, etc.

More examples

Here are some images to practice finding dominant lines and shapes. There are no ‘right’ and ‘wrong’ answers. Each person will see things slightly differently, and that’s OK. You can see what I picked out of each one.

What do you want people to pay attention to?

Certainly, you want to select images with content that is related to the message you want to convey. Beyond that, you also want to help guide people through your content effectively. Paying attention to how the images are moving your audience’s eye can help you look at whether you are guiding their eye to the most important places on your page.

On your blog or website homepage, you will have a number of elements that may be competing for attention.

• If you have an image in the header, where do the dominant lines lead?
  • Is it to your post?
  • Your sidebar?
  • Off the sides of the page?
  • Are you directing people to what you want them to pay attention to?
• If you add an image to your post
  • Is it leading the eye through the content of the post, or away from it?
  • How do the lines and shapes relate to the sidebar(s)?
  • Is it adding or distracting?
• Are you leading eyes to what is most important to you?
• Does the visual emphasis align with the focus of your blog?

Take a look

How are the images working (or not) on your blog, website or printed materials?

The series will continue and we’ll focus on identifying other elements that can contribute to making the visual story as effective as the verbal one.