Design Terms Decoded for the Non-Designer

Image for Design Terms Decoded for the Non-Designer

If you’re a client trying to communicate to a designer exactly what you want from a project, it helps to be able to speak at least a little bit of their lingo.

Likewise, if a designer is trying to explain to you what they can and can’t achieve, you want to be able to understand what they’re saying.

This glossary of common design terms aims to help you do just that. Think of it as a pocket phrasebook: it won’t turn you into a native of the design world, but it’ll help you navigate the terrain.

  • Adaptive design: A page created using adaptive design will detect the type of device it is being viewed on and automatically size itself to the most appropriate of the static layouts that have been incorporated into the design. For instance, a page could be designed with three layouts: one sized to fit a specific size of mobile device, another tailored for a specific size of tablet, and a third for a specific size of laptop. If the mobile device viewing the page is slightly larger or smaller than the size of the device for which the layout was optimally designed, it will still view the mobile version of the page, but the design might be cut off or bordered with blank screen. Compare with responsive web design (see below), in which the page adapts to any size of screen.
  • Aspect ratio: This ratio defines the proportion of an image’s width vs. its height. For instance, the typical aspect ratio for TV and computer monitors nowadays is 16:9: An image that is 16” wide by 9” high is 16:9. Aspect ratios are important when resizing images for design, especially for responsive web design (see below).
  • Baseline alignment means that the lines of copy in columns that are side by side are perfectly even.
  • Below the fold: Originally a newspaper term, “below the fold” referred to any content visible only on the lower half of the page. Online, it refers to content that is not visible on the initial screen view—in other words, anything that a viewer needs to scroll down the page to see.
  • CMYK/RGB: CMYK stands for cyan, magenta, yellow, and key, or black, and it’s how images have traditionally been coded for print design, with each hue broken down into percentages of these four colors. Online images, however, are defined in terms of RGB, or red, green, and blue. RGB offers a wider spectrum of color, so an RGB image needs to be converted via software to CMYK before it can be printed with the same vibrancy as the original.
  • Creative brief: This critical document sums up the who, what, where, when, how, and why of a project, ensuring that the client and the design team have the same expectations. It should discuss, among other things, the scope, audience, goals, message, and tone of the project; how the project should differentiate the client from its competitors; the deliverables; the parties involved and their responsibilities; and a timeline. A project should not go forward until all involved have signed off on the brief.
  • File format: This refers to the way data, including images, are encoded for computer storage and transfer. Certain formats work better for certain purposes. Among the most common design-related formats:
    • EPS: Short for encapsulated postscript, this is a standard format in print production. Because it’s a vector file, its images can be easily resized.
    • GIF: Short for graphics interchange format, this is the most common format for sending images online. Because they are compressed, GIF files tend to be small—a boon for transferring—but they’re also relatively low in quality and therefore are not suitable for use on printed materials. GIFs can be animated to form a short looping video that loads quickly. Animated GIFs often use clips from movies, TV shows, or longer videos for humor or memes on social media sites.
    • JPEG: Like a GIF, a JPEG (short for Joint Photographic Experts Group, the committee that created it) is compressed and relatively small, but it allows for more color variations. However, unlike GIFs, JPEGs cannot be animated. Another drawback is that JPEGs do not support transparency: If you wanted to place a logo atop a colored background, for instance, the background would not peek through the “blank” spaces of the logo; instead you’d see a white background. And text in a JPEG image often looks pixelated or fuzzy.
    • PNG: Designed specifically for the web, PNG (Portable Network Graphics) was created to supplant GIF. Although PNG doesn’t support animation, it has several other advantages over the older GIF. It offers greater transparency support, which is ideal for photo and logo placement. It has better image quality and can compress files even more tightly, so that the file size of the same image could be up to 20% smaller as a PNG than as a GIF.
    • TIFF: Short for tagged image file format, this is optimal for storing photographs and other large files, because it can compress the image while maintaining its quality. It’s a great format for printed photos.
  • Font: The font refers to the size and weight of characters in a typeface. In print, the size is referred to in points; for web design, it is usually measured in pixels or ems. A 10-point font is smaller than a 12-point font, but a 10-point size of some typefaces could be more readable than the 12-point size of other typefaces, depending on the design of the typefaces themselves. Bold, italic, and roman are the three most common weights of type. When referring to a font, you might say you’d prefer 12-point roman versus 14-point italic.
  • Grid: In design terms, a grid is pretty much the same as its typical meaning: a series of vertical and horizontal lines. When designers talk about a grid, they’re referring to the area in which content can be placed. Designing on a grid ensures that there’s a sense of order and consistency, if not symmetry, to a layout. The most common styles of grids:
    • Manuscript: The most basic, it’s essentially a single large rectangle within the page (think of a typed manuscript). It’s best used for large continuous blocks of content.
    • Column: This divides a page into—no surprises here—columns, as in traditional print newspapers and magazines.
    • Modular: Here the columns are further broken out into rows, as in a checkerboard. If you start with four columns and then divide them into three rows, you end up with 12 available blocks of content. That doesn’t mean you have to limit yourself to 12 equal-size blocks of type or images, however: You could have some of the content blocks measure two columns wide by two rows deep and others one column wide by three rows deep—hence the “modularity.”
    • Hierarchical: The most flexible grid format, this is typically used when the other formats don’t solve the design problem at hand. Unlike a modular grid, it doesn’t have equal spacing between content blocks.
awesome job post
  • Mock-up: Think of this as a rough sketch of a project, so that you can see the basic design and layout before the more time-consuming detail work is invested.
  • Negative space: Also known as white space, this refers to areas of a design that do not contain images or copy. Laymen often think of negative space as wasted space; designers, though, know that a layout without sufficient white space will not be legible or will be so unappealing that viewers will skip it.
  • Raster graphic: A raster image, such as a photograph, is made up of tiny dots or pixels. When excessively enlarged, this sort of image becomes blurry or pixelated, so that the dots that make up the graphic are visible. Raster graphics, however, generally provide more fine detail than vector graphics (see below). GIF, JPEG, PNG, and TIFF save images as raster graphics, therefore the images should be saved as the size you’ll want to use them.
  • Resolution: This refers to the crispness and clarity of an image. A lo-res (low-resolution) image is fine for creating a mock-up, but for the final product you’d want hi-res graphics. Even a high-res image will be poor in quality if the output is inferior. For instance, a photograph might render beautifully in a glossy magazine but could lack detail and sharpness when produced for a newspaper, due to the different printing methods.
  • Responsive web design: The goal of responsive web design is to create webpages that be easily read and navigated when viewed on a variety of devices. Thanks to flexible, proportion-based grids and equally flexible, or context-aware, images, among other tools, a page created with responsive design can be read on a cell phone, a tablet, and a desktop with a minimum of scrolling or resizing on the part of the user. As more people use mobile devices to surf the web and shop online, responsive design has become increasingly important. Responsive layouts are generally designed as mobile first—the layout is first created for use on a mobile device, then adapted for larger devices. The advantage to mobile-first design is that it is much easier to adapt a layout to a larger format than to minimize a layout for a smaller format.
  • Spot color: When images are produced in print, colors are primarily created using standard CMYK inks (see above). Spot color is an additional color that is created with a nonstandard ink. It allows for hues otherwise unattainable via the standard method, including metallic and fluorescent colors. In the U.S. and Europe, the Pantone Matching System is most commonly used for spot color: A designer can flip through the Pantone guide of swatches and pick the color of their choice to add to the CMYK colors. Spot color is generally used for special emphasis and logos.
  • Typeface: The set of type characters—letters, numbers, punctuation—in a given style is referred to as a typeface. As a rule, sans serif typefaces (those without the tiny lines at the end of the characters), such as Helvetica, are easier to read online than serif typefaces; type with serifs are traditionally favored for long blocks of copy in print.
  • Typography: The art of establishing the appearance of written content, typography encompasses the choice of typefaces, the size and weight of the characters, the spacing of words and lines, and the length of the lines, among other elements.
  • Vector graphic: Unlike raster images, which rely on dots to create the graphic, vector images are technically mathematical calculations. Vector graphics can be enlarged without any loss of resolution or clarity, but they generally do not provide the fine detail of raster images. Photos can be traced as vectors to achieve a photorealistic look, but the result will not be as detailed.
  • Wireframe: A type of mock-up for a web design, a wireframe will show where navigation tools and content will appear on a webpage but does not show the specifics of how those elements will look.

Upwork is a freelancing marketplace where businesses of all sizes can find talented professionals across multiple disciplines and categories. If you are a business and are looking to get projects done, consider signing up!

Join Upwork
Sherry Chiger

by - Writer and Editor

An award-winning writer and editor, Sherry Chiger was editorial director for two magazines, in the U.S. and the U.K., covering multichannel commerce. She now writes… more