How many times have we all tried to speak specifically and intelligently but lacked the proper lingo? For example, telling your mechanic that the “thingy” in the engine is broken probably isn’t too helpful. It’s very similar when communicating with designers. The more specific you can be about your requests, the better the chances they can meet or exceed your expectations quickly and without needless and costly revisions.
Here we’ll quickly review some key design terminology that designers use when creating logos, ads, or web pages. Don’t be afraid—it’s just a glossary.
Color Schemes and Color Palettes
When using two or more colors from the color wheel (see below), those colors comprise the scheme. The color palette is the range of colors used in the scheme (e.g., from hot pink to violet, from forest green to seafoam).
Image credit: Seven Swans Collection
A graphic representation of primary, secondary and tertiary colors. Each color is like the area between two spokes in the wheel, following the continuum of the light spectrum. Complementary colors are found on opposing sides of the wheel. Analogous colors are adjacent to a particular color. Rectangular (or Tetradic) colors are four colors comprising two pairs of complementary colors. Split-complementary colors involve the base color plus the two colors that lie next to its complementary color.
CMYK (vs. RGB)
CMYK stands for Cyan, Magenta, Yellow and Black (yes, I know “black” starts with a B) and represents the colors used in print design of everything from brochures to food packaging. RGB (Red, Green, Blue) is the additive color model used by electronic media such as cameras, video, and TV. General rule: If you’re talking about print, you’re talking CMYK.
A piece of code that is used to designate the look and feel of a website, separate from the actual content of the web page.
A typeface in one specific style and size. For example, Times New Roman Semi Bold, 14 point type.
Image credit: Fontfabric
The basic computer language in which text, images, and links are expressed.
There are several types of files used to present images. GIF files (pronounced “jiff”) are best used for small files with simple color palettes and simple shapes. GIF files can also be animated. The JPEG is a type of “lossy” file, (i.e., the larger the file size the greater the detail, and vice versa). JPEGs are easy to manipulate and resize for various uses (a buddy icon to a banner ad). PNG files are best used when you have large areas of uniform color or images with transparent backgrounds (unlike JPEGs). TIFF files, unlike JPEGs, do not lose any data when compressed, and are typically used for large files where retaining detail is essential. Not sure which files you need? Have a look at our more detailed post on design file types.
The space between individual letters.
Image credit: Microsoft; image on top represents kerning
The space between lines of text.
The area of a printed piece or web page that falls inside the margins. This is the area available for design elements such as text, banners, sidebars, and images.
A convenient format for displaying multi-page documents or brochures electronically. PDF files are also searchable.
The smallest element of an image on a computer screen. Images are often described in pixel height and width rather than in inches or centimeters.
The color intensity. A completely desaturated image, for example, would be composed of black, white, and grays.
The amount of black mixed with a particular hue.
Each character of type has anatomic features, much like the body. The baseline, for example, is the invisible line upon which the character rests. The midline is the height of a lower case “a.” Some letters, like “p” have descenders—a part of the letter that descends below the baseline. Others, like “d” have ascenders—where part of the letter ascends above the midline. The stem of a letter is the main stroke, or the most vertical stroke. The weight of a character or set of characters refers to the thickness of the stroke’s width. Some examples include demibold, light, and bold.
Image credit: http://sabaki.aisites.com/endymion/anatomy.html
Instead of using pixels to represent images, vectors use lines and shapes. Because they do not rely on pixels, enlarged vector images still maintain image clarity and quality.
A design principle that visually emphasizes certain parts of your content’s message by using colors, sizes, and layouts.
Image credit: Larry Buchanan
To prevent content theft, the owner of an image may overlay a copyright or other identifying marker over an image.
The blank area surrounding an object or element.
Itching for more design knowledge? Read more on Hubspot’s Glossary of Web Design Terms.