Visual – Verbal Design Language Re-Post



Concise overview of visual-verbal design by a web designer. I’ve retained some of the links for anyone who wants to read further.


Do You Know When To Communicate Verbally And When To Communicate Visually?

by Steven Bradley / February 21, 2011

Is a picture really worth 1,000 words or are there times when a few words communicate more effectively? The truth is each is better at communicating certain concepts than the other. When trying to decide the best way to communicate in a design we should be thinking about:

  • When are images most effective
  • When are words and other formal symbols most effective
  • If both images and words are used how are they best combined

Visual Thinking vs Language-Based Thinking

Our brains process informatiom when we think. What’s interesting is that a different area of the brain processes information communicated visually as compared to information communicated with words.

We think differently visually than we do when using language.

Verbal Communications

Language is a socially developed system of shared symbols with rules of grammar. The system can be spoken, written, or gestural as in sign language.

In each case this verbal system has to be learned. You aren’t born knowing the meaning of words or how to use them effectively.

Language symbols are mostly arbitrary. There’s no specific reason why a word like dog should mean what it does. At some point in time it was agreed that the word dog referred to a specific breed of animal, but the word could just as easily have been cat or sheep or grape.

Because the symbol and it’s meaning are arbitrary we have to learn them in order to communicate.

Visual Communication

Visual communication, on the other hand, is based on pattern recognition. Our understanding of meaning through patterns doesn’t come from social conventions. We all have an innate ability to perceive and recognize patterns.

The mechanism we have for pattern perception comes from

  • evolution – we have eyes that see
  • visual experience – as we interact with world we come across different patterns that add to our general understanding

In other words pattern recognition is partly innate and partly learned. When we see designed patterns, the objects and connections in those patterns are communicated using a combination of the innate and learned.

Meaning is conveyed visually in ways that aren’t arbitrary and aren’t determined by social conventions. Me: This is the single most important difference between social-typicals and Asperger-type visual thinkers. It creates confusion and hostility between the two groups.  

Visual design ultimately uses both visual thinking, through pattern perception and recognition, and verbal thinking through learned symbols.

Grammar and Logic

Just as our thinking is different between visual and natural language so too is the grammar logic we use in each.

Natural language incorporates a distinct form of logic through qualifier words such as if, and, but, and while, among others. These qualifier words are what make directions hard to communicate visually.

This logic isn’t exactly mathematical logic, but it does allow for abstract thinking and it enables things like conditional instructions.

Think about programming with its loops and conditional statements. Many times graphical alternatives such as flowcharts have been used to represent a computer program and they’ve generally failed. The logic needed requires language.

Pseudocode on the other hand works much better as it serves as a bridge between natural language and programming code.

Visual representations also incorporate logic, but it’s a different logic than the abstract language of natural language. Our visual system is excellent when it comes to pattern finding and seeing structural relationships within patterns.

Visual logic therefore is mainly about structural relationships as the image above indicates.

Images generally do not make good labels since the meaning of the label is usually something arbitrary and learned.

On the other hand describing complex structural relationships with words is confusing and it will usually require more words to express subtleties in the relationship that are easily communicated visually.

Verbal communication is more effective conveying abstract concepts. Visual communication is more effective converying structural relationships.

Connecting Words and Images Through Deictic Gesture

Sometimes connecting language and visuals makes for the most effective communication. Often this connection can come about through deictic gestures, such as pointing, that link objects to language.

Put that there

The above phrase has no meaning based on words alone. It requires two pointing gestures to make sense. You point to what that is and then to the location of where you want that put. The gesture gives context to the words and the objects being pointed to.

Gesture language is common to hunter gatherers and may precede word language

Deictic gestures aren’t limited to pointing. They can be:

  • pointing
  • direction of gaze
  • body orientation

Deictic gestures can also be more elaborate than simply calling attention to an object. For example a large circular gesture can indicate group of objects. The main idea is that gestures can connect words with the visual.

While we can’t physically gesture in a web design, we can show graphics of hands pointing or arrows pointing and we can be aware of the gaze direction and body orientation of the people in images we use.

While not exactly deictic gestures, we can use a variety of techniques to connect specific words with specific imagery in a design.

  • lines
  • proximity
  • alignment
  • similarity

The basic ideas above can each be used to connect words and pictures in a design. We can also combine words and images through the use of labels or explanations of the visual.

Think PowerPoint slides for a moment. How often are the slides a bullet point list? Too often if you ask most people. It leads to uninteresting presentations that are learned less, because the both the slide and the speaker are communicating with words and repeating each other.

Better slides contain images and diagrams with textual labels as needed. The speaker can carry the language portion of the communication and both can be connecting via a pointing gestures.

Visual and Verbal Work Best Together

Earlier I mentioned how our brains process visual and language-based information differently and in different areas of the brain. While these different processes are independent of each other, they still communicate with each other.

For example if you think about Vincent Van Gogh, you likely retrieve from memory mental images of famous paintings such as Starry Night. You likely also retrieve biographical information, such as knowing he was Dutch or that he famously cut off his own earlobe.

Evidence suggests that information stored both visually and verbally in the brain is recalled better than were the same information stored only in one channel.

By using both, the brain is able to form connections between the two with the result of the whole being more than the sum of its respective parts.


Visual communication and linguistic communication are distinct forms or expression. Our brains process each differently and as a result each has different strengths and weaknesses in communication.

Language evolves from symbols that have arbitrary connections to their meaning. It’s better at communicating abstract concepts through the logic it carries via qualifier words like if, and, but, and while, among others.

Visual representation evolves from both the innate and the learned and excels at pattern recognition. Because of this it’s better at communicating structural relationships.

Through the use of gesture and other techniques you can connect both linguistic and visual communication so the whole is more than the sum or its parts.

When you have something to communicate in a design think about whether your message will be better communicated visually or through language or if a combination of both will work best.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s