Design Terminology: The Essential Concepts You Should Know.

If you are having design work done, knowing the right terms strengthens communication between you and helps you achieve the results you envision. Take a look at these design terms. Study them. Burn them into your memory. Well… that might be a bit much. Just bookmark this page and use it as a cheat sheet for design words. Here are the most important descriptive design words you should know: Design: composition, balance, proximity, alignment, repetition, contrast, white space, hierarchy Photography & Art: resolution, DPI, PPI, bleed, trim, pixels, cropping, stock photography Typography: serif, sans serif, script, ascender, baseline, descender, kerning, leading, tracking, weight Color: hue, shade, saturation, monochrome, analogous colors, complementary, triadic, opacity, CMYK, RGB Website Elements: header, navigation bar, breadcrumb, landing page, HTML, user interface, wireframe File Formats: AI, EPS, PDF, GIF, JPEG, PNG, PSD, TIFF Logo Types: abstract mark, emblem, lettermark, pictorial mark, mascot, wordmark

---

Design Composition and Layout: Composition is the arrangement of design elements to form a complete image. A successful composition catches the viewer's attention and guides their eye throughout the design. In visual art, this can be called "form." In graphic design, it is generally known as "layout." Composition consists of various visual design elements such as balance, proximity, alignment, repetition, contrast, and white space. Balance This isn't your ability to walk in a straight line after three beers. In design, balance refers to how elements are placed on the page so that text and graphic elements are evenly distributed. There are three ways to achieve balance: symmetrical, asymmetrical, and radial.

• Symmetrical: Symmetry refers to a state where all design elements are equal on both sides of a central line.
• Asymmetrical: If graphics and text are not equal on both sides of a central line, the design is considered asymmetrical.
• Radial: In a radial design, elements radiate from a central point and create balance.

Proximity Grouping or spacing design elements on a page is called proximity. Good design groups related elements together. Alignment Alignment is whether text or graphics are aligned to the left, right, center, or fully justified. Repetition In order to create unity in a design, designers repeat elements. (Repetition can also be defined as your child asking for cookies.) Contrast Contrast refers to the inclusion of measurably different elements in a design. A designer can use color, shape, texture, size, or font to create contrast. White Space White space — sometimes called negative space — is the part of the design not marked by image or text. Rule of Thirds The rule of thirds is a technique designers use to determine the focal point. Using a grid of three rows and three columns, focal points are indicated where the lines intersect. Designers use this as a guide to determine where to place important elements in the design. Grid A grid is a series of vertical, horizontal, angular, or curved lines used to arrange graphic elements on a page and in relation to one another. Hierarchy In design, hierarchy refers to arranging elements according to their level of importance. Newspapers, magazine spreads, and movie posters are good examples of where design hierarchy is used. Headings (also known as display type) are usually placed at the top, while subheadings and body text follow below. Scale Scale is the size of one object relative to another. Scale can be used to attract interest and capture a viewer's attention. Thumbnail A designer often creates small, rough sketches — thumbnails — during conceptualization to explore many ideas. Mock-up A mock-up is a real or digital model used to test early design ideas and see how they might look in the real world.

---

Photography & Art Resolution The detail of an image based on the number of pixels it contains is called resolution. An image looks sharper at higher resolution. DPI DPI stands for "dots per inch" and is a measure of a printer's quality. 300dpi is recommended for high-quality printing. For example, a 1200×1800 pixel image at 300dpi resolution translates to a 4×6 inch print. PPI PPI stands for "pixels per inch" and is a measure of pixel density used by electronic display devices. You can frequently see this term with scanners, cameras, TVs, or monitors. Learn the differences between DPI and PPI. Bleed Bleed is when the design extends beyond the print edges, so that white edges are not formed when trimmed. Trim Trim size is the final size of a printed piece after it is cut from the page. Trimming is done along the cut marks. Pixels Pixels are the square-shaped dots that make up a digital raster image and determine the resolution of an image. As the pixel count of an image increases, so does its resolution. Cropping A designer can improve framing, emphasize a particular subject, or change the aspect ratio of an image by cutting away unnecessary parts. Stock Photo/Art Stock photos and art are licensed images created by a third party. Using stock visuals saves the cost of a professional photo shoot. Check out some places where you can find good, free stock images.

---

Typography Font Types Most fonts fall into one of four different types.

• Serif: Serifs are the accent lines and hooks of certain letters.
• Sans Serif: Sans means "without." A sans serif font does not have serifs.
• Script: Script fonts use a fluid, slanted stroke.
• Slab Serif: Slab serifs are distinguished by thick, block-like serifs.

Font Components All fonts are made up of the same basic components.

• Ascender: The part of a lowercase letter that extends above the main body. For example, "b" or "h".
• Baseline: The base on which all type characters sit. The lowest point of capital letters and most lowercase letters.
• Descender: The part of a lowercase letter that extends below the main body. For example, "g" or "y".
• Kerning: Refers to adjusting the spacing between two letters.
• Leading: Refers to the distance of one line from another.
• Tracking: Used to adjust the distance between all letters in a block of text.
• Weight: The thickness of the font.

---

Color Hue The hue of a color refers to the arithmetic average of the colors mixed. Shade Refers to the darkening of a color hue. For example, when a blue hue is darkened, it turns into a darker blue. Saturation The degree of vibrancy and intensity of a color. At high saturation, the color can appear very vivid and intense. Monochrome A design created using only one color hue from a color palette. Analogous Colors Colors that lie next to each other on the color wheel. For example, blue, blue-green, and green. Complementary Colors found on opposite sides of the color wheel. For example, red and green. Triadic A color scheme using three colors equally spaced on the color wheel. Opacity The degree of transparency of a color. A fully opaque color hides objects in the background. CMYK The color model used in color printing. CMYK refers to Cyan, Magenta, Yellow, and Key (black) colors. RGB The color model used to display colors on digital screens. RGB refers to Red, Green, and Blue colors.

---

Website Elements Header The text or graphic at the top of a web page, usually containing the site name or logo. Navigation Bar A menu located at the top or on a side of a web page that allows you to navigate to other pages within the site. Breadcrumb A navigation tool that shows the user's current location on the website. It is usually located at the top of the page and allows return to other pages. Landing Page The main page a user encounters when first visiting a website. It usually contains important information, offers, or promotions. HTML Abbreviation for "Hypertext Markup Language," the basic language used to create web pages. User Interface The part of a software or website that interacts with users. Includes buttons, menus, and other interactive elements. Wireframe A layout template used to plan the design layout. Generally used as a reference in page design.

---

File Formats AI A file format created by Adobe Illustrator that contains vector graphics. EPS Known as Encapsulated PostScript file, generally containing vector-based graphics. PDF Portable Document Format, used for editing or printing documents and supports various content types. GIF Graphics Interchange Format, used for small-sized animations and static images. JPEG Joint Photographic Experts Group, a widely used format for high-quality photos and images that uses lossy compression. PNG Portable Network Graphics format, offering high-quality images with transparency support and using lossless compression. PSD A file format used by Adobe Photoshop that supports multi-layer editing. TIFF Tagged Image File Format, offering high-quality images and generally used in professional photography.

---

Logo Types Abstract Mark An abstract shape or symbol representing a brand. Emblem A symbol or sign generally combined with type. Often seen in school and government institution logos. Lettermark A logo type that represents the initial letters of the company name. Pictorial Mark A symbol or mark representing a company's service or product. Mascot A figure representing a company, generally designed as a character. Wordmark A logo type used only with a stylized version of the company name.