130 Common Design Terms to Know
If you’re entering the design world or in need of a refresher, this list of terms will get you up to speed
A
A/B Testing
A/B testing is where you are comparing to two different layouts, such as webpages or an application, with a single variable online to see which one performs the best.
Accessibility
This is where you are designing the layout of a webpage or mobile app and taking into account people with disabilities who need to interact with your product easily. This includes designing for people who are blind, color blind, deaf, and other sensory disorders.
Adaptive
Adaptive means designing something that fits well on multiple devices, such as on an i-phone, tablet, or desktop computer. When designing, you have to take into account that people will be viewing information on different platforms.
Affordance
Affordance is there to help give clues or signals to the user on what to do next. For instance, designing buttons to show a user that if they want to get somewhere, they will need to tap or click on that icon or bit of text.
Ajax
Ajax stands for Asynchronous JavaScript. It’s used to create dynamic web applications and allows for asynchronous data retrieval while not having to reload the page a visitor is on.
Alignments
Is a process of making sure text and images are aligned in a way that visually makes sense to the user. This helps with everything staying organized, visual connections are made, and improves the overall experience for the user. For example, left, right, or center would all be different types of alignments.
Analogous
Are colors that are next to each other on the color wheel. They are often colors you find naturally in nature and are pleasing to the eye.
Anchor Text
Text that is linked to a site and is commonly used for SEO (Search Engine Optimization).
Animation
Creating images that look like they are moving through computer-generated imagery.
Ascender
Ascenders are the vertical, upwards strokes that rise above the x-height. For instance, letters h, b, and d.
Aspect Ratio
This is the proportional ratio between an images width and height or W:H. For instance, a square box will have an aspect ratio of 1:1.
Avatar
As the name suggests these are usually images that are used to represent a person but in a different visual form. You can usually see these on games or when you are setting up your profile on some website.
B
Balance
Balance involves the placement of elements on the page so that text and other elements on a page are evenly distributed. Three ways to achieve balance are symmetrically, asymmetrically and radially.
Baselinegrid
Is a series of invisible vertical units that can be used to create consistent vertical spacing with your typography and page elements.
Below-The-Fold
The term ‘below the fold’ refers to the portion of a webpage that a user must scroll to see. A holdover from newspaper publishing, the term ‘below the fold’ was established when there was a physical fold in the middle of the page.
Body Copy
The main text that people will read on a design. The body copy refers to the paragraphs, sentences, or other text that are the main content on any website. In design terms, the body copy of a website is the main text rather than the titles, or subtitles.
Blur
Creating a soft or hazy affect around an image.
Brand
Every business needs something that makes them identifiable. Branding is a way of using color, names, and symbols in design that represent the company as a whole.
C
Cap Height
Back to our friend the baseline — the cap height is the height of the top of a capital letter in any given font above the baseline. Cap height refers specifically to letters with a flat top, such as H and I. Round letters like O and pointed ones like A may rise above the cap height in their uppercase form.
Case Study
A case study outlines the success of a particular problem or project you undertook. Here you are showing the problem, the solution behind solving it and why you went that route.
Complementary
Think of these as the best friends of the color world — complementary colors are the colors that sit directly opposite of one another on the color wheel. Examples of complementary colors are red and green, blue and orange and purple and yellow. Using complementary colors ten to make a design more aesthetically pleasing.
Compression
Compression is where you are minimizing the size of bytes in a graphic file without harming the quality of the image or written text.
Contrast
Contrast is the arrangement of opposite elements on a page — in other words, when two things on a page are different. This can be light vs. dark colors, smooth vs. rough textures, text color vs. background color.
Color Theory
Rules and guidelines that designers use to make sure all the colors used work together properly.
Copy
Every website or mobile app needs copy or published text that a user will see once they visit your site. This text will inform the user on what the page is about and direct them to where they need to go.
Crop
Cropping is taking an image and cutting off the excess part if it appears too big or not important enough to include in the design. Depending upon what you are trying to emphasize more in an image, you may need to crop part of it out.
CSS
CSS (Cascading Style Sheets) describes how HTML is supposed to be laid out. CSS ensures developers have a clean, organized and uniform look for their pages. Once the style is created, it can be replicated across all other pages, making consistency much easier.
D
Debt
When a designer makes short term goals or decision in order to meet a deadline, but often what will happen is that later on the person using the end product might not have the best experience due to the designer making rushed decisions or shortcuts.
Descender
A descender is the part on the letter where it descends below the baseline of that particular character. You will commonly see this with the letters: g, y, q, and p.
Display Typeface
Text that usually displays the header on a page before the subtext or body underneath.
DPI
Dots Per Inch (DPI) is the number of dots per square inch in digital design or print. Depending on the density of dots in an image, it can have a higher or lower viewing resolution.
Drop Shadow
In design drop shadow is an affect that you give to an element that makes it look like there is a shadow or that the image is elevated. You will see drop shadows with buttons or arrows on applications or web pages.
E
Elements
Elements are what make up an image like the size, color, shape, texture, position, density, and direction are all components that make up an object.
End User
The person you are designing the end product for.
EPS
EPS stands for Encapsulated PostScript and is used when you want to print high resolution illustrations. EPS files are usually created in Adobe Illustrator.
Eye Tracking
Eye tracking is when you are measuring a users eye motion and where they focus most when viewing a webpage or other design format.
F
Feathering
It’s another way of creating transparency to a design. This is usually applied to the outside portion of an object so that you can get a glimpse of an image underneath.
Figma App
A common product designer tool used to create designs for websites and mobile apps. Once the designs are finished, developers can use the files to create the end product.
Flat
Flat design is a minimalistic approach that focuses on being very simple. It tends to feature plenty of open space, crisp edges, bright colors, and two-dimensional images.
Flowchart
A process in wire-framing that shows what a user will do next as they are navigating through a mockup of a website or app.
Font
This refers to the text style you will see on any website or anything written online. The type of text or font that Google tends to use is Google Sans.
G
Gamification
Gamification is adding elements to a design that mimic game-like qualities to drive more user interaction and engagement. An example would be receiving a gold star after completing your 5k run on an app that tracks your distance. This helps incentivize the user to interact with the app more often.
Golden Ratio
First discovered by the Greeks, it’s when a line is divided into two parts and the longer part is divided by the smaller part to get the number 1.618.0. The idea behind following the golden ratio is that it makes designs visually pleasing to the eye.
GIF
GIF stands for Graphics Interchange Format and is an animated image.
Gradient
A color gradient is also known as a color ramp or a color progression where you start with your first initial color in a defined area and move to another. The gradient tool creates a gradual blend of several colors.
Grid
A ruler like system used to align your objects. They are made up of vertical and horizontal lines that create an easy what to make sure objects or text are positioned properly.
GUI
GUI stands for Graphical User Interface or images that represent a certain action that will take place once you tap or click on it. An example would be scroll bars, menus, icons, pointers, etc.
H
Hex
A six digit code used to represent a certain color. For example, black has a hex code of 000000 and white a hex code of FFFFFF. These are commonly used in Sketch and Figma when designing.
Hierarchy
A process of creating what is most important to the least important. It helps give order to a design and what a user should focus on.
Hue
Hue is the pure color. Basically, it’s just away to describe a color. Yellow, blue, and orange are all different hues.
High Fidelities
High fidelities refer to when actual color gets added to what was once a wireframe or general outline of a design. This is where things start to come to life and it looks like a functioning webpage or app.
I
Icon
A small image used to represent an action a user is supposed to take to get them to their destination. An example is the search icon you will see next to asearch engine box online.
iOS
A mobile operating system that was created by Apple.
Iteration
Iteration in design is where you are constantly changing, testing, and reiterating a particular design layout until it makes sense to the user.
J
JPEG
A compressed digital image that makes the file smaller and is commonly used for photo storage.
K
Kerning
The distance between letters in a word.
Knolling
Knolling is where a you are arranging objects so that they are either at a 90 degree angle or are parallel to each other.
L
Landing Page
A landing page or what is commonly referred to as the home page is the first page a user will see once they visit a website or application.
Leading
The line height or spacing between two lines of text.
Logo
A symbol or graphic created that represents or promotes your business.
Logo Mark
This is just a design that is centered around a brands actual name. For instance, the swoosh image for Nike would be the logo mark for that company.
Lorum Ipsum
Lorem Ipsum is basically dummy text used in design that will eventually get replaced with the actual text later on once you get the proper copy established.
Lossy
When you compress an image some of the quality is lost resulting in what is referred to as lossy.
M
Navigation/Menu
A series of linked items that helps direct the user between the different pages on an application or webpage. The navigation is usually located at the top of any app or webpage.
Margins
Margins are the spacing between important elements in a design, such as on a website. Usually you will see this between the outer most part of a website and where you have the main hero image.
Microcopy
Bit sized content on a webpage or application that helps guide the user. This can be text in buttons, thank you pages, captions, tooltips, error messages, small print below pages, etc. Good microcopy is compact, clear, and easily delights the user.
Midline
Midline or mean line is the imaginary line where all non-ascending letters stop.
Mockup
A mockup is a prototype that provides at least part of the functionality of a system and helps with testing a design.
Monochrome
Monochrome is a color palette made up of various different shades and tones of a single color. It’s important to note that while grayscale is monochrome, monochrome is not necessarily greyscale — monochrome images can be made up of any color, like the different shades of orange.
Monospace
A monospaced typeface is a typeface where each character is the same width, all using the same amount of horizontal space. They can be called fixed-width or non-proportional typefaces.
Moodboard
The starting point for a lot of designers, a moodboard is a way for designers to collect together lots of visual references or ideas for a new design project. Photos, images or typography would all be elements you could use to create a moodboard. They are used to develop the project’s aesthetic, for inspiration or to help communicate a particular idea.
MVP
This stands for Minimal Viable Product. The main purpose of an MVP is to collect enough information about a product that will help the designer later on with fleshing out the project. The document states the bare minimum a product needs to get into production.
O
Opacity
Often referred to as “transparency” this is the amount of light you let travel through on object. Adjusting opacity allows you to fade, blend, brighten, or layer within an element.
Open Source
Open source means that you are allowed to use and modify images that you find online to fit your preferences.
Open Type
A cross-platform font file where fonts are scalable.
Orphan
A single line or letter that is by itself at the end of a paragraph, page, or column.
P
Palette
In design it’s a particular range of colors that you will use for a website or application.
Pantone
The Pantone Matching System is a standardized color scheme used for printing and graphic design. It’s used in a number of other industries including product and fashion design and manufacturing. Each color has its own individual number and name.
Portable Document Format is a file format used to represent text and images and is used when you need to save and share with another person.
Persona
A persona is a fictional character to represent a targeted audience that you are trying to design a product for to fit that demographic.
Persona Mapping
Is the creation of fictional characters that represent realistic people and what they would want out of a product. Here you would design a road map based on the targeted audiences preferences and why they would take those actions.
Pixel
Pixels are the smallest component that make up your screen and are tiny square in images that you see on your laptop or mobile phone. In design, especially if you are using Sketch or Figma, you will be using these as your base for sizing different objects.
Plug-In
This is commonly used in design. Basically, this third party extension will help increase the functionality of your designing process.
PNG
PNG stands for Portable Network Graphics and is a compressed raster graphic format. It’s used on the web and is also a popular choice for application graphics.
PPI
Pixels Per Inch (PPI) is used to describe the pixel density between images on a screen.
Prototype
A prototype is an early model or sample of what a product might look like. Generally, you will design multiple prototypes and test the concept during the beginning phases of designing and building a product.
Proximity
How objects are grouped or spaced on a page. Images that relate to each other will be closer, while ones that are not related will be spaced further apart.
Q
QA
QA stands for Quality Assurance and is a chance for the designer to review the product before it goes out to be officially tested by a user.
R
Raster
Raster images are constructed out of a set grid of pixels. Meaning, when you change the size or stretch a raster image, it will get a little blurry.
Resolution
Resolution is the detail of an image. Images with low resolution have little detail while high-resolution images have more detail. High-resolution images tend to be crisper looking, since they have more pixels per square inch compared to low-resolution images.
Responsive
An approach to web development where depending upon what device a user is viewing, the layout changes or adjusts to that screen size. Another example is when a user flips their screen horizontally, the images will adjust to that shape or if a user is zooming in on something, then that object will appear bigger.
RGB
RGB stands for red, green, and blue. These three colors are typically used to show images on a digital screen. The colors can be mixed to create any color you want.
Rule Of Thirds
The rule of thirds is a helpful way of aligning the subject of an image and making it aesthetically pleasing as possible. It involves dividing up your image using 2 horizontal lines and 2 vertical lines to create 6 squares total. You then position the important elements in this divided box along those lines, or at the points where they intersect.
S
Sans-Serif
Sans means “without,” and a sans serif font has no serifs or hooks at the end of some letters.
Saturation
The intensity of a color.
Script
Script typefaces are fonts or type based upon historical or modern handwriting styles and are more fluid than traditional typefaces.
Scale
Refers to the relative size of a design element in comparison to another one.
Serif
Serifs are the tiny lines and hooks at the end of the strokes in some letters of the alphabet.
Sketching
A quick drawing done by hand to get an idea on a piece of paper fast and is not the end product.
Skeuomorphism
A term often used in user interface design to describe interface objects that mimic their real-world counterparts in how they appear and how a person can interact with them.
Slab-Serif
Slab serif is identified by thick, block-like serifs.
Sprint
Sprints are the main feature of the Scrum / Agile framework. Sprints are short periods of time in which goals are laid out for a scrum team to complete by the end of the sprint. They usually last for no more than a few weeks and occur in stages such as: planning, design, development, implementations, testing, deploy, then review and repeat.
Stem
A vertical stroke in a letterform. Can be found in both lowercase and uppercase letters.
Stock Photo
A place you can go to retrieve licensed images for mass use when designing websites, blogs, mobile apps, etc. If you don’t have an onsite photographer, popular sites to visit for stock photos are Unsplash, Pixabay, and Pexels.
Storyboard
A visual representation of a user’s experience with a product or problem. They are usually frames laid out in such a way that documents the overall journey a user takes to a final destination.
Stroke
A feature used to adjust the thickness, width, color, or style of a lines path.
Style Guide
A style guide is an established rule book that has certain colors, fonts, and icons used for a particular design. This helps make sure everything stays consistent and uniform brand-wise.
SVG
SVG stands for Scalable Vector Graphic. It’s a file format that helps display vector images on a website. Developers will commonly ask designers for SVG files so that they can easily show that image in their codebase.
Symmetry
Symmetry refers to a sense of harmonious balance and proportion to an overall design when viewed.
T
Template
A template is a set of designs that are consistent. When designing a website you want to make sure everything stays on brand and templates create a space for this.
Texture
The surface characteristic of a particular design, such as smooth or rough.
Thumbnail
A smaller image of an object in order to give the person reviewing the design a quick representation.
Thumbnail Sketch
Sketches or drawings that are done very quickly to get an idea on paper with no corrections.
Tint
A lighter or darker version of a particular color.
Tracking
Tracking is when you are loosening or tightening a chosen set of text.
Triadic
Color schemes that are evenly spaced around a color wheel to create contrasting shades.
Typeface
A set of characters, such as letters and numbers that all share the same design.
Typography
Is the art of arranging groups of letters, numbers, and characters that share the same typeface into something that is pleasing to the eye.
U
UI
UI or User Interface, are the actually assets or buttons a user interacts with to get to a specific destination within an app or website. This is the more physical journey rather than the more psychological experience of UX.
Usability
Here is where you are taking into account how a user interacts with a certain design. Is the app or website you designed for the user intuitive, safe, and effective at getting them to navigate easily through?
User flow
The journey the user takes from start to finish, for instance purchasing an item at a checkout successfully.
UX
UX stands for User Experience and refers the series of steps a user takes to accomplish a goal within a website or app. It’s more about the psychology of why they do what they do with a piece of digital technology and what that overall experience is like for them.
V
Vector
An image made up of points, lines, and curves that are based upon mathematical equations, rather than solid colored square pixels. The beauty of a vector image is that when you zoom in you are not seeing pixels but clean smooth lines.
W
Watermark
A watermark is an image that represents a company, in other words, your logo. You will commonly see watermarks on stickers, water bottles, T-Shirts, bags, etc.
Weight
Adding weight to an objects makes it appear heavier. Different ways to add weight are giving thickness to a line, or deepening the color of an object. All these varied factors can make an image look fuller.
Whitespace
The open space between objects or what is commonly called negative white space. There are no elements occupying that area.
Widow
A widow is a very short line or one word, that is located at the very end of a paragraph or column.
Wire Frames
The outline or bare bones of what a website or app might look like. There is little to no color added to the sequence and its sole purpose is to show what each element’s sole purpose is. Think of a house being built where all you have is the skeleton but none of its fixtures that make it an actual place to inhabit.
X
X-height
Refers to the distance on the x-axis between the baseline of a letter and it’s uppermost top, basically how tall a typeface is for a letter.
Z
ZIP
A zipped file is a compressed version of a file. To zip a file or to send a zip is sending a smaller, compressed version of a file so they can be transferred more quickly & easily, such as by email.
All definitions were crafted with help from the following sites:
https://careerfoundry.com/en/blog/ux-design/ux-design-glossary/
https://99designs.com/blog/tips/15-descriptive-design-words-you-should-know/
https://buffer.com/library/53-design-terms-explained-for-marketers/
https://www.smashingmagazine.com/2009/05/web-design-industry-jargon-glossary-and-resources/
As ever, QuarkWorks is available to help with any software application project — web, mobile, and more! If you are interested in our services you can check out our website. We would love to answer any questions you have! Just reach out to us on our Twitter, Facebook, LinkedIn, or Instagram.
