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

A
  • Aqua Color - Aqua is a spectral color between green and blue. It is named after color of water. Aqua is a color...
  • Amber Color - Ember is a spectral color between yellow and orange. Amber is thought to have been named for its yellow-orange hue...
  • Area Chart - Imagine a canvas where data comes alive – a canvas that paints a vivid picture of evolving trends and reveals...
B
  • Blue Color - Blue is one of the three primary colors of pigments in painting and traditional color theory, as well as in...
  • Black Color - All other colors are reflections of light, except black. What is Black Color? It is the darkest color, the result...
  • Bar Chart - A bar chart is one of the most common chart types used to explore and understand data. When information is...
  • Brown Color - Brown is a composite color. In the RGB model, the color is made by combining red and green, in specific...
  • Bubble Chart - There are many charts available to show specific information or data, but one of the common ones is the bubble...
C
  • CATIA - CATIA (Computer Aided Three Dimensional Interactive Application) is a CAD software that was developed for solving the problems of computer...
  • Color - We live in a world of color. For the most part, our lives would be very bland without them. From...
  • Column Chart - You always see column charts in books, newspapers, magazines, and online resources. It makes articles presentable, organized, and credible. But...
D
  • Denim Color - Denim is a range of light and dark blue colors. It is named after cotton textile. Denim color is the...
  • Dual Axis Chart - Multiple axes, also known as the dual-axis chart, make use of two axes to show the connection between two variables...
  • Diagram Frame - Diagram Frames are a great way to illustrate your ideas and thoughts. They are the visual equivalent of an outline,...
E
  • Electric Color - Electric colors are bright colors with high intensity. Electric color is a vibrant, bright and unique type of paint that...
F
  • Fluid Layout - For those who are not designers, the term "fluid layout" might sound a little intimidating. In reality, fluid layouts can...
  • Fixed Layout - Fixed layout refers to a type of design that does not use any fluid or scalable elements. It can be...
G
  • Grey Color - Grey is an intermediate color between black and white. It is the color of a cloud-covered sky, of ash and...
  • Green Color - Green is the color between blue and yellow on the visible spectrum. It is the color of life, renewal, nature, and energy. What is Green?...
  • Gauge Chart - The gauge chart, or also known as a dial chart or speedometer chart, is considered one of the most popularly...
I
  • Indigo Color - Indigo is a dark blue color based on the traditional dye of the same name. Indigo is both a color...
O
  • Orange Color - Orange is the color between yellow and red on the spectrum of visible light. It gets the name from the...
P
  • Purple Color - Purple refers to any of a variety of colors with hue between red and blue. It is normal if people refer purple as violet. Purple...
  • Pink Color - Pink is a pale tint of red that is named after a flower of the same name. We often think of pink...
  • Pie Chart - The pie chart is a data representation using a circular graph. It is also referred to as a circle chart....
R
  • Red Color - Red color is at the end of the visible spectrum of light, next to orange and opposite violet. Varieties of...
  • Radar Chart - A radar chart is a manner of measuring many quantitative variables, which makes it valuable for seeing which variables have...
  • Responsive Layout - The web has been changing rapidly as more people use smartphones and tablets instead of computers as their primary method...
T
  • Transition Animation - Animation is a powerful tool in making UI of a web or an app alive. It can help to create...
  • Tree Diagram - A tree diagram is valuable for visualizing and sorting out the diverse possible results of a series of events. For...
  • Template - Templates are documents that allow you to save time, energy and money when it comes to designing your own work....
V
  • Violet Color - Violet is a color similar to Pink. It is the color of light at the short wavelength end of the...
W
  • White Color - White is the lightest color and is achromatic. It is a color at its most complete and pure, the color...
Y
  • Yellow Color - Yellow is the color between orange and green on the spectrum of visible light. In the natural world, yellow is the color of...

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.

1 thought on “Design Terminologies: Glossary of Design Terms”

  1. I want to add some terms:

    -line: a line or sequence of lines delimiting the boundary of an area and separating it from other such areas; border; margin; hem
    -shape: one of the forms that includes, but is not limited to, circle, triangle, square etc.
    -space: an empty region within which things can be put or within which something (such as a show) can happen or be displayed; availability for use.
    -a void – space not filled by anything physical; empty space where nothing exists. A void could also be described as emptiness and primarily comprises patterns and shapes created by light and dark patches on an object like paper. It is used in art to create contrast and draw attention to parts of a picture.

Leave a Comment

Your email address will not be published. Required fields are marked *


Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close