When I started to learn English for my job I tried to find an ultimate glossary of all the digital design term, but couldn’t find any that fully satisfied me. Something was always missing. So I decided to create my own. I was gathering the most frequently used design terms and their definitions and as a result got a very extensive collection. I decided to share this list online — maybe somebody else will need it on their journey of learning English. Feel free to use it for your study.
All terms are divided into groups for more efficient usage. There are three of them: terms for the prototyping stage, terms for describing mockups and element properties, terms explaining interface elements and some tricky verb for describing processes and different actions.
Prototyping
Prototype — is a low-fidelity design concept for refining and validating ideas and testing them on users. Might be done in form of hand sketches, digital simulation, or a sample version of a final product.
Wireframe — is a simple illustration of a web page that helps to design its structure and decide on sections placement. Usually made in the schematic way and on the earliest stage of the process.
User flow — is a path that users take throughout a product on the way to their main goal. It includes an entry point, a few steps and a final outcome if users succeeded to reach it on their journey.
User personas — is a collective image that represents an average target user. It used to make strategic decisions about designing new features, marketing campaigns, etc. Shouls be made on basics of real users
CJM — is an abbreviation from Customer Journey Map. It is a research tool that helps to understand what steps users take through the service to achieve their goals and spot the problem points they encounter on their way.
Heat Map — is a graphical representation that shows areas on a web page people interact with the most using a warm-to-cool color spectrum.
JTBD — is an approach for developing products. Implies that user’s goal is a “job” and they are looking for a product to get it done. Helps to define how customers understand and measure progress.
Usability testing — is practice used by researchers for making sure that a certain interface is easy to understand and use for regular people. The goal is to identify any possible problems that should be improved in the new version.
A/B-testing — is a testing approach that implies comparing two different versions of design on real users online and analyzing conversion numbers to figure out which one of them performs better.
Mockups
Mockup — is a static, high-fidelity simulation of the finished product that delivers the visual look of the product design — including typography, iconography, color, and overall style.
Layout — is the arrangement of visual elements within a grid to structure and organize content. It provides clear paths for navigation and helps to direct the user’s attention.
Typography — is the art of arranging letters and text to make the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages.
Framework — is a predefined set of components, that can be easily customized or changed to be used for web projects, that provide a certain structure.
Design System — is a collection of all the interface elements, components, and guidelines used for creating all the features on a website. This approach helps to maintain the consistency of a product.
Guidelines — is a set of rules made for optimising and unification of design process. These recommendations help to maintain consistency and provide users with better experience.
Adaptive — represents different versions of designs for each screen size in order to provide users with better experiens on their devises.
Breakpoints — is the point at which a website’s layout and content will adapt in a certain way to provide the best possible user experience. Breakpoints define with device widths.
Grid — is a system of markups applied to web pages that helps to place elements consistently and keep the structure clear.
Layer — is a virtual space for each item stacked one above another. That helps to interact with objects properties without influencing others.
Element properties
Background — is a filling or a large image that has some content on top of it. Background should be contrast enough copmaire to the items placed on it.
Stroke — is a property used to draw the outline of the shape. It can have different width and color and represents item’s border.
Opacity — is the same as transparency. Is a state of an item when the color filling is diluted and what is behind it shows through the shape.
Alignment — is a way of positioning elements like text, images and buttons on the web page within a straight line in order to avoid clutter. Alignment can be left, right or centered.
Shadow — is a graphic visual effect that helps to show the depth of the page, given an impression that objects are placed to one above another, or direction of the moving items.
Font — is a set of text characters made in one unique style and size. Using appropriate topography helps to increase readability of websites and improve users experience when interacting with texts.
Radius — is a property for making rounded corners of an item. It makes objects look more smooth and pleasant for the users perception.
Scale — is a relative size of a certain element in comparison to another element. Could be a way to show contrast between objects in their size.
Interface elements
Header — is a narrow top section of the website that contained a logo, a call to action button, and contact information. Usually its compact version sticks to the top part of the page on scrolling.
Footer — is an informative element that is located at the very bottom part of every website’s page. Usually provide users with information like: contacts, social links, legal documents, etc.
Input — is a text field for gathering a needed information from users, like name, date, etc. Also, can be used as a search field. Usually has a hint or placeholder text to communicate its purpose and a clear button to help users erase their input data quickly.
Placeholder — is a hint in a text field that helps to communicate the purpose of the field and explain the kind of data that should be put in there
Form — is a group of text fields that helps to gathers some information from users in order to provide them with a better experience.
CTA — is an abbreviation from “Call to Action”. Usually, it’s the main button on a web page that envokes users for a specific action. For example, to buy a product or to contact a seller.
Navigation — is an element interface that guides users when they move between screens and different sections on a page in an app or website.
Breadcrumb — is a navigation element that helps users to understand where they are located on a website or app. It shows a sequence of steps users have taken to the way to the current page.
Checkbox — is an interface element that allows users to make a binary choice (yes/no, accept/decline) for a certain option.
Radio button — is a control element used to make list of two or more options that are mutually exclusive. Applicable in situations when users must make only one choice.
Dropdown list — is a control element that reveals a list of options users should choose from. Usually only one value can be chosen unless this list has checkboxes. One of the most popular options can be added as defolt.
Switch or Toggle — is a type of button that switches between two opposite states (on/off, show/hide) and uses two different visual styles to distinguish the states. It indicates the current selection with high-contrast color.
Segmented controls — is a linear set of two or more switching elements. Each segment functions as a mutually exclusive button.
Page Controls — is a set of little indicators that help to navigate through a few pages with similar content. Each of them represents one page. Usually the main control is highlighted or filled in to show users an approximate place of the current page in the list. Usually they are used to display different views.
Slider — is a horizontal controller that allows to change value only between an offered minimum and maximum. The controller’s button is called a thumb.
Tooltip — is a short message that appears on hover and provides users with some clarifying information about a certain element.
Sidebar — is a column placed to the right or left side a webpage in addition to the primary content. Usually includes different links, like recent blog articles, social media icons, new comments, etc.
Pagination — is a row of numbered links leading to the different pages. It used for splitting long text or big volum of data into separate sections.
Tag — is a short description that shows a status of an item or provide some concise details about it. Tag helps to locate or group related items and work with them at the same time.
Progress bar — is an activity indicator that keeps users updated on the process of loading content with a known duration on the page and gives an idea of how long they should be waiting.
Accordion — is a vertically stacked list of headers that expands on click to reveal the imformation associated with them. Usually it pushes the below information down. Often used for a Q&A section and helps to make heavy content page more light.
Tab — is a segment of a control element for switching between different pannels or windows revealing closely related content inside. Tabbed controls stay without any changes themselves, only content area changes.
Notifications — is a message with alert, reminder, confirmation, or announcements that display outside the app’s UI or in the notification center. How to use
Modality — is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context. It helps people to focus on a self-contained task and ensure that people receive and, if necessary, act on critical information.
Modal view — is a container element that draws user’s attention from the current context and uses for displaying information in a temporary mode. It requires an explicit action to exit.
Pop-up/action sheet — is a card that partially covers the underlying content and dims all uncovered areas to prevent interaction with them.
Popover — is a temporary element that opens above other content on the screen when users click a control and usually includes an arrow that shows the place from where it appeared.
Labels — is a text description of an interface section or on element that helps users to understand the context they got in.
Thanks for scrolling to the very end. I hope you enjoyed this little list of terms. If you found something you think I should add here just drop me a message 🤗
