{"id":12273,"date":"2022-07-31T09:24:18","date_gmt":"2022-07-31T09:24:18","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=12273"},"modified":"2023-01-04T17:06:36","modified_gmt":"2023-01-04T17:06:36","slug":"macro-level-ui-design-terminologies","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/macro-level-ui-design-terminologies\/","title":{"rendered":"20 Macro-Level UI Design Terminologies for UI\/UX Designers"},"content":{"rendered":"\n

Since the modern computer first launched, user interface design has evolved into a language of its own. So, here, we’ve gathered the 20 most common Macro-Level UI Design Terminologies for you. These UI design terminologies will assist you in staying updated with the latest design terms. Also, you’ll have better communication with your peers.<\/p>\n\n\n\n

Octavia – Figma Dashboard & Design System<\/span><\/a><\/strong><\/p>\n\n\n\n

\"octavia<\/a><\/figure><\/div>\n\n\n\n

Live Preview<\/a><\/strong> Buy Now<\/a><\/strong><\/p>\n\n\n\n

Macro-Level UI Design Terminologies<\/h2>\n\n\n\n

1. Tab <\/h3>\n\n\n\n

Tabs<\/strong> are a web design navigation element that allows users to easily access different areas of a site or different parts of a single page. They function similarly to tabbed dividers in a filing cabinet in that users can easily locate a page containing related content by clicking a tab.<\/p>\n\n\n\n

\"tab<\/figure><\/div>\n\n\n\n

2. Tab Bar <\/h3>\n\n\n\n

A Tab Bar<\/strong> is a navigation structure and the heart of your app’s functionality. It ensures users’ current location while providing a constant overview of all other pages or places. The tab bar organizes and allows navigation between related and at the same level of hierarchy groups of content. You can find the tab scroller and tab components in the tab bar.<\/p>\n\n\n\n

\"tab<\/figure><\/div>\n\n\n\n

3. Dropdown <\/h3>\n\n\n\n

The Dropdown<\/strong> design pattern displays a list of contents, navigation points, and functions. It is also known as a dropdown menu. It includes both the menu and its submenus. And from there, you can select a value from this series of options.<\/p>\n\n\n\n

\"dropdown\"<\/figure><\/div>\n\n\n\n

4. Card<\/h3>\n\n\n\n

A flexible-size container that organizes information and has the appearance of a playing card is called a Card<\/strong>. The card in UI designs has numerous benefits, but one of the most significant is how simple it is to recreate them in distinctive ways that will show a website’s personality.<\/p>\n\n\n\n

\"card<\/figure><\/div>\n\n\n\n

There are four kinds of cards that appear the most frequently among the many card types while examining the most popular and successful ones. These are Pins, Flat Design, Masonry, and Magazine Style.<\/p>\n\n\n\n

5. To-do or To-do List App<\/h3>\n\n\n\n

A To-do <\/strong>or To-do list App<\/strong> is an application for maintaining day-to-day tasks or listing work plans. You can ensure all your future tasks by making a To-do list. It records the tasks in one place. So, you don’t have to forget anything important for you to keep in mind.<\/p>\n\n\n\n

\"to-do<\/figure><\/div>\n\n\n\n

6. Table<\/h3>\n\n\n\n

In UI design, a Table<\/strong> is for better visualizing data. It is to quickly scan, compare, sort, and filter the data to take their actions. In other words, tables are form elements that use columns and rows to display different interface information or data in a grid.<\/p>\n\n\n\n

\"table<\/figure><\/div>\n\n\n\n

7. Pagination<\/h3>\n\n\n\n

The term Pagination<\/strong> is the process of splitting a pile of content. It divides a section of content from a web or app into different pages. In other words, pagination is a pattern in UI that separates tons of content into different pages. For example, at the bottom of a blog page, you can see a row of numbers (pagination) if there are a large number of blogs.<\/p>\n\n\n\n

\"pagination<\/figure><\/div>\n\n\n\n

8. Progress Bar <\/h3>\n\n\n\n

A Progress Bar<\/strong> is a graphical control element. It is for showing the progress of a computer operation. Download, file transfer, and installation are some examples of a progress bar. Also, it includes a textual representation with a visual of the progress in a percent format. In other words, a progress bar shows visual data and ensures that the app is progressing.<\/p>\n\n\n\n

\"progress<\/figure><\/div>\n\n\n\n

9. Navigation<\/h3>\n\n\n\n

A set of user interface controls provides Navigation<\/strong> for a website or product. Its purpose is to allow users to form a mental model of the structures that designers create. Users can easily navigate and rely on them. It is a UI layer with a set of controls that appears on top of the information architecture<\/p>\n\n\n\n

\"navigation<\/figure><\/div>\n\n\n\n

10. Components<\/h3>\n\n\n\n

A Component<\/strong> is any part of your application that you can group logically and also think of as a single element. These are ideally reusable as a building block for the rest of the application. A component may contain other components within. However, each “component” is a separate entity.<\/p>\n\n\n\n

\"components<\/figure><\/div>\n\n\n\n

11. Charts<\/h3>\n\n\n\n

In UI design, Charts are visual representations of large amounts of data and the relationships between different parts of the data. They are more readable and understandable than raw data. There are various <\/strong>charts, such as bar charts, pie charts, line charts, column charts, bubble charts, and so on.<\/p>\n\n\n\n

\"chart<\/figure><\/div>\n\n\n\n

12. Breadcrumb<\/h3>\n\n\n\n

Breadcrumbs<\/strong> are a collection of links that represent the current page as well as its parent, grandparent page, and so on. It usually redirects to the site’s homepage. In other words, breadcrumbs are a secondary navigation aid that helps users quickly understand the relationship between their current location on a page and higher-level pages.<\/p>\n\n\n\n

\"examples<\/figure><\/div>\n\n\n\n

13. Carousel Slider<\/h3>\n\n\n\n

Carousel Slider<\/strong> is a photo and video slideshow on websites. It slides in motion, allowing users to navigate media files without wasting time or space. Although the carousel and slider have the same functionality, they have different approaches. A simple slider, for example, only shows one slide at a time, whereas a carousel shows multiple slides at once and highlights the media file you’re hovering over.<\/p>\n\n\n\n

Example of a <\/strong>Carousel Slider:<\/p>\n\n\n\n

\"carousel\"<\/figure><\/div>\n\n\n\n

Example of a Simple Slider:<\/p>\n\n\n\n

\"slider\"<\/figure><\/div>\n\n\n\n

However, there is another type of Slider in UI design that enables users to increase or decrease the value or range from a fixed set of options. Here is an example. <\/p>\n\n\n\n

\"slider<\/figure><\/div>\n\n\n\n

14. Chatbot<\/h3>\n\n\n\n

A Chatbot<\/strong> is a program in UI for interacting with users. It allows users to ask questions and interact using natural language (text, graphical elements, or voice messages). Chatbot provides real-time answers or solutions when a user wants to learn more about a business or ask a question.<\/p>\n\n\n\n

\"chatbot<\/figure><\/div>\n\n\n\n

15. Filtering<\/h3>\n\n\n\n

Filtering<\/strong> is a set of controls in user interface design. It allows you to select values to shortlist and specify your choice. There are a lot of different filter types and applying them depends on the purpose you’re using them for.<\/p>\n\n\n\n

\"filtering\"<\/figure><\/div>\n\n\n\n

16. Comments<\/h3>\n\n\n\n

Comments<\/strong> increase both authors’ & users’ interactivity. If a product, video, audio, or text file (e.g. blogs) has a comments section, readers or viewers can share their thoughts on that particular subject or item.<\/p>\n\n\n\n

\"comments\"<\/figure><\/div>\n\n\n\n

17. Accordion<\/h3>\n\n\n\n

An Accordion<\/strong> in UI\/UX design is a menu displaying a list of headers on top of one another. These headers reveal or hide content while clicking on them. You can navigate websites and pages using accordions. They can group links to assist users in navigating interfaces. These are especially useful in mobile design. It is because an accordion allows you to divide information into sections or pages. For example, most of the sites that have FAQs section come in accordion style.<\/p>\n\n\n\n

\"accordion\"<\/figure><\/div>\n\n\n\n

18. Dialogs<\/h3>\n\n\n\n

Dialogs<\/strong> are a combination of text and controls in UI design that inform users about various tasks and want you to take action, select, cancelation, or confirmation based on their requirements. When a dialog appears, it disables the rest of the app’s functionality and remains on the screen until you confirm, dismiss, or take action. Therefore, as a designer, you should only use dialogs when necessary.<\/p>\n\n\n\n

\"dialog<\/figure><\/div>\n\n\n\n

19. Snackbars & Toasts<\/h3>\n\n\n\n

Snackbars<\/strong> are UI elements that notify the user of an action that an app has performed or will perform in the future. They might have a text action but no icons. Snackbars do not interfere with the user’s activity or experience. Toasts<\/strong>, on the other hand (Android only), are primarily for simple feedback or system messages. They disappear after a timeout and cannot be swiped away.<\/p>\n\n\n\n

\"snackbar<\/figure><\/div>\n\n\n\n

20. Metrics<\/h3>\n\n\n\n

Metrics<\/strong> are indicators of whether or not your UX strategy is effective. It tracks changes over time benchmarks against previous iterations of your site or app, and can also display data from your competitors, compare, and help you set different goals.<\/p>\n\n\n\n

\"example<\/figure><\/div>\n\n\n\n

Wrapping Up<\/h3>\n\n\n\n

Your search for Macro-Level UI Design Terminologies appears<\/strong> to have ended. However, these are not the only terms you will encounter while learning or practicing UI\/UX Design. There are additional UI or UX design terminologies at the micro and macro levels.<\/p>\n\n\n\n

Working as a UI\/UX designer and learning the terms is akin to learning a new language. However, we believe that as you continue to learn more about UI and UX design, your vocabulary will grow. Use this term listicle for definitions and to quickly find the answer to a question until you become a UI\/UX design expert.<\/p>\n\n\n\n

We have gifts for you! Two awesome collections of Free & Premium Figma Dashboards, UI Kits & Design systems. Check out!<\/span><\/strong> \ud83d\udc47\ud83e\udd73<\/p>\n\n\n\n

\n
Uko UI – Figma Dashboards & Design System<\/a><\/blockquote>