Design Terminology: 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.

Design Terminologies are the various terms and concepts that are used in the design industry. They include but may not be limited to: color, typography, texture, composition, perspective. Design Terminology can be also defined as a word or phrase that is used by someone who does not know how to speak design languages. Design Terminologists are people who have extensive knowledge about terminology in their field and they use it with expertise.

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

3

3D Coat - 3D Coat software is innovative and powerful. It has features that are designed to give artists the best experience possible,...

A

Amber Color - Ember is a spectral color between yellow and orange. Amber is thought to have been named for its yellow-orange hue...
Aqua Color - Aqua is a spectral color between green and blue. It is named after color of water. Aqua is a color...
Area Chart - What are the common charts do you know? Yes, we have a bar graph and a column chart. What else?...

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...
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...
Bar Chart - A bar chart is one of the most common chart types used to explore and understand data. When information is...

C

Color - We live in a world of color. For the most part, our lives would be very bland without them. From...
CATIA - CATIA (Computer Aided Three Dimensional Interactive Application) is a CAD software that was developed for solving the problems of computer...
Column Chart - You always see column charts in books, newspapers, magazines, and online resources. It makes articles presentable, organized, and credible. But...
Chart/Graph - Charts play a vital part in dealing with or working with data. This helps in condensing big data into a...

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, or also known as the dual-axis chart, makes use of two axes to show the connection between two...
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

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?...
Grey Color - Grey is an intermediate color between black and white. It is the color of a cloud-covered sky, of ash and...
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

Responsive Layout - The web has been changing rapidly as more people use smartphones and tablets instead of computers as their primary method...
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...

T

Template - Templates are documents that allow you to save time, energy and money when it comes to designing your own work....
Tree Diagram - A tree diagram is valuable for visualizing and sorting out the diverse possible results of a series of events. For...
Transition Animation - Animation is a powerful tool in making UI of a web or an app alive. It can help to create...

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 that 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 the how to word it so that users can easily understand what you’re trying to tell them.
  • Front-end Development: The time when actual code is created for your website or application interface. This is where all of our visual designs are converted into HTML, CSS, and any other programming language that will be used to make the finished product.
  • 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: The position, organization, and structure of elements on a page.
  • Balance: A general sense of equilibrium created through the use of symmetrical or asymmetric arrangement of elements on a page.
  • 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: Repeating an element’s size, color, shape, texture pattern…over and over again (a technique often used to establish unity). 
  • Contrasting: Creating a clear distinction between elements, usually by using contrasting colors or scale.
  • White Space: The space that exists around elements on the page, including margins and gutters. Sometimes also called “negative space” because it’s not occupied by any content.
  • Rule of Thirds: 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: A method for showing a client how your design will look as they’re working on it rather than showing them final artwork. Since color can cause communication problems, 8-bar grayscale shows the client where all the elements of the layout fall without getting distracted by color choice or font decoration.
  • Line art: An image that has been created with lines only (no fill). Vector graphics (SVG) and Flash files are line art because they contain no pixels; instead, shapes and paths are filled with instructions to create smooth curves and hard angles.
  • 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 its importance. Also helps guide user flow through your design.
  • Scale: As size increases, importance gets greater too. Designers use this principal when creating hierarchy with size differences (large titles are more important than small titles, for example). If you can see all the words without any trouble, then they’re probably all about the same size…which makes the layout look boring, make sure your text isn’t too small!
  • Thumbnail sketch: A tiny version of design layout that is used to quickly show a client the layout of their project.
  • Mock-up: A visual representation of what an actual product should look like based on other products in that same category (i.e. how Coca Cola displays their product). Mock-ups are often used as “proofs” to get 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; 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 “picture element.” Each pixel is made up of three elements which are assigned separate colors (red, green and blue).
  • Crop: A quick way to reduce your artwork’s size by removing excess background space around it. The act of cropping directly impacts how much resolution you have available for 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: 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 place holder for content so you don’t have to work with real copy yet.
  • Color theory: The use of different colors in 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 (example: blue has many different hues).
  • Tint: Adding white/tinting something lighter makes it lighter while adding black/tinting something darker makes it darker. Also called shade.
  • 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 most often rely on tints, tones, shades 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 which 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 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 (newspaper, magazines, etc.). CMYK stands for Magenta Yellow blacK and Cyan (the K stands for key because it represents black in four-color printing; without that, we would only have to three colors instead of four).
  • RGB: The most common color model used to display and produce images in electronic devices like computer monitors and screens.
  • Pantone: A standardized color system in which a solid chip is matched against a printed piece of paper or other medium.
  • Landing page: A specific web page where you direct people who click on your website’s link so they can take the action(s) you want them to take. Everything about this page should be focused on persuading someone to complete this desired action/task, such as “sign up,” “order now,” etc .
  • 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 which 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.

Leave a Comment

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

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