6 Visual Communication
Learn how images, symbols, shapes, color, and text work together, how composition guides attention, and how to make visual messages accessible.
Elements and their roles
combines images, , shapes, color, and text to convey information or ideas. A photograph can show a real person or place, an icon can stand for an action, a shape can organize or point, and text can name, explain, or persuade. The overall meaning depends on how these elements relate to one another as well as on the audience and context.
Visuals can attract attention, clarify a message, or add meaning to accompanying text. Irrelevant or distracting visuals, however, can weaken the message.
Choosing and combining elements
Images can show, document, explain, or evoke. A photograph of a crowded beach can give a beach-cleanup poster a human context, while a diagram may explain a process more clearly than a paragraph. Choose images for their purpose, and make their style, placement, and scale support the message.
represent ideas or actions. A magnifying-glass icon may suggest search, while a heart may suggest care or favoriting. Familiar can be understood quickly, but meanings are learned and may differ by audience or setting. Pair an unfamiliar or important icon with a label or explanation.
Shapes and lines create structure and relationships. Boxes can group related information, arrows can show direction or sequence, and circles can call attention to a point. Use these cues consistently so viewers can interpret them rather than guess at their purpose.
Text and typography state the message precisely and shape its tone. A large, bold heading can establish the main point, while smaller supporting text provides details. Keep type readable and avoid so many font styles or competing emphases that viewers cannot tell what matters most.
Color and contrast distinguish elements, set a tone, and draw attention. Color associations vary across cultures and situations, so do not assume that a color has one universal meaning. When a distinction is important, use labels, shapes, or patterns as well as color.
and reading order
guides interpretation through the arrangement of visual elements. Size, position, spacing, alignment, and contrast create : cues that help people notice what is most important and decide what to look at next.
For example, a public-health poster might place a short headline at the top, a clear illustration in the center, and a brief action statement near the bottom. Related words and images placed close together appear connected. Ample empty space can separate sections and make a page easier to scan, while a consistent grid or repeated design style can help connect pages in a website, presentation, or campaign.
Make relationships between elements clear. If an image supports a headline, place it so viewers can readily connect them. If an icon signals an action, put it near the relevant control or instruction. To check the arrangement, consider what viewers will notice first, what they will understand next, and whether every element helps answer those questions.
Accessibility and contrast
Visual messages should remain understandable to people with different vision and reading needs. Ensure text contrasts sufficiently with its background: WCAG 2.1 specifies a minimum of for ordinary text and for large text at Level AA.
Do not rely on color alone to communicate a distinction. Use actual text rather than text embedded in an image when possible.