The Tendo View

Jargon is an expected component of any specialized field. But visual communications is, I feel, a special case. Many of us have to deal with visuals in some aspect of our jobs, even if we aren’t actually designers or users of design tools like PhotoShop.

Unfortunately, I’ve noticed a lot of garbled use of visual design terms. In fact, I’ve observed individuals who appear to be communicating because they’re using the same terminology, only to find later–when deliverables are handed in–that they were going in completely different directions.

Below are some commonly misused terms, and a few resources to help you keep your design terminology straight.

Color terms—Color terms are the most commonly misused and the least understood. Many people don’t even realize that there is a difference among them. But there is. And knowing the differences might help out when it comes time to talk color. Here’s a quick rundown of the basics:

• Chroma—the saturation or intensity of a color.
• Hue—the color of a color; the basic true pigment.
• Shade—a hue mixed with an amount of black. For example, maroon is a darker shade of red.
• Tint—a hue mixed with an amount of white. For example, violet is a tint of purple.
• Tone—a hue mixed with an amount of grey. For example, rose is a tone of red (or pink).
• Value—the relative lightness or darkness of a color. A bright blue and a bright green have a different hue, but a similar value. If you removed the hue, you would be left with a similar gray. (Have you ever printed out a PowerPoint in black-and-white and you can’t read the bar graphs? It’s because the bars of color have the same values.)

Infographic—Short for information graphic. An infographic is a specific type of graphic that is intended to visually display information, data, or knowledge. A bar graph and a subway map are two examples of infographics. Lots of people refer to any image displayed on a website as an infographic, but unless it’s displaying some kind of information, it’s just an image.

Mock-up—A working model or prototype. In a Web design context, a mock-up would consist of an HTML page with the navigation, draft or placeholder text, and visual elements in place. A mock-up would come after wireframes and before the staged Web pages. Mock-ups are often confused with wireframes (see below).

Raster graphic—A graphic file composed of pixels (or little squares of color) on a grid. Also called a bitmap. Each pixel contains color information that adds to the image. Common raster file types include .jpg, .gif and .tiff. Raster files with high resolution are packed with color information, making them ideal for print production. But because they have a fixed resolution, they are limited in terms of their ability to scale. Scaling a raster image too large will result in jagged edges or pixelation.

This term isn’t so much confused as typically met with a blank stare. But it’s helpful to understand which types of graphic files are used in different formats and why.

Vector graphic—A visual image composed of paths (or lines) anchored by points. A vector image is created by the relationship of the points to one another, so it can be infinitely scaled up or down without loss of image quality or pixelation (no pixels!). Adobe Illustrator, for example, is a vector-based graphics program. Because of their scalability, vector graphics are ideal for logos and are often used in Flash. Examples of vector file types include .svg, .vlf and .swf.

Similar to the term raster, the term vector is more unknown than misunderstood.

Wireframe—A visual representation of how the navigational elements will be laid out on a webpage.  Usually consisting of simple boxes with perhaps a few labels, a wireframe will indicate where the navigational and content elements will be placed. Creating a wireframe is an important part of the planning process prior to developing actual pages. Here are some wireframe examples. Wireframes are often confused with mock-ups.

Getting familiar with visual design terminology is a great first step toward ensuring a successful project. Here are some reliable glossaries to help you determine the meaning of specific terms in the context of visual design:

• Adobe Glossary of Color and Press Terms
• The Design Encyclopedia
• SAP Design Guild Color Glossary

Have any funny examples of misused visual design terms or additional resources to offer? Post a comment.