The digital design field has seen an increase in popularity in the last few years, especially in the tech world. Start-ups creating the next big app want to make sure they know what their future users want, how they’ll interact with their program, and what will draw people in. Whether working on the user experience (UX) or user interface (UI) side, it’s a digital designer’s role to answer these questions and create a seamless product experience. Here, we’ll go over some common terms used in the world of digital design and tell you how you can get the UX tools you need to take the next step to pursuing a career in the field.
25 Digital Design Terms You Should Know
- 3-Click Rule: Long considered to be an unofficial rule of web design, the 3-click rule states that a user should be able to find whatever they’re looking for on your website in three clicks (or taps if they’re on mobile). The logic behind this rule is that if it takes longer than that to find what they’re looking for, then the user will get fed up and leave. This assumption has since been challenged, with some asserting that more clicks doesn’t necessarily translate to more frustration as long as a site is usable.
- A/B Testing: A/B testing basically means comparing two different versions of digital content side by side to see which one delivers the best results, i.e., which web page leads to higher conversion rates and thereby more revenue. This technique is regularly used in advertising and marketing strategies.
- Accessibility: Developments in technology have made websites and digital products more accessible than ever to those living with disabilities. In digital design terms, accessibility has to do with how well someone with a disability can access and navigate your site or app. Accessibility must be built into the design of the product, so responsibility falls on designers and developers equally to integrate those standards. Examples of accessible design include alternate text for images that can be used by screen readers, designing for users who are colorblind, the ability to make text or images larger for those with visual impairments, and so on.
- Breadcrumb (navigation): A navigation aid that helps the user keep track of where they are on a website, usually linked back to previous pages. It could look something like: Home > About Us > Board > John Smith.
- Call to Action (CTA): The part of a web page or piece of content that tells the reader or user what it is you want them to do. That could be signing up for an email list, buying your new online course, or signing up for a workshop. The CTA is typically a link or button that enables the person to take that next step.
- Conversion Rate: This is the rate at which the visitors to a website complete a desired action on that site. For example, signing up for an email newsletter. If 100 people visit your page, and 66 sign up for that newsletter, the conversion rate for that page would be 66 percent.
- Dots Per Inch (DPI): A term used to measure the resolution of an online or print image, DPI refers to the amount of dots that can fit into a linear inch of that image. This is not to be confused with dots per square inch and is not the same as pixels per inch (PPI). PPI refers to the number of pixels in an inch of screen while DPI refers to dots of ink.
- F-Shaped Pattern: This refers to the most common way a user’s eyes scan a page. First recorded in an eye tracking study by the Nielsen Norman Group, it shows that users will scan very quickly over the content of a web page or other piece of digital content. They will usually read the entire first line, then scan down the left side of the page until they find something of interest, then scan to the right. As their eyes drop down, this forms a rough “F” shape. UX designers have taken advantage of this knowledge to design pieces of content around it.
- Fitts’ Law: A widely-applied concept in both UX and UI design, Fitts’ Law states that the time it takes for someone to move a pointer (such as a mouse cursor) to an area can be measured by the distance’s size divided by the target area (where you want your cursor to end up/where you want to click). Therefore, the smaller the target and the longer the distance across the web page to reach it, the longer it takes. This applies to rapid movements, not continuous motion, so fast movements coupled with a small target produce larger error rates. This law was developed in 1954 by psychologist Paul Fitts’ examination of the human motor system.
- Fixed-Width vs. Fluid vs. Responsive Layout: Referring to the layout of web pages, fixed-width pages don’t change their content when a page is resized. Fluid ones adapt their text and graphics according to the size of the browser window to be proportionately the same. Responsive layouts mix fluid and adaptive layout principles, keeping proportions the same until the window reaches a certain size, then displaying a different page layout optimized for that window size.
- Gestalt Principles: When applied to digital design, these are a set of rules that attempt to define how people perceive the visual elements of a design, whether that’s an app layout or a web page. There are four key ideas used mainly in UI design: emergence (people identify things first in their general outlines), reification (people can recognize an object even if parts of it aren’t there), multi-stability (interpreting ambiguous objects in multiple ways), and invariance (people’s ability to recognize a simple object regardless of rotation, scale, or translation).
- Grid: A method of design which lays out elements in grid form. Designers use this method to help provide a structure to their design which a user can easily navigate, whether in print or online. It makes organizing elements like type, and balancing design, easier for the designer. It also ensures consistency, which is important from an experience perspective.
- Hierarchy: A design system which organizes content blocks from most to least important, making it easier for individuals to scan a page.
- KPIs: This stands for “Key Performance Indicators.” KPIs are used to measure the effectiveness and usability of a site by measuring metrics such as page bounce rates and user retention.
- Landing Page: Any web page on a site that the user “lands on” when they discover you. If they got there from an ad, or search result, the landing page could be different, but all of them are designed to bump up conversion rates.
- Lorem Ipsum Placeholder Content: A string of Latin words commonly used as a placeholder for actual text to mimic how text would appear in places such as a web page, flyer, or ad.
- Mental Model: A model of how a typical user would think about a website, and how they would expect it to react. Designers use this to try and predict a user’s thought process when visiting their site or using their product, and the more accurate the prediction, the more intuitive the site or app becomes.
- Microcopy: The tiny messages included in elements like search bars or form fields which make it clear to the user what’s supposed to be entered in those fields. For example, when you pull up Google Maps and search for directions, the search bar microcopy will say “search destination.” This gives the user context.
- Mockup: A detailed representation of the end product that displays its information structure and intended content while demonstrating basic functions. Mockups can be low fidelity (wireframe) or high fidelity (visual design).
- MVP: A barebones version of a product not yet running all the features, but enough to be used for user testing. Stands for “Minimum Viable Product.” This phase can also be used for demonstration and provide more in-depth test data before further developments are made.
- Prototype: A representation of the final product. A prototype should be capable of simulating user interactions with its interface.
- RGB and HEX: Two different systems for expressing color as numerical values. RGB stands for “Red, Green, Blue” and HEX identifies each color with a hexadecimal code, always beginning with a “#” sign. RGB values are expressed using numbers which correspond to the amount of red, green, or blue in each color on a scale from 0 color to 255 (full color). HEX values are made up of three sets of character pairs for each six-digit value.
- Skeuomorphism vs. Flat: These are two different design styles commonly used in app interfaces. Skeuomorphic design is hyper-realistic and features elements like drop-shadows, gradients for depth, and making icons as close as possible to their real-world counterparts. Flat design, conversely, is minimalist and reduces icons and interfaces to their barest symbolic representation.
- White or Negative Space: Blank space around type or graphics used to emphasize them. This can also be used to create shapes out of negative space using the outlines of other objects (as with the arrow in FedEx’s logo).
- Wireframe: The underlying skeleton of a product that focuses on the overall UX aspect. Think of this as a blueprint outlining all the different elements of a digital product will be laid out as well as how the user will interact with them.
Interested in Learning More?
If 25 digital design terms weren’t enough for you and you’re fascinated by the world of UX, a career as a digital designer may be right for you. As a student of Lesley University’s online BS in Design for User Experience program, you’ll learn to solve real problems and make designs that inspire and influence. Develop the critical thinking and conceptual skills you need to design intuitive experiences for multiple products, services, and systems.
Our skilled and experienced faculty will teach will prepare you for a career in the in-demand field of digital design. Plus, our online format makes it so you can balance your education with your life.
