{"id":12202,"date":"2022-07-27T13:02:35","date_gmt":"2022-07-27T13:02:35","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=12202"},"modified":"2022-08-21T06:19:42","modified_gmt":"2022-08-21T06:19:42","slug":"micro-level-ui-design-terms-for-ui-ux-designers","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/micro-level-ui-design-terms-for-ui-ux-designers\/","title":{"rendered":"30+ Micro-Level UI Design Terms for UI\/UX Designers"},"content":{"rendered":"\n<p>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 <strong>30+ Micro-Level UI Design Terms<\/strong> 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.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"343\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ui-design-terms.png\" alt=\"A mentor teaching ui design terms to a beginner ui\/ux designer\" class=\"wp-image-12225\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ui-design-terms.png 675w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ui-design-terms-300x152.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">Micro-Level UI Design Terms<\/h2>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-ui-lib wp-block-embed-ui-lib\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"k1Cx3jmHHF\"><a href=\"https:\/\/ui-lib.com\/downloads\/uko-ui-figma-design-system\/\">Uko UI &#8211; Figma Dashboards &#038; Design System<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Uko UI &#8211; Figma Dashboards &#038; Design System&#8221; &#8212; Ui Lib\" src=\"https:\/\/ui-lib.com\/downloads\/uko-ui-figma-design-system\/embed\/#?secret=Z0UoKDw4qc#?secret=k1Cx3jmHHF\" data-secret=\"k1Cx3jmHHF\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-color-palette\">1. Color Palette <\/h3>\n\n\n\n<p><strong>Color Palette<\/strong> for UI designers specifically refers to a combination of colors for designing a <a href=\"https:\/\/en.wikipedia.org\/wiki\/User_interface\" target=\"_blank\" rel=\"noreferrer noopener\">User Interface<\/a>.&nbsp; A <a href=\"https:\/\/www.figma.com\/community\/file\/1029506782158027808\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">color palette<\/a> 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. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"132\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/color-palette-ui-design.png\" alt=\"What is a color palatte - ui design terms\" class=\"wp-image-12234\"\/><\/figure><\/div>\n\n\n\n<p>Also, it assists you in maintaining consistency throughout the design and bringing the&nbsp;brand&#8217;s aesthetics. This makes it easier for a designer to create visually appealing, pleasing, and enjoyable user experiences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-color-code\">2. Color Code<\/h3>\n\n\n\n<p><strong>Color Code<\/strong> 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&nbsp;various formats.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"130\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/color-code.png\" alt=\"color code in ui design term explained\" class=\"wp-image-12235\"\/><\/figure><\/div>\n\n\n\n<p>Currently, modern browsers support 24-bit color (full spectrum). And, &nbsp;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-typography\">3. Typography<\/h3>\n\n\n\n<p><strong>Typography<\/strong> 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,&nbsp;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.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/Ui-design-typography.png\" alt=\"example of typography\" class=\"wp-image-12236\" width=\"329\" height=\"170\"\/><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/www.mindinventory.com\/blog\/how-to-use-typography-in-ui-design\/\" target=\"_blank\" rel=\"noopener\">If the typography is appealing<\/a>, it will help&nbsp;pique the user&#8217;s interest and increase the interface&#8217;s conversion&nbsp;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-heading\">4. Heading<\/h3>\n\n\n\n<p><strong>Headings<\/strong> are names, titles, various terms, subdivisions, etc. The primary goal of headings is to &#8220;improve a page&#8217;s usability by making it more scannable.&#8221; Users typically scroll down the page looking for relevant keywords to further understand the topic step by step. <\/p>\n\n\n\n<p>In this case, headings divide a page into sections to make a user&#8217;s scanning process faster and easier. <a href=\"https:\/\/www.uxbooth.com\/articles\/5-tips-to-make-your-headers-more-user-friendly\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headings are also important<\/a> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-body-height\">5. Body Height <\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"107\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/body-height-in-typography.png\" alt=\"body height in typography\" class=\"wp-image-12238\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/body-height-in-typography.png 500w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/body-height-in-typography-300x64.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<p>The <strong>Body<\/strong> <strong>Height<\/strong> in digital typography is the measurement from the top of the highest letterform to the bottom of the smallest.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-paragraph\">6. Paragraph<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/paragraph-in-ui-design.png\" alt=\"paragraph in ui design\" class=\"wp-image-12239\" width=\"293\" height=\"260\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/paragraph-in-ui-design.png 509w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/paragraph-in-ui-design-300x266.png 300w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/figure><\/div>\n\n\n\n<p>The most fundamental unit of language that conveys meaning is the <strong>Paragraph<\/strong>. Though paragraphs are the core units of text content, designers frequently only specify the font face and size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-form\">7. Form<\/h3>\n\n\n\n<p><strong>Forms<\/strong> are a&nbsp;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. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/form-in-ui-design.png\" alt=\"form in ui design\" class=\"wp-image-12240\" width=\"277\" height=\"357\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/form-in-ui-design.png 375w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/form-in-ui-design-232x300.png 232w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><\/figure><\/div>\n\n\n\n<p>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. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-input-fields\">8. Input Fields<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"98\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/input-field.png\" alt=\"input fields in ui design\" class=\"wp-image-12241\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/input-field.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/input-field-300x74.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p>Users can enter various&nbsp;responses using <strong>Input Fields<\/strong>, which are crucial components of UI&nbsp;design. They come in&nbsp;a variety of contexts. However, most people have used&nbsp;them while providing personal information and shipping addresses on e-commerce website forms or while submitting online inquiries.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-9-selection\">9. Selection<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/selection.png\" alt=\"selection in ui design\" class=\"wp-image-12243\" width=\"198\" height=\"290\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/selection.png 292w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/selection-205x300.png 205w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Selection<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-10-textarea\">10. Textarea<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/textarea.png\" alt=\"textarea\" class=\"wp-image-12244\" width=\"452\" height=\"219\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/textarea.png 500w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/textarea-300x145.png 300w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Textarea<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-11-icons\">11. Icons<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"210\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/icons-in-ui-design.png\" alt=\"icons - ui design terms\" class=\"wp-image-12245\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/icons-in-ui-design.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/icons-in-ui-design-300x158.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p><strong><a href=\"https:\/\/fontawesome.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener\">Icons<\/a><\/strong> 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.<\/p>\n\n\n\n<p>These are an essential part of creating a visually appealing&nbsp;design, but they can also significantly improve the usability of a website or other digital product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-12-buttons\">12. Buttons<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"280\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/buttons-in-ui-design.png\" alt=\"buttons\" class=\"wp-image-12246\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/buttons-in-ui-design.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/buttons-in-ui-design-300x210.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Buttons<\/strong>&nbsp;represent actions that users can take. They are typically placed throughout your website&#8217;s user interface, and they should be easily found and identifiable, as well as indicate the activities they allow a user to complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-13-button-groups\">13. Button Groups<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"174\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/button-group.png\" alt=\"button groups\" class=\"wp-image-12247\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/button-group.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/button-group-300x131.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Button Groups<\/strong> are&nbsp;to create toolbars or split buttons for more complex components. These are also useful in UI for acting as mini &#8220;tabs,&#8221; such as switching between date ranges.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-14-badges\">14. Badges<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/badges-and-their-usage-in-ui-design.png\" alt=\"badges in ui design\" class=\"wp-image-12250\" width=\"487\" height=\"278\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/badges-and-their-usage-in-ui-design.png 600w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/badges-and-their-usage-in-ui-design-300x172.png 300w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/figure><\/div>\n\n\n\n<p>In user interface (UI) design, the term <strong>Badge<\/strong> 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. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>15. Chips<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"240\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/chips-for-ingredients.png\" alt=\"chips in ui design\" class=\"wp-image-12248\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/chips-for-ingredients.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/chips-for-ingredients-300x180.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Chips<\/strong> in UI design are little elements that represent an input, an attribute, or an action.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-16-tags\">16. Tags<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/tags-in-ui-design.png\" alt=\"tags - ui design term definition\" class=\"wp-image-12253\" width=\"427\" height=\"263\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/tags-in-ui-design.png 463w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/tags-in-ui-design-300x185.png 300w\" sizes=\"auto, (max-width: 427px) 100vw, 427px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Tags<\/strong>&nbsp;enable&nbsp;users&nbsp;to&nbsp;quickly&nbsp;identify&nbsp;important&nbsp;information&nbsp;about&nbsp;items&nbsp;by&nbsp;organizing&nbsp;and&nbsp;categorizing&nbsp;them.&nbsp;They&nbsp;use&nbsp;keywords&nbsp;to&nbsp;visually&nbsp;label&nbsp;items&nbsp;with&nbsp;small&nbsp;amounts&nbsp;of&nbsp;information&nbsp;or&nbsp;the&nbsp;item&#8217;s&nbsp;status.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-17-avatar\">17. Avatar<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"261\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/avatar-in-ui-design.png\" alt=\"Avatar in ui design\" class=\"wp-image-12254\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/avatar-in-ui-design.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/avatar-in-ui-design-300x196.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p>An <strong>Avatar<\/strong> is a common UI element&nbsp;that represents users&#8217; identities on the interface. You can see&nbsp;Avatars in business apps, social networks, and games. Even though it is a small object, it has amazing usability &amp; importance: Avatars help people to&nbsp;connect in a more friendly&nbsp;way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-18-rating\">18. Rating<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ratings.png\" alt=\"Rating - UI Design term\" class=\"wp-image-12255\" width=\"314\" height=\"346\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ratings.png 339w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/ratings-273x300.png 273w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" \/><\/figure><\/div>\n\n\n\n<p>A <strong>Rating<\/strong> reflects a user&#8217;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&nbsp;attributes or without them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-19-effects\">19. Effects<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"200\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/effects.png\" alt=\"effects in ui design\" class=\"wp-image-12256\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/effects.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/effects-300x150.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p>The term <strong>Effects<\/strong> 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&nbsp;an effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-20-drop-shadow\">20. Drop Shadow<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/drop-shadow.png\" alt=\"drop shadow example\" class=\"wp-image-12257\" width=\"266\" height=\"237\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/drop-shadow.png 320w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/drop-shadow-300x267.png 300w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/figure><\/div>\n\n\n\n<p>The term <strong>Drop Shadow<\/strong> 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.<\/p>\n\n\n\n<p>An amateur designer usually doesn&#8217;t know how to balance a drop shadow beneath objects. Also, in some cases, they put drop shadows even in irrelevant places.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-21-elevation\">21. Elevation<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/elevation.png\" alt=\"elevation example\" class=\"wp-image-12259\" width=\"280\" height=\"214\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/elevation.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/elevation-300x230.png 300w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure><\/div>\n\n\n\n<p>The <strong>Elevation<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-22-blur\">22. Blur<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"118\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/blur-in-ui-design.png\" alt=\"blur effect in ui design\" class=\"wp-image-12261\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/blur-in-ui-design.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/blur-in-ui-design-300x89.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p>The term <strong>Blur<\/strong> 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 &#8211; anything that reduces or distorts the detail of an image could apply.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-23-toggle-switch-toggle-button\">23. Toggle Switch &amp; Toggle Button<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/uxmovement.com\/mobile\/stop-misusing-toggle-switches\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/toogle-switch-vs-toggle-button.png\" alt=\"toggle switch vs toggle button\" class=\"wp-image-12262\" width=\"470\" height=\"149\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/toogle-switch-vs-toggle-button.png 492w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/toogle-switch-vs-toggle-button-300x95.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><figcaption>Image Source: UX movement<\/figcaption><\/figure><\/div>\n\n\n\n<p>Toggles are&nbsp;user interface control with two mutually exclusive states: ON and OFF or Return and One Way.&nbsp;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-24-tooltip\">24. Tooltip<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"169\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/tooltip.png\" alt=\"tooltip\" class=\"wp-image-12263\"\/><\/figure><\/div>\n\n\n\n<p>A <strong>Tooltip<\/strong> is a popular <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_graphical_user_interface_elements#:~:text=Graphical%20user%20interface%20elements%20are,with%20and%20use%20computer%20software.\" target=\"_blank\" rel=\"noreferrer noopener\">GUI element<\/a><\/strong>. 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&#8217;s description that explains what it is about, what an acronym stands for, and similar information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-25-checkbox\">25. Checkbox<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"164\" height=\"256\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/checkbox.png\" alt=\"checkbox in ui design\" class=\"wp-image-12264\"\/><\/figure><\/div>\n\n\n\n<p><strong>Checkboxes<\/strong>&nbsp;are&nbsp;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">26. Radio Button<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"172\" height=\"292\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/radio-button.png\" alt=\"radio button\" class=\"wp-image-12265\"\/><\/figure><\/div>\n\n\n\n<p>On the screen, the <strong>Radio Button<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-27-grid\">27. Grid<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/grid.png\" alt=\"types of grid in ui design\" class=\"wp-image-12266\" width=\"497\" height=\"190\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/grid.png 591w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/grid-300x115.png 300w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/figure><\/div>\n\n\n\n<p><strong><a href=\"https:\/\/www.youtube.com\/watch?v=n_V_aLqYPI0\" target=\"_blank\" rel=\"noreferrer noopener\">Grid<\/a><\/strong> 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-28-gutter\">28. Gutter<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/gutter.png\" alt=\"gutter in grid\" class=\"wp-image-12267\" width=\"306\" height=\"240\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/gutter.png 397w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/gutter-300x235.png 300w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><\/figure><\/div>\n\n\n\n<p>The area between columns is known as <strong>Gutters<\/strong>. It helps&nbsp;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.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-29-column-grid\">29. Column Grid<\/h3>\n\n\n\n<p>This is the most common type of grid used by UI Designers.&nbsp;The term <strong>Column Grid<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-30-padding\">30. Padding<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"160\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/padding-in-ui-design.png\" alt=\"padding\" class=\"wp-image-12268\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/padding-in-ui-design.png 400w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/padding-in-ui-design-300x120.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<p>The spaces between UI elements are Paddings. <strong>Padding<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-31-margin\">31. Margin<\/h3>\n\n\n\n<p><strong>Margins<\/strong> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">32. Baseline Grid<\/h3>\n\n\n\n<p>For vertical spacing, a&nbsp;<strong>Baseline Grid<\/strong>&nbsp;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Are These The End Of All Basic UI Design Terms?<\/h3>\n\n\n\n<p>It looks like your search for all <strong>micro-level UI design terms<\/strong> has ended. However, these are not the only terms that you&#8217;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. <\/p>\n\n\n\n<p>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&nbsp;quickly find the answer to a question.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong><a href=\"https:\/\/store.vuetifyjs.com\/products\/octavia-admin-pro-figma-kit\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-luminous-vivid-orange-color\">Octavia &#8211; Figma Dashboard &amp; Design System<\/span><\/a><\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/store.vuetifyjs.com\/products\/octavia-admin-pro-figma-kit\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"458\" src=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/octavia-design-system-dashboard-1.png\" alt=\"octavia - figma design system and dashboard\" class=\"wp-image-12229\" srcset=\"https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/octavia-design-system-dashboard-1.png 700w, https:\/\/ui-lib.com\/blog\/wp-content\/uploads\/2022\/07\/octavia-design-system-dashboard-1-300x196.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><strong><a class=\"button\" href=\"https:\/\/www.figma.com\/file\/sm013rBADsF87wiqo0Vu5A\/Octavia-Pro-V1.0.0-Preview?node-id=931%3A16272\" target=\"_blank\" rel=\"noopener\">Live Preview<\/a><\/strong>       <strong><a class=\"button\" href=\"https:\/\/vuetify.myshopify.com\/26950984\/checkouts\/1a4bdb4e196147607d7e2792fb3ae715\" target=\"_blank\" rel=\"noopener\">Buy Now<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\"><span class=\"has-inline-color has-luminous-vivid-orange-color\">Similar Articles<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/ui-lib.com\/blog\/ui-design-principles-for-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI Design Principles You Must Not Forget As A UI\/UX Designer<\/a><\/li><li><a href=\"https:\/\/ui-lib.com\/blog\/free-figma-design-system\/\">Best Free Figma Design Systems for UI\/UX Designers<\/a><\/li><li><a href=\"https:\/\/ui-lib.com\/blog\/figma-wireframe-kits\/\">Free Figma Wireframe Kits for Web\/App Designers<\/a><\/li><li><a href=\"https:\/\/ui-lib.com\/blog\/free-figma-ui-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best Free Figma UI Kits for Web App Designers<\/a><\/li><li><a href=\"https:\/\/ui-lib.com\/blog\/free-figma-icon-library\/\">Free Figma Icon Library for Web &amp; App Developers<\/a><\/li><li><a href=\"https:\/\/ui-lib.com\/blog\/figma-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma Plugins For Web &amp; App Designers<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ui-lib.com\/blog\/micro-level-ui-design-terms-for-ui-ux-designers\/\">Continue reading<span class=\"screen-reader-text\">30+ Micro-Level UI Design Terms for UI\/UX Designers<\/span><\/a><\/div>\n","protected":false},"author":3,"featured_media":12222,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,859],"tags":[951,946,949,952,945,947,942,943,948,944,941,950],"class_list":["post-12202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system","category-uikits","tag-basic-ui-design-terms","tag-best-ui-design-terms","tag-complete-glossary-for-ui-design","tag-fundamental-ui-design-terms","tag-terms-for-ui-design","tag-top-ui-design-terms","tag-ui","tag-ui-design","tag-ui-design-glossary","tag-ui-design-terminology","tag-ui-design-terms","tag-ui-ux-design-terminology","entry"],"_links":{"self":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/12202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/comments?post=12202"}],"version-history":[{"count":35,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/12202\/revisions"}],"predecessor-version":[{"id":12466,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/posts\/12202\/revisions\/12466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media\/12222"}],"wp:attachment":[{"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/media?parent=12202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/categories?post=12202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ui-lib.com\/blog\/wp-json\/wp\/v2\/tags?post=12202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}