{"id":35777,"date":"2024-09-12T04:14:43","date_gmt":"2024-09-12T11:14:43","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=35777"},"modified":"2024-09-12T04:17:34","modified_gmt":"2024-09-12T11:17:34","slug":"list-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/","title":{"rendered":"List Design 101 \u2013 A Short Guide for Beginners"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design-1024x512.png\" alt=\"List Design\" class=\"wp-image-35778\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Lists are fundamental components of user interfaces, helping to organize information in a way that\u2019s easy to scan and digest. Whether it\u2019s a simple to-do list or a complex product display, well-designed lists enhance usability and improve the overall user experience. By understanding the principles of list design, designers can create intuitive layouts that streamline navigation and engagement. In this guide, we\u2019ll explore best practices, key principles, and hands-on tips to create visually appealing, functional lists for any UI project.<\/p>\n\n\n\n<p>Optimize your list design process with UXPin Merge. Bring code-backed components to a design editor and create interfaces that are production-ready from the start. Design prototypes that feel like a real product with UI elements that can be shared between design and development. <a href=\"https:\/\/uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access today<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-list-design\">What is a List in UI Design?<\/h2>\n\n\n\n<p>In UI design, a list is a method of organizing information vertically, allowing users to scan and process data quickly. Lists can display a variety of content, from simple text items to more complex layouts that include images, descriptions, and interactive elements.<\/p>\n\n\n\n<p>They improve usability by breaking down information into manageable chunks, ensuring users can navigate effortlessly. Lists are versatile and appear in many forms\u2014such as single-line lists, multi-line lists, and image lists\u2014each tailored to specific content types and design needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-difference-between-a-list-and-a-table\">What is the Difference Between a List and a Data Table?<\/h2>\n\n\n\n<p>Designers use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dashboard-vs-data-report-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">data tables to display a dataset to users<\/a>. Tables have a specific structure, including a header, rows, and columns with sorting and filters to find and manipulate data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"459\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/datatable.webp\" alt=\"datatable\" class=\"wp-image-54582\" style=\"width:450px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/datatable.webp 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/datatable-523x300.webp 523w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/datatable-768x441.webp 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><em>Read this: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/table-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Design a Table UX<\/a><\/em> <\/p>\n\n\n\n<p>Lists don&#8217;t have a fixed structure. Each list item is independent rather than part of a structured dataset with rows and columns. The list item could feature a single line of text in a menu dropdown or a complex card component with lots of data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"807\" height=\"1024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-ui-807x1024.webp\" alt=\"list ui\" class=\"wp-image-54585\" style=\"width:350px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-ui-807x1024.webp 807w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-ui-236x300.webp 236w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-ui-768x974.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-ui.webp 1080w\" sizes=\"auto, (max-width: 807px) 100vw, 807px\" \/><\/figure>\n\n\n\n<p>In summary, the most significant difference between lists and tables is the data structure. Tables have a specific design, while lists can exist in many formats.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-types-of-list-designs\">Types of List Designs<\/h2>\n\n\n\n<p>There are three types of list designs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text lists<\/li>\n\n\n\n<li>Image lists<\/li>\n\n\n\n<li>Card lists<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-text-list-design\">Text List Design<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"725\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-design.webp\" alt=\"list design\" class=\"wp-image-54579\" style=\"width:250px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-design.webp 408w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/list-design-169x300.webp 169w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/figure>\n\n\n\n<p>There are three types of text lists. These lists typically include text and an image, icon, and other UI elements like a checkbox or radio.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Single-line lists<\/strong>: These are the simplest form of lists, displaying only one line of content per item. They work best for short, easily digestible information, like settings or contact lists.<\/li>\n\n\n\n<li><strong>Two-line lists<\/strong>: These lists include a second line, often used for supplementary information, like subtitles or descriptions. They balance brevity and context, making them ideal for emails or notifications.<\/li>\n\n\n\n<li><strong>Three-line lists<\/strong>: These lists display more detailed information, such as titles, descriptions, and additional metadata. They&#8217;re useful for content-heavy items, like product listings or media files.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-image-lists\">Image Lists<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"755\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/vimeo-list-ui-design-1024x755.webp\" alt=\"vimeo list ui design\" class=\"wp-image-54588\" style=\"width:450px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/vimeo-list-ui-design-1024x755.webp 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/vimeo-list-ui-design-407x300.webp 407w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/vimeo-list-ui-design-768x566.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/07\/vimeo-list-ui-design.webp 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Designers use image lists when visuals are the primary content\u2013like an image or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-of-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">video gallery<\/a>. Sometimes a single line of text will accompany the image to provide detail or context.<\/p>\n\n\n\n<p>Where image lists don&#8217;t include text, designers must ensure to use descriptive alt attributes so screen readers can navigate the content accordingly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-card-lists\">Card Lists<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>Card lists typically include visual content and text and may also include a CTA. We often see these card lists in eCommerce store product lists that feature an image, title, short description, category tags, price, and &#8220;Add to cart&#8221; button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-anatomy-of-a-list-design\">How to Design a List UI<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Think Content First<\/h3>\n\n\n\n<p>Designers must decide on the best list item design based on the content they want to display.&nbsp;<\/p>\n\n\n\n<p>UX designers have three primary ways to structure content lists: horizontally, vertically, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-grids-how-to-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">grid layouts<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">List Example: Instagram<\/h4>\n\n\n\n<p>An excellent example of these lists in action is Instagram:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Main feed <\/strong>\u2013 vertical list<\/li>\n\n\n\n<li><strong>Story feed <\/strong>\u2013 horizontal list<\/li>\n\n\n\n<li><strong>Search feed<\/strong> \u2013 masonry grid list<\/li>\n<\/ul>\n\n\n\n<p>UX designers have seemingly endless options and variations within these three list structures.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Follow Atomic Design Principles<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"379\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/list-design-how-to-prototype-a-list.png\" alt=\"list design how to prototype a list\" class=\"wp-image-35813\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/list-design-how-to-prototype-a-list.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/list-design-how-to-prototype-a-list-554x300.png 554w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>There are three components to a list design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The list: All list items together<\/li>\n\n\n\n<li>List item: An individual item in the list<\/li>\n\n\n\n<li>List content: The content that makes a list item\u2013image, text, metadata, title, subtitles, and other user interface elements<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components.png\" alt=\"design system atomic library components\" class=\"wp-image-35010\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>It&#8217;s helpful to use an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">atomic design<\/a> approach when deciding how to put these pieces together.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Atoms:<\/strong> The content within each list item\u2013individual images and text<\/li>\n\n\n\n<li><strong>Molecules: <\/strong>The components within each item\u2013a profile image component<\/li>\n\n\n\n<li><strong>Organisms:<\/strong> Each list item<\/li>\n\n\n\n<li><strong>Templates:<\/strong> The entire list with a search field, filters, etc.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Design with Consistency in Mind<\/h3>\n\n\n\n<p>Consistency is key in list UI design. Ensure that list items follow the same layout, including the placement of text, icons, and actions. This not only enhances the visual flow but also improves usability, as users learn to anticipate where to find the information they need. A consistent structure reduces cognitive load, making the interface more intuitive.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Optimize for Responsiveness<\/h3>\n\n\n\n<p>Always consider <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-vs-adaptive-design-whats-best-choice-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">how your list will appear across different screen sizes<\/a>. On mobile devices, a vertical list may work best, while on desktops, a grid layout could be more effective. Adjust font sizes, spacing, and layout to maintain readability and usability regardless of device.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Test for Accessibility<\/h3>\n\n\n\n<p>Lists must be accessible to all users, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">including those relying on screen readers<\/a>. Use proper HTML elements like ordered or unordered lists, and avoid nested lists when possible. Additionally, ensure proper color contrast for readability and include alternative text for images.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-makes-a-great-list-ui-design\">Best Practices of List UI Design<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Prioritize User Needs<\/h3>\n\n\n\n<p>Good list UI design follows <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">design thinking<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-centered-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">user-centered design principles<\/a>. The list design must match user needs while providing appropriate fields for the content. UX designers must pay attention to responsiveness and how the list will look across multiple devices and screen sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Follow Material Design Principles<\/h3>\n\n\n\n<p>Google&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design UI<\/a> defines <a href=\"https:\/\/material.io\/components\/lists#usage\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">three principles for designing lists<\/a> \u2013 lists must be logical, actionable, and consistent. This means that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Logical<\/strong>: Organize lists in meaningful ways (alphabetical, numerical, etc.).<\/li>\n\n\n\n<li><strong>Actionable<\/strong>: Ensure items are easy to identify and act upon.<\/li>\n\n\n\n<li><strong>Consistent<\/strong>: Use uniform layouts for icons, text, and actions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Make Lists Scannable<\/h3>\n\n\n\n<p>One of the keys to designing a great list UI is <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\" target=\"_blank\" rel=\"noreferrer noopener\">making it easy for users to scan content<\/a> to find what they need. The quicker someone can find what they need, the better the user experience and the more likely they are to use and recommend your product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Leverage Visual Hierarchy<\/h3>\n\n\n\n<p>Hierarchy plays a vital role in making lists scannable and easier to read. UX designers have several ways to create this visual hierarchy, including typography, color, spacing, images, etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">List UI Example: eCommerce<\/h4>\n\n\n\n<p>For example, <a href=\"https:\/\/codepen.io\/CookforWeb\/pen\/rWXqjg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this eCommerce list<\/a> uses color, size, and typography to separate content and create a visual hierarchy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product name<\/strong>: bold black and white typography top center<\/li>\n\n\n\n<li><strong>Product description<\/strong>: smaller grey text<\/li>\n\n\n\n<li><strong>Price<\/strong>: Large dark text<\/li>\n\n\n\n<li><strong>Reviews<\/strong>: Small text with bright star icons<\/li>\n\n\n\n<li><strong>Image<\/strong>: Large circular product image<\/li>\n<\/ul>\n\n\n\n<p>This product list is an excellent example of a visual hierarchy that makes it easy for customers to scan products by the content that matters most to them\u2013i.e., by product name, description, price, etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">List UI Example: Spotify<\/h4>\n\n\n\n<p>In a more simplified example, Spotify uses font size and color to create a visual hierarchy between the song title and the artist. The different size and color make it easy for users to scan a playlist accordingly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-513x1024.jpg\" alt=\"shopidy list design\" class=\"wp-image-35782\" style=\"width:385px;height:768px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-513x1024.jpg 513w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-150x300.jpg 150w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-768x1534.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-769x1536.jpg 769w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design.jpg 1001w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility\">5. Ensure Accessibility<\/h3>\n\n\n\n<p>Lists can cause problems for screen readers, creating a poor user experience for visually impaired users. For example, screen readers can&#8217;t decipher nested lists correctly. So, designers should use a heading with an unordered or ordered list instead.<\/p>\n\n\n\n<p>Further reading on list accessibility:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/accessibility.psu.edu\/listshtml\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lists in HTML from Penn State<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/accessibility.oit.ncsu.edu\/it-accessibility-at-nc-state\/developers\/accessibility-handbook\/lists\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lists from NC State<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/accessibility.oregonstate.edu\/lists\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lists Accessibility from Oregon State University<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-list-design-patterns-and-interactions\">List UI Design Patterns and Interactions<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/interaction-click-hi-fi.png\" alt=\"interaction click hi fi\" class=\"wp-image-32477\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/interaction-click-hi-fi.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/interaction-click-hi-fi-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Here are some common list design patterns and interactions that you can apply to website and mobile app design projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-checkboxes-radiobuttons\">Checkboxes &amp; Radiobuttons<\/h3>\n\n\n\n<p>Checkboxes and radiobuttons are essential UI elements to allow users to make selections and actions on list items. As a general rule, designers use checkboxes for selecting multiple list items and radios for a single selection.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrolling-swiping\">Scrolling &amp; Swiping<\/h3>\n\n\n\n<p>Scrolling and swiping allow users to perform multiple actions. For example, many apps allow users to swipe list items left or right\u2013one way to delete the other to archive.<\/p>\n\n\n\n<p>Designers must also create scrolling interactions and <a href=\"https:\/\/css-tricks.com\/snippets\/javascript\/lazy-loading-images\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">lazy loading<\/a> to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/important-considerations-responsive-design-performance-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimize performance<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-select-lists\">Select Lists<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/tutorials\/make-select-list-interactive-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Select lists or dropdown menus<\/a> allow users to select from several options\u2013like choosing which shipping method they want at checkout. UX designers might also include a search feature for long dropdown menus, a feature we often see for state\/province or country lists.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-collapsing-expanding\">Collapsing &amp; Expanding<\/h3>\n\n\n\n<p>Designers can use collapsable lists to hide and show details. Reducing the amount of content that&#8217;s always visible is crucial for usability and minimizing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive load<\/a>. Collapsable interactions are also useful for nested lists or submenus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-reordering-sorting\">Reordering &amp; Sorting<\/h3>\n\n\n\n<p>Reordering list items gives users control over how they prioritize and experience data. Depending on their preference, they can move items manually up or down the list, usually by dragging and dropping. This customization creates a positive user experience because users can arrange content to suit their needs.&nbsp;<\/p>\n\n\n\n<p>Sorting works similar to reordering, except users choose from predefined categories rather than reorder list items manually. For example, Spotify allows users to sort a playlist by <em>title<\/em>, <em>artist<\/em>, <em>album<\/em>, or <em>recently added<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-filtering\">Filtering<\/h3>\n\n\n\n<p>Filtering helps users find what they need much faster. Accommodation booking platforms like Airbnb and Booking.com allow users to apply multiple filters to list properties that suit their needs and preferences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dividers\">Dividers<\/h3>\n\n\n\n<p>Dividers help create separation between content; however, they can add unnecessary &#8220;visual noise.&#8221; If your lists get too busy, try testing white space as an alternative content separator.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-list-design-in-uxpin\">List UI Design in UXPin<\/h2>\n\n\n\n<p>With UXPin&#8217;s code-based design tool, UX designers can build list prototypes that accurately resemble the final product. Our <a href=\"https:\/\/www.uxpin.com\/examples\/multilevel-dropdown-navigation\" target=\"_blank\" rel=\"noreferrer noopener\">Multilevel Dropdown Navigation<\/a> example demonstrates how designers can use <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\" target=\"_blank\" rel=\"noreferrer noopener\">States<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interactions<\/a> to <a href=\"https:\/\/preview.uxpin.com\/3fd1c05b167e1e6dbe76efac5c171cac2760280b#\/pages\/\/simulate\/no-panels?mode=ccvid\" target=\"_blank\" rel=\"noreferrer noopener\">build a functioning dropdown list<\/a>\u2013using <em>only<\/em> a single frame.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing a List with MUI Components in UXPin Merge<\/h2>\n\n\n\n<p>With UXPin Merge, you can sync code components like MUI (Material-UI) into UXPin for fully interactive prototyping. Follow this tutorial to create a list using MUI components.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Import MUI Components<\/h4>\n\n\n\n<p>Ensure you have your MUI components integrated into UXPin using Merge. This will allow you to drag and drop pre-coded components directly into your design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Add a List Component<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In UXPin, navigate to your MUI component library.<\/li>\n\n\n\n<li>Drag the MUI <code>List<\/code> component into your canvas. This is the container for your list items.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Configure List Items<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Next, drag in <code>ListItem<\/code> components within the list container. These components will represent individual list items.<\/li>\n\n\n\n<li>Use <code>ListItemText<\/code> to add the main content, such as the title or description for each list item.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Customize with MUI Properties<\/h4>\n\n\n\n<p>With Merge, you can modify component properties like styling, layout, and behavior. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typography<\/strong>: Adjust fonts, colors, and sizes within the <code>ListItemText<\/code> to create a visual hierarchy.<\/li>\n\n\n\n<li><strong>Icons<\/strong>: Use <code>ListItemIcon<\/code> to include interactive icons, such as checkmarks or navigation arrows.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Add Interactions<\/h4>\n\n\n\n<p>Use UXPin\u2019s interaction panel to add click actions, hover states, or dynamic behaviors. For example, configure the list item to navigate to another page or trigger a modal when clicked.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Preview and Test<\/h4>\n\n\n\n<p>Use UXPin\u2019s Preview mode to test the list in a fully functional prototype. Check responsiveness and usability across different devices to ensure an optimal experience.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 7: Hand-off to Developers<\/h4>\n\n\n\n<p>With UXPin Merge, your list UI is code-ready. Developers can directly access the code, ensuring a seamless design-to-development process without discrepancies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-increase-fidelity-and-functionality-with-uxpin-merge\">Increase Fidelity and Functionality with UXPin Merge<\/h2>\n\n\n\n<p>Take your prototypes to the next level using UXPin&#8217;s proprietary <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a>. Sync your product&#8217;s <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> or an open-source <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> from a repository to UXPin&#8217;s editor so designers can build prototypes using fully functioning code components.<\/p>\n\n\n\n<p>You can see Merge in action with our <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">MUI library integration<\/a>. Using MUI&#8217;s React library, designers can build fully functioning list prototypes. MUI&#8217;s React components come complete with states and interactions, so designers only have to focus on product design rather than building everything from scratch. Everything you see in <a href=\"https:\/\/mui.com\/material-ui\/react-list\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI&#8217;s documentation<\/a>, designers can replicate in UXPin without writing a single line of code. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lists are fundamental components of user interfaces, helping to organize information in a way that\u2019s easy to scan and digest. Whether it\u2019s a simple to-do list or a complex product display, well-designed lists enhance usability and improve the overall user experience. By understanding the principles of list design, designers can create intuitive layouts that streamline<\/p>\n","protected":false},"author":3,"featured_media":35778,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,4,6,7],"tags":[],"class_list":["post-35777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"List Design 101 \u2013 A Short Guide for Beginners %%sitename%%","yoast_metadesc":"Here's how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>List Design 101 \u2013 A Short Guide for Beginners Studio by UXPin<\/title>\n<meta name=\"description\" content=\"Here&#039;s how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"List Design 101 \u2013 A Short Guide for Beginners\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-12T11:14:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-12T11:17:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"List Design 101 \u2013 A Short Guide for Beginners\",\"datePublished\":\"2024-09-12T11:14:43+00:00\",\"dateModified\":\"2024-09-12T11:17:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/\"},\"wordCount\":2068,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/List-Design.png\",\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/\",\"name\":\"List Design 101 \u2013 A Short Guide for Beginners Studio by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/List-Design.png\",\"datePublished\":\"2024-09-12T11:14:43+00:00\",\"dateModified\":\"2024-09-12T11:17:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Here's how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/List-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/List-Design.png\",\"width\":1200,\"height\":600,\"caption\":\"List Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/list-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"List Design 101 \u2013 A Short Guide for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"List Design 101 \u2013 A Short Guide for Beginners Studio by UXPin","description":"Here's how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/","og_locale":"en_US","og_type":"article","og_title":"List Design 101 \u2013 A Short Guide for Beginners","og_description":"Here's how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-12T11:14:43+00:00","article_modified_time":"2024-09-12T11:17:34+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"List Design 101 \u2013 A Short Guide for Beginners","datePublished":"2024-09-12T11:14:43+00:00","dateModified":"2024-09-12T11:17:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/"},"wordCount":2068,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png","articleSection":["Blog","Responsive Web Design","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/","name":"List Design 101 \u2013 A Short Guide for Beginners Studio by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png","datePublished":"2024-09-12T11:14:43+00:00","dateModified":"2024-09-12T11:17:34+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Here's how you should design a list that is readable and easy to use. Discover the most popular list design patterns and interactions","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/list-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/List-Design.png","width":1200,"height":600,"caption":"List Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"List Design 101 \u2013 A Short Guide for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=35777"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35777\/revisions"}],"predecessor-version":[{"id":54595,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/35777\/revisions\/54595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/35778"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=35777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=35777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=35777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}