Design Terminologies: Glossary of Design Terms

Design is a fascinating topic for many people. Designing something new or old can be very time-consuming and it can take years of experience to master the technique. There are so many different types of design work, from graphic design to architecture.

And there are many design terminologies used in the field of design that may be new to you. Knowing these terms and their definitions will allow you to better communicate with your designer, as well as understand what he or she is talking about when they use them.

Glossary of Design Terminology

45+ Common Design Terms

Designers use a variety of words and phrases to communicate their designs. Understanding what these terms mean is vital for communicating effectively with designers. Below is a list of common design terms and definitions:

• Wireframe: A wireframe includes the basic layout as it would appear on a screen without any color, font, or other formatting. In other words, it’s a visual representation of the site as if it were a black-and-white sketch without any shadows or texture. An initial design has been developed to show how elements link together on a page.
• User Flowchart: The user flowcharts offer insight into how people interact with your site. This can give you valuable information about where to place information and how to word it so that users can easily understand what you’re trying to tell them.
• Front-end Development: This is the process of creating the code for the interface of a website or application. This involves converting visual designs into HTML, CSS, and any other programming language needed to create the final product. It is the stage when the actual code is written, allowing the user to interact with the website or application.
• Content Inventory: This is a list of content that has been collected for your website or application. This can be compiled by either doing research on competitor websites to see what other companies are saying about certain topics, interviewing company stakeholders, asking for client input, and looking through analytics data to find popular pages on your site.
• Layout: Layout refers to the position, organization, and structure of elements on a page. The layout of a page can help users quickly find the information they need. For example, a website’s layout may include a navigation bar at the top of the page, a search bar in the middle, and content organized into sections on the page.
• Balance: Balance is the use of symmetry and asymmetry to create harmony in design. By considering size, weight, and color, their elements can be arranged on a page to create a feeling of equilibrium. This approach to balance can be applied to various products in order to bring out their desired effect.
• Proximity: The relative closeness or distance of objects that appear near each other in proximity on the page. Proximity can be used to indicate importance (groups larger groups together) or relationships (linking objects with lines).
• Alignment: When all things are properly lined up. Align your margins, align your text box edges with this tool, etc…
• Repetition: Repetition is a design technique used to establish unity by repeating the size, color, shape, and texture pattern of an element multiple times. This technique is often used to create a sense of harmony and consistency within a design, making it easier for the viewer to recognize the product or brand.
• Contrasting: Creating a clear distinction between elements, such as through the use of contrasting colors or scale, is known as Contrasting. This concept is used in our product’s design to create a visually appealing look.
• White Space: White Space, sometimes referred to as “negative space”, is the area of a page not occupied by any content. This includes margins and gutters. By incorporating white space into a design, a strong visual hierarchy and balance can be created, emphasizing certain elements over others.
• Rule of Thirds: It is a technique used to divide a page into thirds both vertically and horizontally, creating an invisible grid connecting intersecting points where horizontal and vertical lines cross. Generally speaking, important visual information should be placed near one of these points rather than smack dab in the center of the design (so it doesn’t appear too static). Also helpful for placing items off-center to create more visually interesting compositions that are often used in advertising.
• 8-bar grayscale: This is a method used by designers to provide clients with an idea of what their design will look like during the creative process, as opposed to just presenting them with the finished product. This is beneficial as it allows clients to visualize the layout of their design without being distracted by color selection or font choices. 8-bar grayscale also eliminates potential communication issues that could arise from color discrepancies.
• Line art: Line art is an image composed of lines only, without a fill color. Vector graphics such as SVG and AI files are examples of line art because instead of using pixels, they consist of shapes and paths that are programmed to create curves and angles. The software we offer can be used to make line art, allowing you to create unique illustrations with precision.
• Grid: When items are arranged on a page in lines of symmetry that echo the invisible grid lines found in print media.
• Hierarchy: A way of establishing what’s most important by placing certain elements higher or lower with space above and below it to indicate their importance. Also helps guide user flow through your design.
• Scale: The scale principle is used by designers to create a hierarchy in their designs. This is done by making the most important elements larger than the less important ones. For example, a large title is more important than a small title. If all the words in a design are the same size, it can make the layout look dull and uninteresting. To prevent this, designers should make sure that the text is not too small.
• Thumbnail sketch: A tiny version of the design layout that is used to show a client the layout of their project quickly.
• Mock-up: A visual representation of what an actual product should look like based on other products in that same category (i.e. how CocaCola displays its product). Mock-ups are often used as “proofs” to get the final buy-off from the client before starting the design process.
• Resolution: The number, or density, of pixels available in each inch of your monitor’s display area; it also refers to how many pixels exist within a given space and/or distance (i.e. 50 pixels per inch). 
• DPI: Dots per inch which is used when talking about printing devices such as printers, scanners, and screens. It’s a way to measure how much detail can be rendered on a printed page, though it’s not always the same as PPI (see PPI definition).
• PPI: Pixels per inch which is used when talking about digital images or computer screens. It measures the density of pixels within a given space. Generally speaking, making an image 100 pixels by 100 pixels will result in sharp edges while 200 by 200 gives you more of a smooth edge (assuming you’re working with minimal visual complexity and at standard screen resolutions like 96).
• Pixels: The smallest single element that makes up the digital image. Pixel comes from the “picture element.” Each pixel is made up of three elements which are assigned separate colors (red, green, and blue).
• Crop: Cropping is a quick way to reduce your artwork’s size is by removing excess background space around it. The act of cropping directly impacts how much resolution you have available for the final output (i.e. downloading or printing). So if you crop anything away, you’ll need to adjust the sizing so everything fits within the preset boundaries you’ve selected for yourself (example: 300 x 250 pixels)
• Stock photo/art: These are pictures found online that can be used for free (no copyright issues) as long as proper credit is given; depending on their source, stock photos are either royalty-free or rights managed. Royalty-free means the copyright is passed on to you, while rights-managed means that specific limitations to use are listed with each image.
• Font: A typeface (i.e. Helvetica) and its variant styles (bold, italic, etc.) Also refers to a font “family” consisting of all variations for a given typeface (i.e. Helvetica Neue).
• Lorem ipsum: Latin for “random text” that is used when designing to provide a placeholder for content so you don’t have to work with a real copy yet.
• Color theory: The use of different colors in the design, also includes the principles of creating colors and color schemes, including color relationships and color harmony.
• Hue: A specific tint of a dominant color (for example blue has many hues).
• Tint: Adding white/tinting something lighter makes it lighter while adding black/tinting something darker makes it darker.
• Tone: Refers to the gray between white and black, which turns an image into shades of gray. Tone can be applied using filters in programs like Photoshop or Illustrator.
• Shade: Adding black/shading something darker makes it darker while adding white/shading something lighter makes it lighter.
• Palette: A collection of colors used in design (i.e. the Adobe Suite default color palette includes 102 different shades).
• Warm and cool colors: Colors that are considered “warm” include reds, oranges, and yellows; those considered “cool” include blues and greens. The temperature of a color can also influence how you perceive it based on what’s around it.
• Monochromatic: Any combination of only one hue with differing degrees of gray or another neutral color added to create tints, tones, shades, or shadows. Monochromatic often relies on tints, tones, dyes, or shadows to help create the illusion of different hues.
• Grayscale: A range of various values within black and white. The absence of color is also called shade or tone.
• Analogous: Groups of three colors that are next to each other on the color wheel, i.e red-orange-red. Any two analogous colors are directly opposite each other on the color wheel (i.e orange-green)
• Complementary: Colors that are directly across from each other on the color wheel, i.e blue & orange, yellow & purple). Many designers use either complementary schemes or triadic schemes in their designs for even more options when choosing a palette Triadic combinations to consist of any three colors equidistant on the color wheel (i.e yellow-green-blue)
• Gradient: Gradual or graduated change in hue, shade, tone, saturation, or brightness between two or more colors. Can fade/blend like an actual gradient (color blending into another color).
• Opacity: How transparent the design is (or how much something blocks out what’s underneath it). Lower opacity = higher transparency; 100% opacity = invisible, while 0% opacity = solid/not transparent at all.
• CMYK: A standard four-color model used for ink printing to produce most printed material you see today (newspapers, magazines, etc.). CMYK stands for Cyan, Magenta, Yellow, and Key (black), the four ink colors used in color printing. The letters represent the four colors mixed together in various combinations to produce a wide range of colors in printed materials such as magazines, brochures, and packaging.
• RGB: The most common color model used to display and produce images in electronic devices like computer monitors and screens.
• Pantone: Pantone is a widely-used color system that organizes colors into a standardized system. It enables accurate color matching by providing a solid color chip that can be compared against a printed piece of paper or other physical media. This system is often used in the printing and graphic design industries to ensure colors are faithfully reproduced.
• Landing page: A landing page is a webpage designed to persuade website users to do a specific task, such as signing up for a service or ordering a product. It is an essential part of any marketing strategy and should be focused on achieving its desired goal.
• User interface (UI): Refers to the elements and components on a screen that help users navigate through an interface.
• Vector graphics: Graphics created with mathematically-defined points, lines, curves, fills, and shadows that are scalable without losing quality/sharpness. Can be used in many different programs like Adobe Illustrator or Sketch).
• Raster graphics: Also called bitmap images or pixel images, raster images are made up of tiny individual pixels which cannot be modified after they have been created using any type of editing software you can use to create vectors. Use raster formats for photos. Don’t use them for logos or illustrations because you won’t have much flexibility when modifying it later on down the road if needed.