Tag: best ui design terms

20 Macro-Level UI Design Terminologies for UI/UX Designers
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.

Octavia – Figma Dashboard & Design System

Live Preview Buy Now

Macro-Level UI Design Terminologies

1. Tab

Tabs 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.

2. Tab Bar

A Tab Bar 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.

3. Dropdown

The Dropdown 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.

4. Card

A flexible-size container that organizes information and has the appearance of a playing card is called a Card. 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.

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.

5. To-do or To-do List App

A To-do or To-do list App 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.

6. Table

In UI design, a Table 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.

7. Pagination

The term Pagination 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.

8. Progress Bar

A Progress Bar 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.

9. Navigation

A set of user interface controls provides Navigation 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

10. Components

A Component 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.

11. Charts

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 charts, such as bar charts, pie charts, line charts, column charts, bubble charts, and so on.

12. Breadcrumb

Breadcrumbs 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.

13. Carousel Slider

Carousel Slider 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.

Example of a Carousel Slider:

Example of a Simple Slider:

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.

14. Chatbot

A Chatbot 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.

15. Filtering

Filtering 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.

16. Comments

Comments 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.

17. Accordion

An Accordion 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.

18. Dialogs

Dialogs 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.

19. Snackbars & Toasts

Snackbars 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, on the other hand (Android only), are primarily for simple feedback or system messages. They disappear after a timeout and cannot be swiped away.

20. Metrics

Metrics 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.

Wrapping Up

Your search for Macro-Level UI Design Terminologies appears 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.

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.

We have gifts for you! Two awesome collections of Free & Premium Figma Dashboards, UI Kits & Design systems. Check out! 👇🥳

Uko UI – Figma Dashboards & Design System

Similar Blogs
July 31, 2022
30+ Micro-Level UI Design Terms for UI/UX Designers
The vast industry of UI/UX design and development employs experts from many different backgrounds. While we learn the concepts best by doing the job. However, it is also very helpful to have references (beforehand) that compile key terms and definitions, so that we can easily clear any doubts. Therefore, this comprehensive list of 30+ Micro-Level UI Design Terms will help you understand the key technical terms. And, if you have a clear understanding of these terms, they will pillow your thought process in starting a design session, conversation, or in writing documentation.

Micro-Level UI Design Terms

Uko UI – Figma Dashboards & Design System

1. Color Palette

Color Palette for UI designers specifically refers to a combination of colors for designing a User Interface. A color palette is a collection of colors or a visual foundation for your interface that has been chosen by the designer. It primarily represents the color formations of a brand.

Also, it assists you in maintaining consistency throughout the design and bringing the brand’s aesthetics. This makes it easier for a designer to create visually appealing, pleasing, and enjoyable user experiences.

2. Color Code

Color Code primarily displays information about various colors in a way that a computer can understand and display. These are commonly used in UI design for websites and software applications. These come in various formats.

Currently, modern browsers support 24-bit color (full spectrum). And, guess what! There are over 10.6 million different color combinations available. Some of the most common color code types for UI designers are Hex, RGB, HSL, HSB, and CSS.

3. Typography

Typography in UI design refers to the art of assembling typefaces on an interface. Its goal is to make all copies meaningful to the audience, accessible, readable, legible, and scalable. In other words, typography makes it easier to understand information inside an interface. It enables users to realize how the product or service benefits them.

If the typography is appealing, it will help pique the user’s interest and increase the interface’s conversion rate. As a UI designer, you must understand typographic trends and approaches. Different typographic styles convey a variety of meanings. And, when it comes to UI design, it is best to keep things simple and clean.

4. Heading

Headings are names, titles, various terms, subdivisions, etc. The primary goal of headings is to “improve a page’s usability by making it more scannable.” Users typically scroll down the page looking for relevant keywords to further understand the topic step by step.

In this case, headings divide a page into sections to make a user’s scanning process faster and easier. Headings are also important for search engines to scan and understand the topic and figure out its relevance to the interface. In six sizes, headings are available: From H1 to H6. The H1 heading size is the highest and most important level of heading.

5. Body Height

The Body Height in digital typography is the measurement from the top of the highest letterform to the bottom of the smallest.

6. Paragraph

The most fundamental unit of language that conveys meaning is the Paragraph. Though paragraphs are the core units of text content, designers frequently only specify the font face and size.

7. Form

Forms are a combination of inputs, selects, and text areas. Users who want to submit information fill out forms. One common example is when you order something online and fill out the form with different types of details like your address, quantity, etc. this is called a form.

The auto-filling feature in the form now made it easier for users to fill a form. Below we are going to describe to you what are inputs, selects, and text areas in short.

8. Input Fields

Users can enter various responses using Input Fields, which are crucial components of UI design. They come in a variety of contexts. However, most people have used them while providing personal information and shipping addresses on e-commerce website forms or while submitting online inquiries.

9. Selection

Selection is a group of elements on which user operations will be performed in UI design. Although the computer may make a choice automatically, the user often adds items to the list manually.

10. Textarea

Textarea allows the user to enter and edit long text data displayed in multiple lines. The Text Area has a drag indicator that allows the user to resize the area horizontally and vertically.

11. Icons

Icons in UI design are pictograms or ideograms that are used in web or mobile interfaces to support usability and the successful flow of human-computer interaction.

These are an essential part of creating a visually appealing design, but they can also significantly improve the usability of a website or other digital product.

12. Buttons

Buttons represent actions that users can take. They are typically placed throughout your website’s user interface, and they should be easily found and identifiable, as well as indicate the activities they allow a user to complete.

13. Button Groups

Button Groups are to create toolbars or split buttons for more complex components. These are also useful in UI for acting as mini “tabs,” such as switching between date ranges.

14. Badges

In user interface (UI) design, the term Badge refers to a particular symbol that highlights an interface element. Using badge notification is displayed. A badge adds more details to the component it is tied to.

15. Chips

Chips in UI design are little elements that represent an input, an attribute, or an action.

16. Tags

Tags enable users to quickly identify important information about items by organizing and categorizing them. They use keywords to visually label items with small amounts of information or the item’s status.

17. Avatar

An Avatar is a common UI element that represents users’ identities on the interface. You can see Avatars in business apps, social networks, and games. Even though it is a small object, it has amazing usability & importance: Avatars help people to connect in a more friendly way.

18. Rating

A Rating reflects a user’s interest in the content. Rating systems enable users to highlight the value or benefit of specific content and improve content quality over time in a continuous feedback loop. You can apply this characteristic to products with personalized attributes or without them.

19. Effects

The term Effects in design refers to shadows, elevations, and blurs. When we use a shadow, elevation, or blur in a UI component or element, we call it an effect.

20. Drop Shadow

The term Drop Shadow is a shadow beneath an object. An object can be anything like an element, component, text, or image. When the color of the object and the background are too similar, a drop shadow can help to make it more visible and appealing. However, drop shadows must only be employed sparingly.

An amateur designer usually doesn’t know how to balance a drop shadow beneath objects. Also, in some cases, they put drop shadows even in irrelevant places.

21. Elevation

The Elevation is the z-axis distance or relative depth between two surfaces. The elevation of an element tells us how far apart the surfaces are and how deep the shadow is when measured from the front of one surface to the other.

22. Blur

The term Blur refers to a visual effect when text or image edges appear fuzzy or out of focus. So, blurring is the process of making something less clear or distinct. In the context of image analysis, this could be interpreted broadly – anything that reduces or distorts the detail of an image could apply.

23. Toggle Switch & Toggle Button

Image Source: UX movement

Toggles are user interface control with two mutually exclusive states: ON and OFF or Return and One Way. Designers frequently confuse toggle switches and toggle buttons because they both manage states, but there is a significant difference. Toggle switches represent system states, while toggle buttons represent contextual states.

24. Tooltip

A Tooltip is a popular GUI element. It appears when we hover over an object. Its purpose is to display brief information about that element or component with a text box. An example would be a button’s description that explains what it is about, what an acronym stands for, and similar information.

25. Checkbox

Checkboxes are little square boxes on a user interface. There are two possible states, one is checked and the other one is known as unchecked. The checkmark will appear in the square when it is checked. Utilizing checkboxes, the user is given a variety of options from which to choose as many as necessary to finish their work.

26. Radio Button

On the screen, the Radio Button appears as a little circle. Also, there are two button states, and when you select a button, a solid dot fills the circle. Unlike checkbox groups, radio button groups function as a single control and only allow the user to select one option from the available range.

27. Grid

Grid is a system for arranging layout when creating a responsive interface in UI design. The screen layouts are for websites, mobile apps, or other user interfaces. There are many grid types, and each one has a specific function.

By using rows and columns, the grid system helps in aligning page items. This column layout is used by designers to consistently place text, graphics, and functionalities throughout the design. Every component has a specific location we can easily recognize and duplicate elsewhere.

28. Gutter

The area between columns is known as Gutters. It helps in dividing content. At each breakpoint range, gutter widths are constant values. Gutter widths might vary at various breakpoints to suit a specific screen size.

29. Column Grid

This is the most common type of grid used by UI Designers. The term Column Grid involves taking a page and splitting it into several vertical fields, to which objects are then aligned. To make a complete page designers use column grids extensively.

30. Padding

The spaces between UI elements are Paddings. Padding is an alternative spacing method to keylines. And you can measure it in 8dp or 4dp increments. You can measure padding both vertically and horizontally. To do that it does not have to span the entire height of a layout.

31. Margin

Margins are the spaces of a design that lies between the border and the element. These are all the empty spaces around the border and in between and other elements. A margin surrounds all four sides of the content, which you can change for each side.

32. Baseline Grid

For vertical spacing, a Baseline Grid is an excellent typographic tool. It can also be used to arrange other page elements. To put it another way, it aligns all of your text to a vertical grid, similar to lined papers.

Are These The End Of All Basic UI Design Terms?

It looks like your search for all micro-level UI design terms has ended. However, these are not the only terms that you’ll come across while learning or doing UI Design. There are more UI design terms both in terms of micro and macro levels. But these are the most common small UI design terms that designers always feel confused about at the beginning.

To work as a UI/UX designer and learn the terminology is similar to learning a new language. But, we believe as you will keep learning more about UI and UX design, your vocabulary will improve rapidly. Until you become a design expert, use this term listicle for definitions and quickly find the answer to a question.

Octavia – Figma Dashboard & Design System

Live Preview Buy Now

Similar Articles
July 27, 2022