{"id":6745,"date":"2022-05-26T10:08:17","date_gmt":"2022-05-26T10:08:17","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=6745"},"modified":"2023-11-20T13:54:51","modified_gmt":"2023-11-20T13:54:51","slug":"ui-glossary","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/ui-glossary\/","title":{"rendered":"A complete UI glossary: 100 terms all designers should know"},"content":{"rendered":"

When you work in UI<\/a>, it becomes quickly apparent that it’s an industry that comes with its own language. 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.<\/span><\/p>\n

UI design is a language unto itself. With lots of interesting terms and niche buzzwords, it can take some time to learn this new way of communicating. 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.\u00a0<\/span><\/p>\n

We\u2019ve compiled <\/span>100 of the most important UI terms, phrases and resources that all designers should know<\/b>, ordered from A to Z.\u00a0<\/span><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

1. Accessible design<\/b><\/h4>\n

Accessibility or accessible design helps users of all abilities to interact with a product. To implement accessible design, you must design for people who are colour blind, visually impaired, deaf or hearing impaired and people with cognitive disabilities.\u00a0<\/span><\/b><\/p>\n

2. Accordion<\/b><\/h4>\n

In UI design, an accordion is a type of menu that vertically stacks items that lets the user expand and collapse the content. When a user clicks a label, that section expands to show extended content. One or more labels can be open at a time and it helps users navigate large amounts of information quickly.\u00a0<\/span><\/p>\n

3. Adobe XD<\/b><\/h4>\n

Adobe XD<\/span><\/a> is one of the most popular <\/span>UX and UI design tools<\/span><\/a>. Part of the Adobe Creative Cloud suite, it\u2019s a vector-based design tool used for creating wireframes, prototypes, animations and UI designs.<\/span><\/p>\n

4. Alignment <\/b><\/h4>\n

Alignment is the design principle that is used to create structure and readability.\u00a0 It builds order and helps lead people through your design.<\/span><\/p>\n

 <\/p>\n

5. Animation<\/b><\/h4>\n

In UI terms, animation is the act of adding motion to any UI element to improve a product\u2019s interactivity. Animations can be used to mark the different stages in a progress bar or they can simply be used to add an element of <\/span>fun<\/span><\/a> and movement to a logo.<\/span><\/p>\n

 <\/p>\n

6. Ascenders<\/b><\/h4>\n

In typography (covered below in number 90), letters are written on a baseline. \u00a0 Most letters will reach the x-height, which we explain in number 100, but the letters that reach above that are called the ascenders. These letters include b, d, f, h, i, j, k, l and t.
\n<\/span><\/p>\n

\"ascender\"<\/p>\n

<\/h3>\n

7. Baseline<\/b><\/h4>\n

As mentioned in numbers 6 and 24, the baseline is the invisible line where text sits on a page. In UI design, the baseline is an important measuring tool between text and any other elements.<\/span><\/p>\n

 <\/p>\n

8. Bento menu<\/b><\/h4>\n

Named after the Japanese lunch box that packs meals into neat sections, a bento menu is a menu with gridded items. It provides an overview of multiple items at once.\u00a0<\/span><\/p>\n

 <\/p>\n

9. Breadcrumb<\/b><\/h4>\n

Continuing with the food theme, a breadcrumb is a navigation system which shows where a user is currently situated within a website.\u00a0 Usually located at the top of a page, breadcrumbs let users see their current location and steps they took to get there. As these are clickable links, users can move back to read or edit any information they filled in. \u00a0 <\/span>
\n<\/span>
\n<\/span>For example, if you\u2019re 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<\/span><\/p>\n

\"Breadcrumbs\"<\/p>\n

<\/h3>\n

10. Breakpoints<\/b><\/h4>\n

A breakpoint is the predetermined ranges in screen sizes that require particular changes in layouts.<\/span><\/p>\n

 <\/p>\n

11. Button<\/b><\/h4>\n

A button instructs a user through text, images or both to take an action.<\/span><\/p>\n

 <\/p>\n

12. Call-to-action\/CTA<\/b><\/h4>\n

A call-to-action button –\u00a0 or a CTA –\u00a0 encourages users to take a specific action on a website or application. For example: Sign Up, Book Now, Subscribe. <\/span>
\n<\/span>
\n<\/span>CTA buttons exist as a conversion goal, encouraging users to buy, consume or register for a product or service.<\/span><\/p>\n

 <\/p>\n

13. Card<\/b><\/h4>\n

Cards group related content side-by-side so that users don\u2019t have to scroll through a list to find the information\u00a0they are looking for. Square or rectangular-shaped, they have the appearance of a business card and they can include buttons, text and images.<\/p>\n

 <\/p>\n

14. Carousel\/image carousel<\/b><\/h4>\n

A lot of people will be familiar with image carousels as LinkedIn and Instagram use this format to display multiple images. However, these images are hyperlinked so users can browse through a set of items\/images and select one for a particular action.\u00a0 This is another clever way to save space on a screen as it allows multiple items to be displayed in one section.
\n<\/span>
\n<\/span>\"carousel\"<\/span><\/p>\n

15. Checkboxes<\/b><\/h4>\n

Checkboxes allow users to \u201ccheck\u201d or \u201cuncheck\u201d items from a box on a screen. Each item operates individually but a user can usually check more than one item. You would normally see a checkbox on an application or survey form.\u00a0<\/span><\/p>\n

16. Chunking<\/b><\/h4>\n

Also 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. When items or information is \u201cchunked\u201d in the same region on a web page or app, it is believed that they are related or connected.<\/span><\/p>\n

17. Colour palette<\/b><\/h4>\n

A colour palette is a small combination\u00a0of colours for a new design. The UI designer will use these to visually represent the brand, be visually pleasing and communicate different information. For example, red can be used for warnings or errors and green can be used for success.<\/p>\n

18. Colour models <\/b><\/h4>\n

A colour model is a system that helps to describe colours using numbers or letters. The most popular colour models for UI design are: <\/span>
\n<\/span>
\n<\/span>RGB –\u00a0 Red, Green, Blue<\/span>
\n<\/span>HSL – Hue, Saturation, Lightness<\/span>
\n<\/span>HSV\/HSB – Hue, Saturation, Value or Brightness<\/span><\/p>\n

HEX is a shorthand combination of six numbers and letters used to represent the many different values of RGB. For example, the green used in Starbucks’ branding is #00704A and red used in Coca-Cola’s branding is #F40009.
\n<\/span><\/p>\n

19. Comment boxes<\/b><\/h4>\n

Comment boxes are a common feature on most interfaces these days. They are used to display comments and feedback from users, running in chronological or popular order.<\/span><\/p>\n

20. Containers<\/b><\/h4>\n

A container is a UI element designed to contain page elements to a certain width based on the size of a user’s screen. An accordion is an example of a container.\u00a0\u00a0<\/span><\/p>\n

21. Counters <\/b><\/h4>\n

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. This area forms a \u201cbowl\u201d shape.\u00a0 <\/span>
\n<\/span>
\n<\/span>Closed counters are letters that are entirely closed and they include: <\/span>A, B, D, O, P, Q, R, a, b, d, e, g, o, p and q.<\/span>
\n<\/span>
\n<\/span>Open counters are letters that are partially closed and they include but aren’t limited to: <\/span>c, f, h,\u00a0 s<\/span>.<\/span><\/p>\n

\"Counters\"<\/p>\n

22. Critique <\/b><\/h4>\n

While some people may fear any form of criticism, critiques allow designers, researchers and content strategists to come together and provide constructive criticism to improve a product. The creator of the product will discuss the design with the rest of the team, who will then ask questions to explore the design even further. <\/span>
\n<\/span>
\n<\/span>The two most popular forms of critique are:<\/span>
\n<\/span>
\n<\/span>Silent – Using post-it notes on a whiteboard<\/a>, your colleagues will write feedback as a question.\u00a0 For example, if someone is unhappy with the colour of a button, they could write \u201cCould we try some other colour options?\u201d In this format, everybody gets a chance to have their say. <\/span>
\n<\/span>
\n<\/span>Regular– In a group setting, the wider team will sit and discuss the design journey of the product. However, these critiques can sometimes go off topic and some people may not get the chance to speak.<\/span><\/p>\n

23. Date or time picker<\/b><\/h4>\n

A date or time picker allows users to select a date and\/or time from a digital calendar or clock.\u00a0 The chosen date or time is then formatted and put into the system. <\/span>
\n<\/span>
\n<\/span>An everyday example of this is booking a table in a restaurant. Once you click your chosen date and time, your request will be sent to the restaurant for confirmation.<\/span><\/p>\n

24. Descenders<\/b><\/h4>\n

The opposite of number 6.\u00a0 In typography, descenders are the letters that fall under the x-height and below the baseline. These letters include q, g, p, y and j.<\/span><\/p>\n

25. Design patterns<\/b><\/h4>\n

UX and UI design patterns<\/a> are repeatable, reusable design components used to solve usability issues that users commonly experience. For example, the breadcrumb navigation<\/a> element (number 9 in our UI glossary) is a design pattern used to show the user their pathway from the homepage to the page that they\u2019re currently viewing.\u00a0<\/span><\/p>\n

26. Design systems<\/b><\/h4>\n

A design system is a universal source of truth for the design team \u2014 a collection of design assets, guidelines, constraints and best practices to adhere to when embarking on a new design project.\u00a0 <\/span>Google<\/span><\/a>, <\/span>IBM<\/span><\/a> and <\/span>Workday<\/span><\/a> all have their own design system canvasses that people can access and use.<\/span><\/p>\n

\"design<\/p>\n

27. Design thinking <\/b><\/h4>\n

The design thinking process<\/a> comprises five phases: Empathise (with the user), Define (the problem), Ideate (potential solutions), Prototype and Test. Design thinking is used to address particularly tricky UI problems.<\/span><\/p>\n

28. D\u00f6ner menu icon<\/b><\/h4>\n

The d\u00f6ner menu icon is similar to the hamburger menu, which we explain in further detail down at number 43. A d\u00f6ner menu 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.\u00a0<\/span><\/p>\n

29. Dribbble<\/strong><\/h4>\n

Dribbble<\/a> is the go-to spot for all designers. <\/span>It\u2019s a social media platform that focuses on building a strong community of designers, whether you\u2019re looking for <\/span>inspiration or collaboration. It\u2019s an excellent resource for connecting with other designers or to look for feedback on your own work.<\/span><\/p>\n

30. Dropdown\/dropdown lists<\/b><\/h4>\n

\u200b\u200b<\/span>Dropdown lists are similar to radio buttons, which we cover in number 73, but they save a lot of space on screen. The dropdown action happens when a user selects an item from a list and the menu drops down to reveal more information. These lists might require an instruction, like \u201cclick here\u201d, to help users navigate the space.<\/span><\/p>\n

31. Dropdown buttons<\/b><\/h4>\n

The dropdown button is the clickable button used in a dropdown list to reveal, yes, a list of items.\u00a0<\/span><\/p>\n

32. Easing<\/b><\/h4>\n

Easing – or ease-in and ease-out –\u00a0 is the slow and gradual movement of an animated UI element. Specifically, easing refers to the movement of the animation and how it gradually begins to move, rather than jolting to start or abruptly coming to an end.<\/span><\/p>\n

33. Feed<\/b><\/h4>\n

Feeds are everywhere and some of us are growing quite tired of them too\u2026 Feeds usually display user activity in chronological or popular order but some are determined by an algorithm. Think of your Twitter or Instagram feed that has ever-changing content, ranging from text to images to videos to external links to sponsored posts.<\/span><\/p>\n

34. Figma<\/a><\/b><\/h4>\n

Figma<\/span><\/a> is a browser-based interface design tool that empowers fast design and prototyping and a smooth, collaborative workflow. It is one of the most popular design tools and you would struggle to find an UI or UX designer that doesn\u2019t use it.<\/span><\/p>\n

35. Fluid UI<\/b><\/h4>\n

Fluid UI<\/span><\/a> 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.<\/span><\/p>\n

36. Font<\/b><\/h4>\n

Font is the name given to the particular size, weight and style of a typeface or text.\u00a0 We cover typeface in more detail below in number 89 but it is easily confused with font. Here is an easy way to understand the difference between the two: Helvetica is a typeface, whereas Helvetica Bold or Helvetica Italia are fonts.<\/span><\/p>\n

37. Form<\/b><\/h4>\n

Forms are a regular feature in our lives but thanks to autofilling features, the labour of forms has been made a lot easier. Forms, as in real life, are filled out by users who wish to submit information. A common example is when you order something online and fill in your address in the shipping form.
\n<\/span>
\n<\/span>\"forms\"<\/span><\/p>\n

38. Form field states<\/b><\/h4>\n

Digital forms should change their state or appearance so that users know what to do when they encounter them. <\/span>
\n<\/span>
\n<\/span>Field states can have the following forms:<\/span>
\n<\/span>
\n<\/span>Pristine –\u00a0 This is the default state before the user interacts with it<\/span><\/p>\n

On hover – This is the state that occurs when the user\u2019s cursor hovers above the form field. Users won\u2019t see this option on mobile, touch or swipe devices
\n<\/span>
\n<\/span>Selected\/focused – When the user interacts with the form, this state tells them to input information. It should be visually different from other form field states. For example, having a keyboard appear in the field or having the screen focusing entirely on this field.<\/span><\/p>\n

Disabled – <\/b>\u00a0This state lets users know that this element isn’t currently available for interaction. It will tell users that they either need to complete something else first or that this option is not available.\u00a0 For example, when you are ordering food online but have not filled in your delivery address, you may not be able to fill in your payment details.<\/span><\/p>\n

Inline validation – \u00a0 If a user has successfully or unsuccessfully completed a field, this state usually appears with a green tick or a red X. For example, if you have entered your credit card details but the information is wrong, you will be told to enter your information correctly.\u00a0\u00a0<\/span><\/p>\n

39. Full-stack designer <\/b><\/h4>\n

A full-stack designer is a designer who has the skills and know-how to take on all the \u201cstacks\u201d (or layers) of the product design and development process. While most designers will specialise in just one area, such as UX design or UI design, full-stack designers can take on UX design, UI design, interaction design and frontend development. <\/span><\/b><\/p>\n

40. Gestalt Principles<\/b><\/h4>\n

The <\/span>Gestalt principles<\/span><\/a> are a set of psychology laws that describe how our minds organise and interpret visual data. The Gestalt principles can be used to inform design decisions and shape a user\u2019s interaction with a product. <\/span>
\n<\/span>
\n<\/span>For example, the law of proximity states that elements which are positioned close together appear to be more related than elements which are spaced further apart. If you were designing a website based on the law of proximity, you\u2019d group related elements closer together. <\/span>
\n<\/b>
\n<\/span>Proximity: Elements that are close to each other are perceived as more closely related than those placed further apart <\/span>
\n<\/span>
\n<\/span>Similarity: Similar elements are perceived to be more related than elements that dissimilar elements.\u00a0 Shape, scale, orientation and colour all contribute to making elements seem similar. <\/span>
\n<\/span>
\n<\/span>Continuity: When elements are placed in a line or soft curve, they are perceived to be more related than those that are arranged randomly. This same concept applies when content flows in a certain direction.\u00a0<\/span><\/p>\n

Connectedness: When we see connections in disjointed or incomplete objects. A great example of this is recognising an image in a connect the dots picture before actually connecting the dots. <\/span>
\n<\/span>
\n<\/span>Closure: When we look at complex visual elements, we naturally look for a single or recognisable pattern. In other words, we fill in the gaps that we do not see. We do not need to see every element in a logo for us to recognise which company or brand it belongs to. Examples of this include the logos for Starbucks, Adobe or NBC. <\/span><\/p>\n

41. Grids<\/a><\/b><\/h4>\n

In UI design, a grid is a layout constraint that determines where UI elements will sit on a screen or page. Fundamental to effective design systems, they bring order to a layout using columns and rows and they help to maintain consistency and remove any room for error. It makes the decision-making process around sizing and space much faster and easier.<\/span><\/p>\n

These are the standard numbers for the different grid types: <\/span>
\n<\/span>
\nDesktop: 12 columns<\/span>
\n<\/span>Tablet: 8 columns<\/span>
\n<\/span>Mobile: 4 columns<\/span>
\n<\/span>Wearables: 2 columns<\/span><\/p>\n

42. Gutters<\/b><\/h4>\n

Gutters are the vertical strips between columns in grids that are used to prevent elements from bumping into each other.\u00a0<\/span><\/p>\n

\"gutters,<\/p>\n

43. Hamburger menu<\/b><\/h4>\n

With three, equi-length, horizontal lines stacked on top of each other, the hamburger menu looks like – but doesn\u2019t taste anything like – hamburger. This very commonly used icon usually sits at the top corner of an app. When clicked,\u00a0it opens up like a drawer, revealing a list of\u00a0 multiple navigation links.<\/span><\/p>\n

44. Hierarchy<\/a><\/b><\/h4>\n

Hierarchy is a UI design principle used to present information with different levels of emphasis according to its importance. In doing so, it helps guide users through a web page or application. <\/span><\/p>\n

45. Icon<\/b><\/a><\/p>\n

There are a number of images that work as symbols that are universally understood. An icon is a very basic version of the original image that helps users navigate a web page or app. Usually hyperlinked, they communicate content or prompt an action without using any text. A clear example of this is the shopping cart icon that tells you what items you have purchased in an online store. <\/span><\/p>\n

46. Informational components<\/b><\/h4>\n

In UI design, informational components are elements that tell users what\u2019s going on. While we go into more details of these elements elsewhere in the glossary, <\/span>tooltips, icons, progress bar, notifications, message boxes and modal windows are all examples of informational components. <\/span><\/p>\n

47. Input control<\/b><\/h4>\n

Input controls are the interactive elements used on any interface. These include checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields and date fields.<\/span><\/p>\n

48. Input field<\/b><\/h4>\n

Fairly self-explanatory, input fields are a place where users can enter content into a system. Forms are the most common example but a search bar is an example of an input field that we use on an hourly basis.\u00a0<\/span><\/p>\n

49. InVision Studio<\/b><\/h4>\n

InVision Studio<\/span><\/a> is another powerful tool that all designers should be familiar with. It includes features and functions for drawing, wireframing, prototyping and animating \u2014 pretty much everything you need to bring your designs to life. It counts as one of <\/span>the best UI design tools<\/span><\/a>.<\/span><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN USER RESEARCH]<\/p>\n Take our Professional Certificate in User Research<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

50. Kebab menu<\/b><\/h4>\n

Not just a late night menu to savour, the UI kebab menu consists of three vertical dots that represent a set of grouped options for a user to navigate. Not to be confused with the meatball menu, which we explain in number 58.<\/span><\/p>\n

51. Line height <\/b><\/h4>\n

Line height is the distance above and below lines of text. When there is too much space, the content may come across as disconnected and where there is too little space, it can be quite hard to read.<\/span><\/p>\n

\"line<\/p>\n

52. List boxes<\/b><\/h4>\n

Much like checkboxes, 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 longer list of options for the user.<\/span><\/p>\n

53. Loader or loading bar<\/b><\/h4>\n

Loaders come in many shapes and sizes. Loading bars are designed to let users know how long an action will take to complete, instructing us to wait or be patient. A great example of this is the Deliveroo loading bar which shows a person on a bike cycling as we wait for our delivery to arrive.\u00a0 <\/span><\/p>\n

54. Logo<\/b><\/h4>\n

A logo is a symbol or a small design used by companies, brands, organisations – anyone – to identify their products. Logos are part of the overall UI branding design of a product, with brand colours, typography, animations and images all relating to each other.\u00a0<\/span><\/p>\n

55. Margin<\/b><\/h4>\n

When people talk about margins, they are talking about the areas sitting left and right of a grid, which we explained above in number 41.<\/span><\/p>\n

56. Marvel<\/b><\/h4>\n

Unfortunately, this has nothing to do with Spiderman but everything to do with UI. <\/span>Marvel<\/span><\/a> promises all the core functionality you need to design and build digital products, including wireframing, prototyping and design specs for handoff. And, with its user-friendly and intuitive platform, it\u2019s the ideal UX\/UI design tool for beginners.<\/span><\/p>\n

57. Meatball menu<\/b><\/h4>\n

Similar to the kebab menu, the meatball menu is a set of three horizontal dots. When the user clicks on the dots, more options are revealed.<\/span><\/p>\n

\"menus\"<\/p>\n

58. Message box<\/b><\/h4>\n

A message box 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. A good example of this is if you are deleting an app from your phone and a little message pops up to confirm if you definitely want to delete it.\u00a0 <\/span><\/p>\n

59. Modal<\/b><\/h4>\n

Message boxes are also known as modal windows and they work in the same way. <\/span><\/p>\n

60. Moodboard<\/b><\/h4>\n

Moodboards are essentially a collage of images, text and samples of objects in a design composition. They\u2019re a visual presentation used in the brainstorming stage of a product. <\/span><\/p>\n

61. Navigational components<\/b><\/h4>\n

Navigational components are elements that allow the user to interact with and use your product. Breadcrumb, slider, search field, pagination, slider, tags and icons are all examples of navigational components. They let the user know where they are and help them to get to their next desired location. <\/span><\/p>\n

62. Notification<\/b><\/h4>\n

Notifications are a regular feature in our lives. Used in apps or web pages, notifications alert users when there is something new to see, like a new message, a completed task or if an error has occurred. They can be displayed as dots, flags, exclamation points \u2013 anything. <\/span><\/p>\n

63. Origami Studio<\/b><\/h4>\n

Origami Studio<\/span><\/a> is a free design tool that was created by Facebook. It\u2019s primarily a prototyping tool, enabling designers to rapidly build and share interactive interfaces. However, it\u2019s not recommended for beginners. <\/span><\/p>\n

64. Padding<\/b><\/h4>\n

Padding is the spacing inside grid columns and it acts like a cushion around the edges. Paddings allow for more breathing space in a design – something that luxury brands take advantage of – but by doing so, you allow for less content. <\/span><\/p>\n

65. Pagination<\/a><\/b><\/h4>\n

By dividing content between separate pages, pagination lets readers know where they are while allowing them to skip between pages or read them in order.
\n<\/span>
\n<\/span>\"pagination\"<\/span><\/p>\n

66. Plus button<\/b><\/h4>\n

Usually shaped like a plus sign, the plus button indicates that new content can be added to a digital product. For example, in your phone contacts, the plus button means that you can add a new person to your phone book. On Spotify, the plus button means you can add a new song to a playlist. <\/span>
\n<\/span>
\n<\/span>In some cases, clicking a plus button will open a modal window to create new content. <\/span><\/p>\n

67. Primary button and secondary button
\n<\/b><\/h4>\n

If there are multiple CTAs (explained in number 12) on a screen, the primary button lets us know which action is the most important. <\/span>
\n<\/span>
\n<\/span>The secondary button is still an important CTA but it is less important than the\u00a0 primary button. It should be less visually dominant and should not clash with the image or appearance of the primary.<\/span><\/p>\n

68. Principle<\/b><\/h4>\n

Principle for Mac<\/span><\/a> is an easy-to-use design software for creating animations and interactive elements. <\/span><\/p>\n

69. Progress Bar<\/b><\/h4>\n

Progress bars are used to visually tell a user where they are in a multistep process. They are usually used in checkouts for online stores, telling a user how many stages they have left until they have fully purchased an item. <\/span><\/p>\n

70. Prototype<\/a><\/b><\/h4>\n

A prototype is a simulation or model of what the final product will (or could) look like. UX designers create prototypes to gather feedback and improve their designs before pushing them through to development. You can learn more about prototyping and some of the most popular prototyping tools <\/span>in this guide<\/span><\/a>.<\/span><\/p>\n

71. ProtoPie<\/b><\/h4>\n

ProtoPie<\/span><\/a> is a flexible yet powerful prototyping tool praised among the design community for its easy-to-use interface and almost non-existent learning curve.<\/span><\/p>\n

72. Radio buttons<\/b><\/h4>\n

Radio buttons are small circular buttons that are used to allow a user to select one item at a time. These can be confused with checkboxes, which allow users to click multiple items at a time. <\/span><\/p>\n

73. Responsive design<\/b><\/h4>\n

Responsive design ensures that your designs display accurately on different screen sizes. A website that\u2019s been designed responsively will look great whether it\u2019s viewed on a desktop computer, a tablet or a smartphone.
\n\"responsive\"<\/span><\/p>\n

74. Scanning patterns<\/b><\/h4>\n

When planning the layout of a web page or application, designers must carefully choose the placement of important text or images to accommodate the \u201cscanning\u201d styles of readers. Jacob Nielsen <\/span>conducted a study<\/span><\/a> based on eye-tracking data and it concluded that people don\u2019t usually read the web but they scan it. <\/span>
\n<\/span>
\n<\/span>Two scanning patterns to keep in mind are:<\/span>
\n<\/span>F Pattern<\/b> – By scanning a page horizontally and reading left to right, back to left, down and left to right, users read in an F-shape.<\/span>
\n<\/span>
\n<\/span>Z Pattern<\/b> – By scanning a page left to right, diagonal down, left to right, users read in a zig-zag or Z-shape.<\/span>
\n<\/span><\/p>\n

75. Search field<\/b><\/h4>\n

A search field allows users to type a keyword, phrase or query to search an index and find the most relevant results. Search fields are usually single-line text boxes – sometimes with a magnifying glass image inside of it –\u00a0 and they come with an accompanying search button. <\/span><\/p>\n

76. Share button<\/b><\/h4>\n

The share button is used to share a page or a product externally to other social networking accounts. Each social networking account is represented by its own easily recognised logo. While most share buttons simply say \u201cshare\u201d, it has a number of associated logos.\u00a0 <\/span>
\n<\/span>
\n<\/span>On Android phones, the share button is shaped like the \u201cless than\u201d sign with a circle at each point. On iPhones, it is an arrow pointing out from a rectangle. <\/span><\/p>\n

77. Sidebar<\/b><\/h4>\n

A sidebar can be visible or tucked away and it displays a menu of navigational actions or content on the side of a web page or app.<\/span><\/p>\n

78. Sketch<\/b><\/h4>\n

Sketch<\/span><\/a> is a vector graphics editor used for drawing, wireframing, prototyping and design handoff<\/a> \u2014 essentially everything you need to bring your designs to life. It\u2019s a powerful and flexible UX and UI design<\/a> platform built for collaborative design. It has long been considered an industry-standard tool, ideal for both beginner and advanced designers. <\/span><\/p>\n

79. Slider controls<\/b><\/h4>\n

A slider allows users to set or change a value. A very common example of this is when you are searching for holiday accommodation, you can set your price range. Another example is changing the brightness levels on the screen of your phone.
\n<\/span>
\n<\/span>\"slider<\/span><\/p>\n

80. Stepper<\/b><\/h4>\n

Steppers 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. <\/span><\/p>\n

81. Tag<\/b><\/h4>\n

Tags are an easy way for users to find content – like blog posts – in the same category. Tags act as labels to categorise content with relevant keywords so that users can find what it is that they are looking for. <\/span><\/p>\n

82. Tab bar<\/b><\/h4>\n

Tab bars appear at the bottom of a mobile app and they tell users where they are, using easily distinguishable icons. It also allows users to move back and forth between the different sections of an app. <\/span>
\n<\/span>
\n<\/span>For example, at the bottom of the Instagram mobile app,\u00a0 users can go home, use the search field, watch reels, go shopping or look at their profile. <\/span><\/p>\n

83. Text fields<\/b><\/h4>\n

Text fields, very simply, allow users to enter text. Used in forms or questionnaires, the users can enter single or multiple lines of text. <\/span><\/p>\n

84. Thumb reachability <\/b><\/h4>\n

Easily remembered as the rule of thumb. When people use their mobile phones, they can usually operate with just their thumbs. People can\u2019t stretch their thumbs to the top\u00a0 or middle of a screen so designers need to consider the placement of on-screen interactive elements around this.<\/span><\/p>\n

The top left side of a screen is hard for a thumb to reach, whereas the bottom left side is easy. The bottom right and centre of a screen is doable but not ideal.<\/span><\/p>\n

\"thumb<\/span><\/p>\n

85. Tooltip<\/b><\/h4>\n

When a user hovers over a certain item, a tooltip appears to explain it further. For example, when asked for your CVV number on an online shop, a tooltip usually appears to tell you where to find the CVV number on your credit or debit card.\u00a0 <\/span><\/p>\n

86. Toggle<\/b><\/h4>\n

Toggle buttons act like an on and off switch, allowing users to change a setting between two states. For example, a toggle switch can be used on your phone\u2019s settings to switch Wi-Fi or bluetooth connections on or off.<\/span><\/p>\n

87. Type <\/b><\/h4>\n

Type is the very basic description of any text or lettering on a screen.<\/span><\/p>\n

88. Typeface<\/b><\/h4>\n

Typeface is the design set of lettering. It can vary in size, weight, slope, width and so on. Times, Arial and Sans Serif are all examples of a typeface. <\/span><\/p>\n

89. Typography <\/b><\/h4>\n

Easily confused with typeface, typography is the art of lettering itself. It refers specifically to how letters are arranged and styled. Designers must choose typography that is both legible and visually appealing for the user.<\/span><\/p>\n

90. Uizard<\/b><\/h4>\n

Uizard<\/span><\/a> is a UI design platform for those who want to create digital products but don\u2019t necessarily have advanced design expertise. Easy-to-use,\u00a0 it\u2019s perfect for ideation, low-fidelity wireframing, rapid prototyping, UI styling and real-time collaboration.<\/span><\/p>\n

91. User interface<\/b><\/h4>\n

A user interface (a UI)<\/a> is the point of interaction between humans and computers. <\/span>
\n<\/span>
\n<\/span>It contains all the features a user needs to interact with a digital product:
\n<\/span>
\n<\/span>I<\/strong>nput controls<\/b>\u00a0enable a user to input information <\/span>
\n<\/span>N<\/strong>avigational elements<\/b> allow the user to move from one point to the next
\n<\/span>Informational components<\/b> which provide the user with valuable information <\/span>
\n<\/span>C<\/strong>ontainers<\/b>\u00a0group the content into meaningful sections. <\/span>
\n<\/span>
\n<\/span>Designers are responsible for creating interfaces that are user-friendly and aesthetically pleasing. <\/span><\/p>\n

92. User interface design<\/b><\/h4>\n

UI design is the process of designing user interfaces<\/a>. A user interface is the point of interaction between humans and computers . User interface design takes care of how digital products look, feel and behave for the end user. Good UI<\/a> is part of creating a delightful user experience and UX and UI designers<\/a> work closely together. <\/span>
\n<\/span>You\u2019ll find a complete explanation of user interface design <\/span>here<\/span><\/a>. <\/span><\/p>\n

93. UI elements<\/b><\/h4>\n

UI elements are the building blocks used in the design of apps and websites. When you use a website or app, you encounter buttons, forms, menus, drop-down lists, image carousels and more. These are all examples of UI elements.<\/span><\/p>\n

94. UX<\/b><\/h4>\n

UX<\/a> stands for \u201cuser experience\u201d and it basically describes how a user feels when they use a product or service. A good user experience is easy and enjoyable, while a bad user experience is complicated, confusing and frustrating. <\/span><\/p>\n

95. UX design<\/b><\/h4>\n

UX design is the process of designing these experiences explained above in number 95. It involves identifying and understanding a specific user problem and designing products or services to address the problem in a way that centres the user.<\/span><\/p>\n

96. UXPin<\/b><\/h4>\n

UXPin<\/span><\/a> is a popular UX and UI tool, used by both new and seasoned designers alike. UXPin is an end-to-end platform capable of delivering polished, interactive prototypes, with no coding skills required.<\/span><\/p>\n

97. Visual design<\/b><\/a><\/h4>\n

Visual design considers the aesthetics of an app or website. There is 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.\u00a0<\/span><\/p>\n

98. Wireframes<\/b><\/h4>\n

A wireframe depicts the \u201cbare bones\u201d of a website or app, focusing on the layout and positioning of different elements on the screen. Wireframing allows you to test and validate your initial concepts before developing them into high-fidelity designs and, eventually, live products.\u00a0<\/span><\/p>\n

You can read about the best wireframe tools to use in 2022 <\/span>here<\/span><\/a>.<\/span><\/p>\n

99. X-height<\/b><\/p>\n

When deciding a font and its size, designers will use the height of a lowercase x to determine the height of all lowercase letters in a typeface. If any letters go above the x-height, they are known as ascenders. <\/span>
\n<\/span>
\n<\/span>Any letters that fall below the x-height are known as descenders. If the x is small in height, the font size will need to be increased for readability. <\/span>
\n<\/span><\/p>\n

\"x<\/p>\n

 <\/p>\n

100. Zeplin<\/strong><\/p>\n

Zeplin<\/span><\/a> is a cloud-based software that bridges the gap between UI designers and front-end developers. It provides an organised workspace to publish your designs and generate specs, assets and code snippets for a smooth developer handoff.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

If you want to work in UI (or work with a UI designer), you need to speak the language. In our UI glossary, we\u2019ve compiled (and explained) 100 terms, phrases and resources all designers should know. <\/p>\n","protected":false},"author":24,"featured_media":6757,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-6745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=6745"}],"version-history":[{"count":16,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6745\/revisions"}],"predecessor-version":[{"id":9437,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6745\/revisions\/9437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/6757"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=6745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=6745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=6745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}