Knowing one's way around UX, UI and several design terms can help ease the pressure a little for new designers, not to forget, the confidence to freely engage in design conversations, networking, hiring designers, or collaborating with design agencies/teams.
We’ve collected and put together a list of all possible terminologies and jargon that are often used in all things UX to help new designers, people who with designers, also for those looking to know about design, to become a part of conversations, or simply attempt to understand them!
1080p: is a commonly accepted standard in digital resolution among digital displays. It is a jargon term referring to 1920 pixels in width and 1080 pixels in height with the p meaning progressive video.
720p: is a progressive HDTV signal format with 720 horizontal lines and an aspect ratio (AR) of 16:9 (1.78:1). HDTV broadcasting standards include a 720p format which has a resolution of 1280×720.
Accented edges: this is a brush stroke filter available in Adobe Photoshop and Illustrator. It accentuates the edges of an image.
Adobe XD: is one of the most popular UX and UI design tools. Part of the Adobe Creative Cloud suite, it’s a vector-based design tool used for creating wireframes, prototypes, animations, and UI designs.
Alignment: is the position of text or graphics, whether left, right, centered, or fully justified.
Adaptive: the interface is a collection of layouts designed specifically for different devices. it detects the device type being used and displays the layout designed for it.
Agile: an incremental approach to software development. Instead of building the entire product at once, it breaks it down into smaller bits of user functionality and assigns them to bi-weekly cycles, calling them “iterations.”
Analytics: measures human behavior on a site.
AJAX: stands for Asynchronous JavaScript and XML. It is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on.
Anti-aliasing: is the smoothing of the jagged appearance of diagonal lines in a bitmapped image. The pixels that surround the edges of the line are changed to varying shades of gray or color to blend the sharp edge into the background. This technique is also called "dithering.”
Abstract mark: this is a logo that uses the emotive qualities of color and form to convey your brand. It is the use of shapes to represent a brand.
API: or Application Programming Interfaces, are pieces of software that help different applications communicate with each other.
Avatar: represents users online who have not uploaded an image for themselves.
- Affordance: is the property or feature of an object that presents a prompt on what can be done with the object.
Explicit (obvious) affordance: is based on widely known and typical prompts that direct the user to a particular action.
Implicit (hidden) affordance: is hidden and may be revealed only in a particular flow of users’ actions.
Animated affordance: when applied to user interfaces create a strong connection between the physical and virtual world. It mostly imitates interaction with real things.
ALT text: in HTML, it is a short text description of an image. It is added to aid non-graphical browsers and appears if the image cannot be displayed.
A/B testing: also known as split testing, it is the practice of comparing two versions of a web page with a single variable online to determine which one performs better. Assistive technology: any technology or product designed to assist an individual with a disability in using a website or application.
Accessibility: this is the ability of a website to be used by people with disabilities, including visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities.
Animation: is a simulation of movement by the rapid appearance of images in sequence.
App icons: are interactive brand signs that present the app on different platforms by supporting the original identity of the product.
Ascender: the part of a lowercase letter that rises above the main body of the letter.
Anchor text: is the text a link uses to refer to a site. It can make a big difference in a site’s search engine results.
Automagically: is a combination of the words “automatically” and “magically.” It refers to something that has a complex technical process that’s hidden from users so that something almost appears to work by magic.
Accordion: in UI design, it is a type of menu that vertically stacks items that let the user expand and collapse the content.
- Balance: involves the placement of elements on a page so that the text, as well as the graphic elements, are evenly distributed. There are three ways of achieving balance: symmetrically, asymmetrically, and radially.
- Symmetrically: is achieved when all design elements are equal on both sides of a central line.
- Asymmetrically: is when graphics and text are not equal on both sides of a central line.
- Radially: is when the elements radiate from a central point, creating balance.
Brand guidelines: consist of the rules and guidelines needed for using graphical elements of a brand (e.g., logo, brandmark, typography). They are commonly compiled into a corporate identity manual.
Brand identity: includes all of the visual elements (e.g., logo, colors, typography) an organization uses to visually represent itself to its users.
Brand mark: a symbol or graphic element that is used in the logo. It is usually isolated without any words or letters.
Back-end development: Back-end powers the front-end but isn’t necessarily visible. It generally includes the information structure, applications, and CMS controlling content on the site.
- Bar: a section of the user interfaces with clickable elements that enable users to quickly take some core steps of interaction with the product. It can also inform the user about the current stage of a process. Some of the basic bar types include —
- Tab bar: appears in mobile applications, at the bottom of an app screen, and provides the ability to quickly switch between different sections of the app.
- Loading bar: the control which informs the user of the current stage of action, wherein the process is active, and the user can see the flow via timing or percentage shown in progress.
- Progress bar: provides feedback on a result of a process that’s running live. For example, showing how much of the planned activity has been done.
Button: the element that enables a user to get appropriate interactive feedback from the system within a particular command.
Body text: is the main written content of a page.
Banner: typically located at the top of a page or in a sidebar, they are advertisements that link to other websites.
Baseline: used in typography, it is the imaginary line upon which a line of the text rests.
Benchmark testing: testing an application against a set of standard best practices or pre-established criteria.
Branding: is the deliberate process of creating individuality and market value around the concept of a product name.
Branding elements: are the graphics, text, theme, etc. used to create branding.
Bleed: this is when a design actually extends past its printed edge so there’s no chance of white borders when it’s trimmed down after printing.
Background images are images, pictures, or patterns that appear behind graphical user interface elements on a web page.
Bounded/unbounded fields: while an unbounded field is a free-form entry field, a bounded field sets the parameters for selection or entry for the user.
Breakpoint: the predetermined ranges in screen sizes that require particular changes in layouts.
Bitmapped: an image that follows a pattern of square-shaped pixels.
Bandwidth: can refer to two different things: the rate at which data can be transferred or the total amount of data allowed to be transferred from a web host during a given month (or other hosting service terms) before overage charges are applied.
Branding signs: include logos, corporate signs, and colors that are applied to the website/app giving an immediate hint about the connection of the UI to the particular brand. Acts as a strong affordance for loyal customers.
Breadcrumb trails are navigation elements that generally appear near the top of a page to show users the section hierarchy of the current page.
The baseline is the lowest point of all uppercase letters and most lowercase letters.
Backlinks: links from other sites back to the original owner. They’re sometimes also referred to as “trackbacks” (especially on blogs). Backlinks have a huge impact on a site's search rankings.
Bounce rate: the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages.
Browser: refers to the program a website visitor is using to view the website.
Bento menu: is a menu with gridded items. It provides an overview of multiple items at once.
Campaign identity: the visual look that is created as a specific marketing or communication collateral. It is often used for internal initiatives as well.
Container: This is a UI element designed to contain page elements to a certain width based on the size of a user’s screen.
Chatbot: lets the user ask the system questions via a chat interface.
CX: also known as customer experience, it refers to all the different interactions a user has with a brand through its different channels and products, and how the user feels about them.
Clickstream: when landing on a site, users click their way through it to complete a task. This is what a clickstream represents, i.e. - the path of clicks taken to accomplish a goal.
Contrast: is achieved by including elements within the design that look measurably different from one another. This includes the use of color, shape, texture, size, or typeface.
CSS: is a mechanism used for specifying how a web page looks without affecting its HTML structure. The styles define attributes such as color, font size, alignment, and spacing.
CSS framework: is a collection of CSS files used as the starting point to make XHTML and CSS websites quickly and painlessly. They usually contain CSS styles for typography and layout.
Checkbox: a graphical UI element that is used to mark a particular piece of content, usually setting the choice for the binary options. Checkboxes can be found at any time in a user interface, especially in sections of users, screens, or page settings.
Conversion rate: the percentage of users who complete the desired action.
CTA: a widely used abbreviation that stands for ‘call to action.’ It is a word or phrase that stimulates a user to interact with a product in the way it has been aimed and designed for.
Copy (language) affordance: image along with copy helps decode messages and avoid misunderstandings. Copy clues and prompts help users what to do/expect/what information to keep in mind, when interacting with the UI. However, it shouldn’t be overpowering and should be well-balanced along with the image.
Composite image: a graphic image that’s made up of a combination of images.
Crop: this is when a designer cuts or crops unnecessary parts of an image to improve framing, highlight a specific subject or alter the image’s aspect ratio.
Composition & layout: the arrangement of design elements to form a complete image. A successful composition entices the viewer and guides their eye across the design. In graphic design, it is often referred to as ‘layout’.
Color models: a system that helps to describe colors using numbers or letters.
- Color: the quality of an object that is caused due to the light being reflected or emitted by the specified object. It can be verified visually by measuring its properties such as hue, saturation, chromaticity, and value.
- Hue: is a pure color. It serves as a basic material that can be transformed in three different ways, i.e. - tinting, shading, and toning. Depending on the specific technique applied, a hue is modified into tint, shade, or tone.
- Tint: a hue with white added.
- Value: is the property of determining how light or dark a color is.
- Chromacity: is the purity of a hue. It is measured by the presence of white, grey, or black in a color.
- Tone: is a hue with gray added.
- Shade: is a hue with black added.
- Saturation: is how a color looks under different lighting conditions. It describes how bold or pale color is according to its look in daylight and weak light. Saturation is often referred to as the intensity of a color.
- Color codes: are a way for computers to read, interpret and display or print a color correctly. The most common color code formats include CMYK, HEX, PMS, and RGB.
- CMYK (Cyan, Magenta, Yellow, Black): The four basic subtractive process colors used in printing. Designers most commonly use CMYK when printing full-color brochures, flyers, posters, and related print materials.
- HEX: Designers use HEX colors in web design. HEX is a six-digital combination of numbers and letters that tells the computer exactly how to display the color.
- PMS (Pantone Matching System): Designers and printers use the Pantone Matching System (PMS). Designers often use PMS codes when printing items with one or two colors only.
- RGB: Designers use RGB for displaying colors on screens (i.e., RGB isn’t used for printing onto paper), including on computers, mobile devices, and TVs.
Color theory: consider the psychology, legibility, and culture of colors to see which best supports a message across diverse cultures, global regions, and learning styles. It also considers the colors that will be easiest to read for audiences with varying vision abilities.
Color Wheel: consists of multiple colors and helps to understand how different colors relate to each other and how they can be combined. It is built of primary, secondary, and tertiary colors which are also known as hues.
Color depth: the number of colors a computer screen can display, based on the number of bits per pixel.
Color palette: a small combination of colors for a new design. The UI designer will use these to visually represent the brand, be visually pleasing and communicate different information.
- Color schemes: help define color balance. It is vital in design as users draw impressions of a website/app on the very first look, and color plays a big influence on it. Designers define basic color schemes or color harmony to see which works the most effectively.
- Monochromatic: is based on a single color with varied tones and shades of it.
- Analogous: is used for designs where there is no need for contrast, including the background of web pages and banners. Analogous harmony is created by using colors located next to each other on the color wheel.
- Opacity: is synonymous with non-transparency. The more transparent an image, the lower its opacity.
- Complementary: is the mix of colors placed in front of each other on the color wheel. It is opposite to analogous and monochromatic as it aims to produce high contrast.
- Split-complementary: is similar to complementary but with the use of more colors. The contrast for the split-complementary is less sharp than the complementary scheme. For example: if choosing the blue color, one would have to take two other colors which are adjacent to its opposite color meaning yellow and red.
- Triadic: this is when the design requires more colors. It is based on three separate colors equidistant on the color wheel. To ensure balance in this scheme, it is suggested to opt for one color as dominant and others as an accent.
- Tetradic/double complementary: is mostly used by experienced designers as it is the most difficult to balance. It uses four complementary color pairs from the wheel. When connecting the points on the chosen colors, they form a rectangle.
Cool colors: are the ones on the green-blue side of the color wheel. They are called cool colors because they give a cool, relaxed, and peaceful feel.
Counters: in typography, which we explain below in number 90, a counter is the area of a letter that is entirely or partially enclosed by a letter or symbol.
Critique: allow designers, researchers, and content strategists to come together and provide constructive criticism to improve a product.
Corporate logo: is a graphic symbol that gives visual representation to an organization. Users identify brands with their company’s logo.
Creative brief: concisely outlines the strategy for a creative project. It contains details about business needs, target audiences, brand tone of voice as well as desired outcomes - all essential elements of a strategic design process.
Clarifying icons: are aimed at explanation, visual markers that explain particular features, or marking out categories of content.
Comment: in web design terms, it is a bit of information contained in a site’s HTML or XHTML files that are ignored by the browser. Comments are used to identify different parts of the file and as reference notes.
Clickability cues: are visual indications that a given word or item on a Web page is clickable. Cues that can be used to indicate the clickability of an item include color, underlining, bullets, and arrows.
Cache/Caching: these are those files that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.
Client-side: refers to scripts that are run in a viewer’s browser, instead of on a web server (as in server-side scripts). They are generally faster to interact with, though they can take longer to load initially.
Card: group-related content side-by-side so that users don’t have to scroll through a list to find the information they are looking for.
Carousel/image carousel: a post containing more than one photo or video, which users can view by swiping left on a post through the phone app.
CMS: Content Management System is a backend tool for managing a site’s content that separates said content from the design and functionality of the site.
Design: composition, balance, proximity, alignment, repetition, contrast, white space, hierarchy.
Design patterns: in UX and UI design patterns are repeatable, reusable design components used to solve usability issues that users commonly experience.
Design systems: are a universal source of truth for the design team — a collection of design assets, guidelines, constraints, and best practices to adhere to when embarking on a new design project.
Disabled: is the form-field state that lets users know that this element isn’t currently available for interaction. It informs users that they either need to complete something else first or that this option is not available.
Design validation: is an assessment of a website's functions and elements correspondence as identified initially with the design and the end user's actual needs.
Design accessibility: looks into whether all users can access and interact with a website/product/service. It focuses on designing experiences that people with disabilities can use and access effectively.
Date or time picker: allows users to select a date and/or time from a digital calendar or clock. The chosen date or time is then formatted and put into the system.
Design workshop: a meeting of two or more individuals who collaborate to either start or finalize a design or to make progress on overcoming an obstacle to an existing design.
Deprecated: is code that is no longer included in the language specifications. Generally, this happens because it is replaced with more accessible or efficient alternatives.
Design debt: all the good design concepts or solutions that are skipped to reach short-term goals.
Döner menu icon: consists of three lines stacked on top of each other but each line descends in length. The top line is the longest, the middle line is shorter and the third line below that is even shorter.
Dribbble: is the go-to spot for all designers. It’s a social media platform that focuses on building a strong community of designers, whether for inspiration or collaboration. It’s an excellent resource for connecting with other designers or looking for feedback.
DHTML: stands for Dynamic HyperText Markup Language. DHTML fuses XHTML (or any other markup language), DOM, JavaScript (or other scripts), and CSS (or other presentation definition languages) to create interactive web content.
Dither: in GIF and certain other image formats, there is a limited color palette used for each image. Because of this, not all colors in an image are presented. It is used to approximate these colors by combining pixels of different colors side by side.
Design thinking: is a 5 stage-method designed for creative problem-solving. The steps include - empathizing, defining, ideating, prototyping, and testing.
DSM: is the abbreviation for Daily Standup Meet. It refers to internal design team meet-ups to discuss project progress, blockers, alternatives, tasks completed, and to be done.
Define: is the analysis of observations to synthesize them and define the core problems identified during the empathizing stage.
Design formats: are chosen by designers when trying to decide how to best convey a message visually. It depends on the complexity of the information, target users, and channel in which the organization will share it, i.e. - website, social media, or print collateral.
Design specs: provide detailed information on how an organization needs to design, develop and/or print its visual elements. These include required dimensions, image resolution (quality), colors, and character styles. They are especially important when designers are working with websites, software, and product developers to fit a design into an existing framework.
Descender: is the part of a lowercase letter that descends below the main body of the letter.
Data entry field: is a visually well-defined location on a page where users may type data.
Empathy maps: are collaborative tools that help us visualize user behavior, attitudes, and feelings. They are split into 4 equal quadrants containing information about what the user is saying, thinking, doing, and feeling.
Dropdown/dropdown list: these are similar to radio buttons, but they save a lot of space on the screen. The action happens when a user selects an item from a list and the menu drops down to reveal more information.
Dropdown button: this is the clickable button used in a dropdown list to reveal, a list of items.
End users: the people for whom a design is being made/implemented.
E-commerce: is a shortened name for electronic commerce. It’s the buying and selling of goods online, through websites.
Eye-tracking: enables the measuring of user eye activity using specialized tools, showing where users look and in what order.
Emblem: uses frames and shapes to enclose the company or organization name.
Elastic layout: is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed.
Element: in XML, an element is the central building block of any document. Individual elements can contain text, other elements, or both.
Entertaining & decorative icons: are aimed at providing an aesthetic appeal rather than functionality, and are often used to present seasonal features and special offers.
Embedded style: An embedded style is a CSS style written into the head of an XHTML document. It only affects the elements on that page, instead of site-wide as a separate CSS file does. Style in an embedded style sheet will override styles from the linked CSS file.
Engagement: capturing the user's attention or interest or maintaining their interaction.
Experience architecture: is a multidisciplinary approach to technology involving information architecture, interaction design, and experience design practices that aim to provide a good user experience and benefit a business.
Empathize: is the empathetic understanding of the problem statement to be solved, typically through user research.
Easing: or ease-in and ease-out, is the slow and gradual movement of an animated UI element.
Field: provide spaces for users to input necessary data. It is primarily an interactive element.
Front-end development: front-end is what is visible. Think buttons, text, beautiful colors, and the layers seen on the screen when interacting with a product.
Fold: is defined as the lowest point where a Web page is no longer visible on a computer monitor or screen.
Full-stack designer: a designer who has the skills and know-how to take on all the “stacks” (or layers) of the product design and development process.
Fixed-width layout: has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers.
Font: a particular size, weight, and style of a typeface.
Font spacing: the vertical and horizontal spacing of a font is often altered to change its appearance.
Favicons: are the icons that represent the product or brand in the URL line of the browser as well as in the bookmark tab.
Font weight: refers to how thick or thin (bold or light) a font looks.
Flat design: is a minimalist user interface design style. It is characterized by simple, two-dimensional elements and vibrant colors.
Focal point: is the spot on a webpage that the eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else.
Flowchart: illustrate the steps a user can take to complete a task on a product.
Feed: usually displays user activity in chronological or popular order but some are determined by an algorithm.
Figma: is a browser-based interface design tool that empowers fast design and prototyping and a smooth, collaborative workflow.
Font style: beyond spacing and case, fonts can also be altered by scale, weight, and style.
Font family: is a group designation for defining the typefaces used in CSS documents. The font family tag generally lists multiple fonts to be used and usually ends with the generic font category (such as “serif” or “sans-serif’).
- Font Cases: are primarily of two forms -
- Uppercase: the large, capital letters of a typeface.
- Lowercase: refers to the small letters of a typeface.
False affordance: is what designers should avoid. These are the wrong prompts that lead users to a different action or result, not the one which is expected behind the prompt.
Fluid UI: this is a prototyping and wireframing software tool used to design mobile touch interfaces. It comes with extensive component libraries, easy animations, and real-time collaboration options.
Footer: design elements repeated at the bottom of every page.
Font weight: specifies the boldness of a font.
Font color: the color of the text.
Font size: the height of a font measured in points.
Font readability: how easy or difficult it is to read a collection of words in a specific type style.
Form: refers to an object’s shape and surface qualities giving a 3-dimensional aspect to the object.
Fluid layout: is when a page contract and expands horizontally inside a person's web browser despite the size of the browser window or the resolution of the monitor.
- File types: are used for putting the correct graphic or image file type, suitable for the intended purpose. Opting for the wrong file type could make the resultant image fuzzy on a website or a graphic that doesn’t display clearly in an email or a poor brochure print. Some of the most frequently used file types are -
- AI: Adobe Illustrator design files, type of native file, contains vector images.
- EPS: Includes individual vector design elements that make up larger vector images
- GIF: Animated images, pixel-based
- INDD: Adobe InDesign design file, a type of native file
- JPG: Used for quick design previews and web and print photos, pixel-based
- PDF: Used for print files and web-based documents, contains vector images
- PNG: Transparent images (i.e., no background), pixel-based
- PSD: Adobe Photoshop design files, type of native file, pixel-based
- SVG: Used for web publishing, contains vector images
- TIFF: Used for high-quality printed graphics, pixel-based
Gradient: this is a popular design trend that slowly and gradually blends from one color to another color and sometimes to additional color(s). They are versatile and modern, adding depth to the design, and can be both bold and subtle to capture the user’s attention.
Gutters: are the vertical strips between columns in grids that are used to prevent elements from bumping into each other.
Gestalt principles are a set of psychological laws that define people who do not visually perceive items in isolation but as part of a larger whole. They can be used to inform design decisions and shape a user’s interaction with a product. These principles include human tendencies towards similarity, proximity, continuity, and closure.
Graphic elements: are elements of a user interface that displays information or can be manipulated by the user to pursue a task.
Graphical user interface: also referred to by its acronym: GUI, it uses an input device (like the mouse) and visual representations of how the user can interact with a web application.
Gamification: is the process of integrating game-design elements and principles into products to drive user engagement.
Grids: a series of intersecting vertical, horizontal, angular, or curved lines used to organize graphic elements on a page, as well as about one another.
Graphic affordance: is presented with visuals applied to an interface and helping users scan its functionality. Graphics of all kinds are perceived quicker and can easily be memorized compared to copy.
Hierarchy: this is a UI design principle used to present information with different levels of emphasis according to its importance.
Heat map: a graphical representation of the areas on your product that receive the most user attention.
Hamburger button: the button that hides the menu; clicking or tapping on it, shows the menu expansion. It is called so because its form consists of three horizontal lines that look like a typical bread-meat-bread hamburger.
Human-computer interaction: is a field of study concerned with the design and use of computer technology. It explores how people interact with interfaces and computers today.
HTML: stands for HyperText Markup Language. It is the standard coding language for websites that creates all of the fonts, colors, graphics, and links that are seen online.
HTML tag: also referred to as an HTML element, it is the bit of code that describes how that particular piece of the web page it’s on is formatted.
High-fidelity prototype: an interactive prototype that simulates the real system or site's functionality and design details.
A hyperlink is a link from one web page to another, either on the same site or another one. Generally, these are text or images and are highlighted in some way (text is often underlined or put in a different color or font weight).
Hypertext: any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.
Hybrid-navigation model: is a combination of navigation structures that incorporate some combination of components possibly including sequential and/or hierarchical IA designs.
Header: design elements repeated at the top of every page.
Icons: help organizations visually convey meaning to help audiences quickly understand a message. They are several images that work as symbols that are universally understood.
Information Architecture: is the practice of arranging content in a product in an understandable manner. It involves organizing the content users interact with, as well as the different structures, such as the website’s navigation, needed to interact with it.
Icon graphic: an image that is usually interactive and represents an object or action or marker for entry into information.
Inline validation: if a user has successfully or unsuccessfully completed a field, this form-field state usually appears with a green tick or a red X.
Image links: a clickable image hyperlinked for internal linking and website navigation without supporting text.
Interactive icons: are the ones that are directly involved in the interaction process. They are clickable or tappable and respond to the user's request of doing the action symbolized by them.
Ideate: looking for alternative ways to view the problem and identify innovative solutions to the problem statement created during the define stage.
Image placeholders are texts that provide users with descriptive information about a graphic while it is downloading.
Interaction design: or IxD, is the practice of designing interactive digital products and considering how users will interact with them.
Interface: a view or digital presentation of an object or program.
Iterations: the practice of breaking down development into small parts.
Illustrations: Theme illustrations and mascots have the potential of giving clear and distinct prompts to users regarding what to expect.
InVision Studio: is another powerful tool that all designers should be familiar with. It includes features and functions for drawing, wireframing, prototyping, and animating.
Input control: these are the interactive elements used on any interface. These include checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, and date fields.
Input fields are a place where users can enter content into a system.
Informational components: in UI design, these are elements that tell users what’s going on.
JavaScript: the third pillar, that defines how both the HTML and CSS should behave.
Kerning: the adjustment of space between pairs of letters in the same word.
Kebab menu: consists of three vertical dots that represent a set of grouped options for a user to navigate.
KPIs: or Key Performance Indicators are measurable values that help us understand and track how well a product is doing.
Logo types: include abstract marks, emblems, letter marks, pictorial marks, mascots, and wordmarks.
The logo is a symbol or a small design used by companies, brands, organizations – anyone – to identify their products.
Links: words or images that can take users to another page.
Loremipsum: also known as ‘dummy text’ is used as a placeholder that will be swapped out later with an actual copy.
Layout graphics are graphic elements that serve to delineate, divide or identify content on a webpage.
Link farm: any website set up specifically to increase the link popularity of other websites by increasing the number of incoming links to that site.
Landing page: a single page that appears in response to search engine results. It is used for lead generation.
Lettermark: Features one or more stylized letters (for example, a company’s initials) to identify the brand.
Line height: or leading pronounced “ledding,” is the space between two lines of text.
Lean UX: Lean UX, similar to Agile, is a collaborative user-centric approach that prioritizes “learning loops” (building, learning, and measuring through iterations) over design documentation.
List boxes: allow users to check single or multiple items at a time. They are great for saving space on a screen as they are compact and can carry a long list of options for the user.
Low-fidelity prototypes: are low-cost, illustrated designs or concepts usually sketched on paper or created as flat images.
Liquid layout: is one that is based on percentages of the browser window’s size. The layout of the site will change with the width of the browser, even if the visitor changes their browser size while viewing the page.
Loader or loading bar: are designed to let users know how long an action will take to complete, instructing us to wait or be patient. They come in different shapes and sizes.
Menu: a core navigation element. It is a graphical control that presents options for interactions with the interface. It can be a list of commands (save, delete, buy, send) or a categorization of organized content in the given interface.
Mobile web: refers to jumping online on a mobile device.
Median or x-height: fonts are where most lowercase letters should reach their maximum height. It is set from the height of the x in a font.
Mascot: rely on a character or brand spokesperson to represent a business.
Mock-up: a real or digital model used to test early design ideas and see how they could look in the real world.
The masthead is the graphical banner at the top of a web page that identifies the organization or group that hosts the website. A masthead typically contains the name of the organization and site (if different) and an organizational logo.
Monospaced font: a font whose letters and characters each occupy the same amount of horizontal space.
Markup: refers to the coding applied to a text document to change it into an HTML, XML, or other Markup Language document.
Margins: are the areas sitting left and right of a grid.
Moodboard: are essentially a collage of images, text, and samples of objects in a design composition. They’re visual presentations used in the brainstorming stage of a product.
Marvel: is a design tool that promises all the core functionality you need to design and build digital products, including wireframing, prototyping, and design specs for handoff.
Material design: often called just material, is a design language developed by Google and used in Android devices.
Meatball menu: is a set of three horizontal dots. When the user clicks on the dots, more options are revealed.
Microcopy: the small bits of text one sees on apps or websites that help in navigating it. Eg: labels on buttons, error messages, placeholder text in input fields, and text on tooltips.
Modal: message boxes are also known as modal windows and they work in the same way.
Message box: this is a small window that pops up, providing information to users and asking them to take action before they can move to the next step.
MVP: or Minimum Viable Product, refers to the essential set of features we can launch a product with to get the ball rolling.
Negative affordance: give users a prompt that some elements or operations are inactive at the moment.
Native file: an original design file where a designer creates a graphic or image, such as Photoshop (PSD) or InDesign (INDD). It generally includes design elements like layers, and text styling and cannot be edited in other software programs, such as PowerPoint.
Navigation: is defined as the set of actions and techniques that guide users through an app or website, enabling them to fulfill their goals by successfully interacting with the product.
Navigation design: this is a design phase that interprets information architecture and task flows into wireframes or mockups to demonstrate and test the site structure and visual direction.
Navigational components: are elements that allow the user to interact with and use a product.
Notifications: are designed to provide hints to the user about something being missed out on or requiring attention.
Neutral colors are absent on the color wheel and include the colors gray, brown, and beige.
Navigation bar: is a set of links repeated on each page that often includes links to pages like “About us”, “Products,” “Contact us” and “Testimonials.”
Open-source: is available for public use, and free. It can be used, modified, and build with it without running into trouble.
On-hover: this is the form-field state that occurs when the user’s cursor hovers above the form field. Users won’t see this option on mobile, touch, or swipe devices.
Origami Studio: is a free design tool that was created by Facebook. It’s primarily a prototyping tool, enabling designers to rapidly build and share interactive interfaces. However, it’s not recommended for beginners.
Picker: allows users to pick the point from the row of options. It usually includes one or several scrollable lists of distinct values.
Plus button: the button that is clicked or tapped to present the user with the ability to add new content.
Pristine: is the default form-field state before a user interacts with it.
Panels: these are visually and thematically defined sections of a Web page. They are frequently placed in the left and right margins of pages and often contain navigation aids, including related links. Content is not usually placed in left or right panels.
Persona: is a representation of the target user. They aren’t necessarily a real individual but are constructed using real information and data based on real users.
Photoshop 3D: this is a palette used in Adobe Photoshop.
Paper prototyping: this is a prototyping method in which paper models are used to simulate computer or web applications.
Page view: a request for an entire web page document from a server by a visitor’s browser.
Photos: Theme photos, item photos, avatars, and title pictures presents visual support, and provide information on what users can do with the app or website.
Pictorial marks are non-abstract, visual icons that represent your company name or service.
Permalink: short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post.
Parallel design: is a design methodology that involves several designers pursuing the same effort simultaneously, but independently, to combine the best aspects of each for the ultimate solution.
Point size: the size of the text. There are approximately 72 (72.272) points in one inch.
Prototype: a preliminary model of a product used for testing.
Proximity: is how design elements are grouped or spaced on a page.
Page flow: a hierarchy or sequence suggested by the arrangement of elements on a page.
Page density: is a measure of the percentage of the screen that is filled with text and graphics.
Page templates: are predefined layouts or formats for sets of common web pages.
Page title: refers to the text located in the browser title bar (this is the bar found at the very top of the screen of common browsers).
Paging: this is a website design methodology that requires users to follow a series of "next page" links to read an entire article. Moving from page to page is an alternative to scrolling through long pages.
Physical consistency: refers to the "look and feel" of a website. Physically consistent web pages have logos, headers, and navigation elements all located in the same place. The pages also use the same fonts and graphic elements across all pages on the site.
Pagination: dividing information into separate sequentially numbered or linked pages.
Product design: is the design of consumer products that consider usability, human factors, ergonomics, and appearance while still maintaining function.
Pixels: are tiny colored squares that combine to form a picture. An image with more pixels per inch is of higher resolution. Raster images (different from vector images) use pixels. Raster images cannot scale up or down without losing quality in the way vector images can. Common file formats that use pixels are JPG, PNG, GIF, TIFF, and PSD.
Pattern affordance: is based on the power of habit and presents a huge factor in effective interaction design.
Proportional font: a type with spacing apportioned according to the shape and width of the character.
Palette: the range of colors used in a design. These are colors that work well together and are often aesthetically pleasing.
Progress bars: are used to visually tell a user where they are in a multi-step process.
ProtoPie: is a flexible yet powerful prototyping tool praised among the design community for its easy-to-use interface and almost non-existent learning curve.
Progressive enhancement is a strategy for web design that uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Primary colors: three pigment colors that cannot be formed by any combination of other colors. They serve as the base of the whole color system. A subtractive system is based on cyan, magenta, and yellow, while red, green, and blue colors form the additive system. And the painting system RYB includes red, yellow, and blue.
Primary buttons: if there are multiple CTAs on a screen, the primary button informs which action is the most important.
Pseudo element: an element used to add a special effect to certain selectors.
Padding: is the spacing inside grid columns and it acts like a cushion around the edges. It allows for more breathing space in a design
Repetition: helps give a design a unified look. Designers often repeat elements throughout a design for the same.
Resolution: refers to the physical number of pixels displayed on a screen (such as 1280x1024).
Radio button: is a screen-based control used to select one item from a list of mutually-exclusive items (i.e., use radio buttons when only one item in a list of several items can be selected).
Rapid prototyping: quickly generating mockups of what a system will look like to facilitate internal review or testing.
Readability: the degree to which users can easily and accurately read the information on a web pa:e.
Rollovers: are state changes that involve one element being replaced by another upon the mouse going over it.
Responsive design: websites that adapt to fit the device they are being displayed on. They are designed in a single layout that shrinks and stretches and rearranges the content to be easily viewed on each device type.
Refactoring: this is the process of cleaning up and tidying code without affecting functionality, essentially increasing its quality. It isn’t done all at once but rather in small, incremental steps.
Rule of thirds: this is a technique that designers use to determine a focal point. Using a grid of three rows and columns, a focal point is indicated at the junction where the lines converge.
Regular critique: this happens in a group setting, the wider team will sit and discuss the design journey of the product.
RSS: also referred to as Really Simple Syndication is a standardized XML format that allows content to be syndicated from one site to another. It’s most commonly used on blogs. RSS also allows visitors to subscribe to a blog or other site and receive updates via a feed reader.
Switch: a control that lets users switch an option on or off. Modern interfaces present a direct imitation of switches that people use in real life. Like checkboxes, switches too can be found in any type of user interface, especially in the sections of user, screen, or page settings.
Style sheet: a set of statements that specify the presentation of a document. It may have three different origins: they may be written by content providers, created by users, or built into browsers or plug-ins.
Selected/focused: when a user interacts with the form, this form-field state tells them to input information. It should be visually different from other form field states.
Share button: the button that enables a user to share some content or achievement directly to social networking accounts.
Silent critique: using post-it notes on a whiteboard, your colleagues will write feedback as a question.
SaaS: Software as a Service, is a software distribution model in which software is licensed on a subscription basis and hosted on external servers.
SDK: is a software package that contains the tools required to develop products for a specific platform or operating system. They help expedite the development process by providing “parts” developers can use instead of having to write the code for them from scratch.
SEO: search engine optimization is the process of increasing a website’s visibility in free, or organic, search results. It often involves writing useful content on a website around words and phrases users use in searches related to the brand’s product or service.
Site map: a visual representation of a website’s pages and hierarchy.
Sketching: this is a quick freehand drawing intended to help us brainstorm and jot down ideas. Sketches aren’t really polished or finished products — they are similar to visual note-taking.
Sketch: is a vector graphics editor used for drawing, wireframing, prototyping, and design handoff — essentially everything needed to bring designs to life.
Scrum: an agile software development framework.
Sprints: in agile software development, we call defined periods of time assigned to complete certain tasks “sprints.”
Storyboard: a visual representation of a user’s experience with a product or problem space.
Secondary button: is still an important CTA but it is less important than the primary button. It should be less visually dominant and should not clash with the image or appearance of the primary.
Small caps: or ‘small capitals’ are uppercase characters that are the same height as lowercase letters. They are used to prevent capitalized words from appearing too large on the page.
Secondary colors: appear by the combination of two primary colors. As each system has different basic colors, the secondary colors vary too. Here’s a schematic explanation of secondary colors appearing in each system -
RGB
green+red = yellow
red+blue = magenta
blue+green = cyan
CMYK
yellow +magenta = red
magenta+cyan = blue
cyan+yellow = green
RYB
yellow+red = orange
red+blue = purple
blue+yellow = green
Search field: often called a search box or search bar, it presents the interface elements that enable a user to type keywords that in turn help locate pieces of content being looked for.
The sidebar is the left or right-hand column of a page typically used for either vertical navigation links or advertising. May also contain site search, subscription links, or social media buttons.
Scale: the size of an object about another object. It is used to create interest and grab a viewer’s attention.
Scroll bar: is visible along the right edge of common browsers. It is defined as a movable box that runs on a vertical or horizontal axis.
Scrolling: this is a method of traversing a Web page wherein users either roll the scroll wheel on their mouse or manually move the scroll bar located on the right side of their browser's screen.
Stock photos: are licensed images created by a third party.
Scanability: how easy it is to read and understand a body of text.
Slider controls: allows users to set or change a value.
Stepper: are quite similar to sliders, in that they let users adjust a value. However, steppers only allow users to alter a value in predefined amounts.
Scanning patterns: when planning the layout of a web page or application, designers must carefully choose the placement of important text or images to accommodate the “scanning” styles of readers. There are two types of scanning patterns — F pattern which is scanning a page horizontally and reading left to right, back to left, down, and left to right, users read in an F-shape. The other is the Z pattern which is scanning a page left to right, diagonal down, and left to right, users read in a zig-zag or Z-shape.
Specification: this is a document that offers an explicit definition and requirements for a web service or technology and generally includes how the technology is meant to be used, along with the tags, elements, and any dependencies.
Slack: is an internal messaging platform for teams. It is huge in product development.
Tertiary colors: a mix of primary and secondary colors gives tertiary colors which usually have two-word names such as red-violet or yellow-orange.
Task: a procedure that includes goals, steps, skills, start state, inputs, end state, and outputs to accomplish an activity.
Thumbnail image: a small copy of a larger image.
Tracking: is the adjustment of space for groups of letters and entire blocks of text. It affects every character in the selected text and is used to change its overall appearance.
Task analysis: is the process of listing tasks or the steps a user takes to complete any given goal from the user’s perspective. It is typically done during the early stages of product development to help in identifying and communicating problems in the user experience.
Technical debt: this is similar to design debt but takes it on the code instead of taking a toll on the design system. Products accrue technical debt whenever an easy but messy development solution is favored over a better yet more time-consuming alternative.
Type: is the very basic description of any text or lettering on a screen.
Tag: is an interactive element that is presented with a keyword or phrase to enable the user to move quickly to the items that are marked up with it.
Tab bar: a graphical navigation element that is most often placed at the top of a webpage. Effective tabs should be designed so that they resemble real-world file folder tabs.
Trim the final size of a printed piece after it has been trimmed from its page.
Typography: is how a company chooses to arrange and style letters and texts to help them look clear, easy to read, and also visually appealing. It includes several fonts, styles, and colors the company uses across all of its brand-based communications.
Thumbnail sketch: the small, rough drawings a designer creates, to explore more ideas during conceptualization.
A tagline is a phrase or short sentence placed directly below a webpage's masthead. It functions to quickly identify the purpose of the website and maybe a subtitle, an organizational motto, or a vision or purpose statement.
Target audience: the set of users for which a system is designed or intended.
Template: this is a file used to create a consistent design across a website. Templates are often used in conjunction with a CMS and contain both structural information about how a site should be set up, but also stylistic information about how the site should look.
Test: this is the rigorous testing of the prototypes to see which serves user needs the best. It is an iterative process in Design Thinking wherein teams often use the results to redefine one or more further problems.
Text fields: allow users to enter text. Used in forms or questionnaires, the users can enter single or multiple lines of text.
Toggle: buttons act like an on and off switch, allowing users to change a setting between two states.
Thumb reachability: also referred to as the rule of thumb. It is when people use their mobile phones, they can usually operate them with just their thumbs. The extent of the reach is referred to as thumb reachability.
Tooltip: when a user hovers over a certain item, a tooltip appears to explain it further.
Typeface: is the design set of lettering. It can vary in size, weight, slope, width, and so on.
Typography: is the art of lettering itself. It refers specifically to how letters are arranged and styled.
UX: or user experience is how a person interacts with a brand and its products and services and what that experience is like, for them.
UX design: involves designing experiences for a good user experience. It concerns identifying and understanding a specific user problem and designing products or services to address the problem in a way that centers the user.
UXPin: is a popular UX and UI tool, used by both new and seasoned designers alike. It is an end-to-end platform capable of delivering polished, interactive prototypes, with no coding skills required.
UI: is the interface (i.e. - a webpage or app) that a user uses to interact with a product/service. UI design is often referred to as the graphics and visual elements that are used to create appealing and easy-to-use interfaces (i.e. - colors, graphic design, visual design, typography, and layout).
User interface design: is the process of designing user interfaces. It takes care of how digital products look, feel and behave for the end user.
UI element: are all the different parts found on an interface we need to trigger specific actions or get around an app or website.
UI patterns: are reusable solutions to common usability problems in products or on the web expressed as a collection of UI elements.
Unit testing: this is the process of testing parts of an application to ensure they’re working properly. It can be done manually or can be an automated process.
Usability testing: is a research method that lets designers evaluate how easy a product is to use by testing it on a group of representative users.
Uizard: is a UI design platform for those who want to create digital products but don’t necessarily have advanced design expertise.
User-centered design: or UCD, is an iterative design framework in which users and their needs are always kept at the center of every decision.
User flow: describes the intended series of steps a user needs to take to complete a goal on a product. They often include a name, steps, and a description of what happens during each step.
User journey maps/mapping: these are narrative documents that help us visualize the process a user goes through to accomplish a goal. They document the stages the user goes through, the tasks executed during each stage, user emotions, and product opportunities.
User scenarios: are used in the early stages of a product, and are mini stories that describe the needs and/or context that brings a user to a product. They tell designers who the user is, why the user is interested in a product, and what his or her goals are.
Usability: refers to how easy it is for a visitor to your site to use your site in its intended manner.
User stories: share actions different kinds of users can take in a product.
Vector images: are created by designers using mathematical formulas to establish points, lines, curves, and shapes on a grid. The benefit of a vector image is that it can be scaled to smaller and larger sizes, as per the needs of the organization, without having to sacrifice image quality.
Visual communications: combines graphic design with data visualization to deliver information persuasively. It uses various visual elements to develop a story and makes use of multiple formats to reach large audiences.
Visual design: considers the aesthetics of an app or website. There is a heavy overlap between visual design and UI design but one distinction commonly made is that visual designers consider the overall visual brand and identity, rather than focusing on individual designs.
Warm colors are the opposite to cool colors due to the warm, hot, and fiery disposition they are associated with. Yellow, orange, and red are the colors most often associated with warm colors.
Web standards: are specifications recommended by the World Wide Web Consortium for standardizing website design.
Waterfall: In software waterfall development, each phase must be completed before the next phase can begin. So, all the designs would have to be completed before developers could begin any work.
Whiteboard challenges: are designed to assess a candidate’s communication and problem-solving skills. In it, candidates are given a problem and a whiteboard to develop the solution on.
Website elements: consist of a header, navigation, navigation bar, breadcrumb trail, landing page, HTML, user interface, and wireframe.
Wordmark: relies on custom typographic treatment of text to illustrate a brand.
White space: also called negative space, is a part of the design left unmarked by imagery or text.
Wireframe: basic images that display essential functions of a website. Designers use wireframes to show how a page or site works.
WYSIWYG is the acronym for ‘What You See Is What You Get.’ It describes how the layout on the graphical screen is a representation of the printed version of the document.
Widgets: are screen-based controls that are used to interact with a website and other systems. They include push buttons, selection lists, radio buttons, sliders, etc.
XML: or Extensible Markup Language is used for writing custom markup languages. In other words, XML describes how to write new languages (it’s sometimes referred to as a “meta” language because of this). It also serves as a basic syntax that allows different kinds of computers and applications to share information without having to go through multiple conversion layers.
X-height: when deciding on font and its size, designers will use the height of a lowercase x to determine the height of all lowercase letters in a typeface.
Zeplin: is a cloud-based software that bridges the gap between UI designers and front-end developers. It provides an organized workspace to publish your designs and generate specs, assets, and code snippets for a smooth developer handoff.