Connecting the Visual Elements of Design
Visual Communication
- look and feel: emotional impact by using color, type treatments, images, shapes and patterns
- visual
organization: creating a hierarchy of information by establishing how elements are different (Visual Hierarchy)
Visual Relationships
When attempting to make sense of visual information first we observe similarities and differences.
Grouping Information
Using the information we have gathered about simularies and differences, we then attempt to group information.
Example: Thinking about a playing card, we compare the card to the other cards that are similar, and we group them into a meaning - a deck of cards. We don't have to continually compare each card to each other, we created a shortcut.
Creating shortcuts in design elements makes it easy for our users to navigate and experience our design.
Gestalt Principles of Perception - describes how we visually group information. Proximity, Similarity, Continuance, and Closure.
| Proximity | Similarity | Continuance | Closure | ||||||||
How to Make Elements Visually Different
There are lots of variations but there are five general categories of difference:
| Color |  |
 |
Introducing variations in one or all of these categories creates visual contrast or difference. The more contrast between two objects, the more likely they will be perceived as distinct and unrelated. |
| Texture |  |
 |
|
| Shape |  |
 |
|
| Direction |  |
 |
|
| Size |  |
 |
Creating a Visual Hierarchy
Elements within a web page are arranged in order of importance. A center of attention acts as a starting point and the other elements add to the story. This ordering is a visual hierarchy. Without visual hierarchy, page elements compete.
To build visual hierarchies we use visual relationships to add more or less visual weight to page elements and thereby establish a pattern of movement through the layout.
| Visual Hierarchy | No Visual Hierarchy | |||||
Usage in a Web Page
A web page is composed of several elements such as navigation, contact information and search boxes. Once a viewer understands the significance of your page elements, they can apply that knowledge to the entire site. Meaning is created through the differences and similarities among elements and their place in the page’s visual hierarchy.
A general web page hierarchy from highest to lowest importance may look like the following:
| Top Level Navigation | |||||
| Site Identifier | Site Utilities | ||||
Second Level Navigation |
Page Title | ||||
| Link | |||||
| Sub-section | |||||
| Footer | |||||
Effective visual communication does not shout but quietly guides the user around the site.
| 25593 | 25737 | 25740 | 25759 |