
You would normally see a checkbox on an application or survey form.Īlso known as grouping, chunking is used by designers to break down large chunks of information, images or text into smaller chunks, making it easier to understand. Each item operates individually but a user can usually check more than one item. This is another clever way to save space on a screen as it allows multiple items to be displayed in one section.Ĭheckboxes allow users to “check” or “uncheck” items from a box on a screen. However, these images are hyperlinked so users can browse through a set of items/images and select one for a particular action. Square or rectangular-shaped, they have the appearance of a business card and they can include buttons, text and images.Ī lot of people will be familiar with image carousels as LinkedIn and Instagram use this format to display multiple images. For example: Sign Up, Book Now, Subscribe.ĬTA buttons exist as a conversion goal, encouraging users to buy, consume or register for a product or service.Ĭards 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. As these are clickable links, users can move back to read or edit any information they filled in.įor example, if you’re browsing the ASOS clothing website, you might see a trail of links which shows where you are (and how you got there) as follows: Home > Men > Sportswear > ShoesĪ breakpoint is the predetermined ranges in screen sizes that require particular changes in layouts.Ī button instructs a user through text, images or both to take an action.Ī call-to-action button – or a CTA – encourages users to take a specific action on a website or application. Usually located at the top of a page, breadcrumbs let users see their current location and steps they took to get there. It provides an overview of multiple items at once.Ĭontinuing with the food theme, a breadcrumb is a navigation system which shows where a user is currently situated within a website.

Named after the Japanese lunch box that packs meals into neat sections, a bento menu is a menu with gridded items. In UI design, the baseline is an important measuring tool between text and any other elements. These letters include b, d, f, h, i, j, k, l and t.Īs mentioned in numbers 6 and 24, the baseline is the invisible line where text sits on a page. Most letters will reach the x-height, which we explain in number 100, but the letters that reach above that are called the ascenders. In typography (covered below in number 90), letters are written on a baseline. Animations can be used to mark the different stages in a progress bar or they can simply be used to add an element of fun and movement to a logo. In UI terms, animation is the act of adding motion to any UI element to improve a product’s interactivity. It builds order and helps lead people through your design.

Part of the Adobe Creative Cloud suite, it’s a vector-based design tool used for creating wireframes, prototypes, animations and UI designs.Īlignment is the design principle that is used to create structure and readability. One or more labels can be open at a time and it helps users navigate large amounts of information quickly.Īdobe XD is one of the most popular UX and UI design tools. When a user clicks a label, that section expands to show extended content. In UI design, an accordion is a type of menu that vertically stacks items that lets the user expand and collapse the content. To implement accessible design, you must design for people who are colour blind, visually impaired, deaf or hearing impaired and people with cognitive disabilities. We’ve compiled 100 of the most important UI terms, phrases and resources that all designers should know, ordered from A to Z.Īccessibility or accessible design helps users of all abilities to interact with a product. If you are considering a career in UI, we have created a glossary that should become your quick one-stop-shop to help you speak fluently. With lots of interesting terms and niche buzzwords, it can take some time to learn this new way of communicating.

Every new language comes with its own dictionary so that is why we have compiled our UI glossary, complete with 100 UI terms all designers should know. When you work in UI, it becomes quickly apparent that it’s an industry that comes with its own language.
