Glossary of Design Terms

Do you speak design? When your designer mentions a gutter, do you think they are referring to something on the roof of a house? When you hear “spine,” does anatomy come to mind? This glossary of frequently used print, web and general design terms will ensure you speak the same language.

General Design Terms

  • Author’s alterations (AAs): edits requested by a client

Page Elements

  • Content: text, images, video and other elements
  • Copy: the text
  • Sidebar: an area (usually a box) placed on a page to highlight information that doesn’t fall into the normal flow of body text
  • Pull quote: a fragment of body text or a quotation copied from the text and used as a design element to highlight that information

Effects

  • Opacity: measure of how transparent or opaque a color, image, text or design element is
  • Screen: tint of a color

Typography

  • Serif: a typeface with characters that have “feet” such as Times New Roman or Garamond
  • Sans serif: a typeface with characters without “feet” such as Helvetica and Arial
  • Roman: the “regular” version of a font, not italicized or bold
  • Kerning: the horizontal spacing between text characters, can be increased or decreased
  • Leading: the vertical spacing between lines of text, can be increased or decreased

Printing Terms

Page

  • Trim size: the final page size after the printer has trimmed it
  • Flat size: the finished size of the piece when it lays flat/unfolded. A brochure containing four 8.5x-11-inch pages has a flat size of 17×11 inches.
  • Live area: the space within a page in which all important content (text and images) must appear
  • Bleed: the extension of color, images or design elements beyond the trim size (usually 0.125 inch) in order to compensate for any movement of the sheet when printing or trimming, thereby preventing any white space from appearing on the edge of the page where it is not intended
  • Margins: the space on the top, left, right and bottom of a page between the trim (the edges of the resulting printed page) and the live area
  • Gutter: the inner margins of a spread modified to accommodate the binding of a publication or the space between columns
  • Spread: the lefthand and righthand pages that appear opposite each other when a brochure or publication is open or laid flat
  • Specs: specifications given to a printer in order to obtain an estimate, including the flat and final page sizes; paper type, weight and color; number of printing colors; bleeds; binding (if applicable) and quantity
  • Folio: the number of each page
  • Running headers and footers: text (often a book or chapter title) that appears in the top and bottom margins of a page to assist with navigation through a paginated document.

Images

  • Vector: type of image file whose resolution is dependent upon the device from which it is being output, can be scaled to any size without degradation in quality, not pixel based, usually AI or EPS format
  • Raster: image type based in pixels that can be scaled smaller but not larger without sacrificing quality, usually TIFF, JPEG or PNG format
  • Resolution: measured in ppi (pixels per inch); for printing, it is 300 ppi

Color

  • CMYK: stands for cyan, magenta, yellow and black; the standard for most printing; also called four-color process printing
  • Spot color: used when needing to print a precise color or a metallic, neon or other color that cannot be reproduced in process printing; also known as a Pantone, or PMS (Pantone Matching System®), color
  • Grayscale: uses black ink only, can use solids and/or screens of black

Paper Stock

  • Coated: paper produced by a process in which it is coated with an agent to improve brightness or printing properties; can be glossy, matte or dull
  • Uncoated: paper that has not been coated with an agent or surface sealant; absorbs more ink than coated paper
  • Brightness: measures the percentage of blue light a sheet of paper reflects; typically measured on a scale of 1 to 100 (the brightest)
  • Coatings: provide protection from moisture, scuffing, scratching and fingerprints
    • Varnish: covers the printed page for protection or sheen; can be gloss, satin or matte; or spot (specific areas only) or flood (the entire piece)
    • Aqueous coating: clear, fast-drying water-based coating used to protect printed pieces; applied to an entire sheet
    • UV coating: cured by exposure to ultraviolet light to quickly dry and harden the coating

Binding

  • Perfect binding: the process of binding a publication using signatures and glue, resulting in a spine that can be printed on
  • Saddle stitching: the process of binding a publication with staples in the fold
  • Coil or spiral binding: plastic or wire round binding that comes in a variety of colors

Web Design and Development Terms

Structure and Styling

  • Wireframe: a blueprint displaying the structure of a page and placement of its content (navigation, calls to action, text and images), can range from a rough sketch to a working demo of the site, typically does not include design elements
  • Mockup: the design of the page and its elements
  • Site map: a file that lists the pages of a website in hierarchical fashion, accessible to web crawlers (search engines) or users
  • CSS: short for cascading style sheets, the file(s) that define how a website looks in terms of structure (widths, columns, etc.) and visual design (fonts, colors, images, etc.)
  • Responsive: a website whose page width, columns and elements adjust based on the size of the screen or device on which the site is being viewed, which is dictated by the CSS; does not require a separate version of the site to be maintained. A responsive website is mobile friendly but a mobile-friendly site is not necessarily responsive.
  • Mobile friendly: a website that is either responsive or has a separate, mobile-friendly version

Page

  • Header: the top part of a website; contains the logo, navigation and possibly an image
  • Hero area: the main part on a home page or landing page that appears below the header but above the main content area, includes a large image or slider and can be used to highlight important content
  • Content area: appears between the header and the footer and contains the content specific to that page; includes headings, body text, images, bulleted lists, sidebars, etc.
  • Footer: the bottom part of a page; contains a copyright notice and often other information

Navigation

  • Dropdown menu: navigation with multiple levels that appear below the top-level item when hovering over it
  • Flyout menu: navigation with multiple levels that appear to the left or right of the top-level item when hovering over it

CMS

  • CMS: stands for content management system, which allows nontechnical users to publish, modify and organize website content; keeps the website content independent from the design; WordPress and Drupal are two popular CMSs
  • Plugins: software that can be used with a CMS to expand the functionality of a website

Resolution and Color

  • Resolution: measured in dpi (dots per inch); for screens, it is 72 dpi or 96 dpi
  • RGB: stands for red, green and blue; the color space of a screen