{"id":9417,"date":"2022-10-20T06:14:00","date_gmt":"2022-10-20T13:14:00","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9417"},"modified":"2024-09-09T07:40:34","modified_gmt":"2024-09-09T14:40:34","slug":"card-design-ui","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/","title":{"rendered":"The Playful Power of Card Design UI"},"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\/10\/card-design-UI-1024x512.png\" alt=\"card design UI\" class=\"wp-image-37216\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.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>Card UIs appear in many digital products, websites, and enterprise applications. Understanding card layout, visual hierarchy, and basic best practices are crucial for designing great card user interfaces.<\/p>\n\n\n\n<p>This article explores card user interface design, the anatomy of cards, common use cases, and design inspiration for your next project.<\/p>\n\n\n\n<p>Design, prototype, and test card UIs at higher fidelity and functionality with UXPin Merge. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page<\/a> to learn more about component-driven prototyping and how to request access to this revolutionary user experience technology.<\/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\">What is a Card in UI Design?<\/h2>\n\n\n\n<p><a href=\"https:\/\/material.io\/components\/cards\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google&#8217;s Material Design succinct description<\/a> says, <em>&#8220;Cards contain content and actions about a single subject.&#8221;<\/em> Cards are <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-patterns-focus-on\/\" target=\"_blank\" rel=\"noreferrer noopener\">design patterns<\/a> UX teams use to display content so that it&#8217;s easy for users to digest.<\/p>\n\n\n\n<p>A card can be as simple as a title and image, such as this one from Google Maps.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/I7bdaG3bfzjdwP7HO6ACGzO0RLdCdh9pzYOh-UPEeOzuYVTYlL2QT6TmzZ6pbD_oX-YAvkPRfnHLj5dFO3_c6YT8CBaHpTzwsDuEWrDU0Q79VPHKhx7XHafoA8ZD1t-ctOhwINdctc4xVufpWlc1aZQOZb3-ZxNmssttiLc6HTdsO3axCEmY6nhiSQ\" alt=\"Card Design UI Google Search\" width=\"540\" height=\"603\"\/><\/figure>\n\n\n\n<p>Or, more complex, like this card from Instagram with an image, logo, dropdown\/overflow menu, multiple actions, a comment section, and a date stamp.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/rc4IHGYG2Xsq6v-0uZTU-pJqJRY6kze4Z7V1Y2gvkcr0VWMCwL-Bs00pI8pyUYAOAA_5p5k8gHSJqSva186qXXmJaEAYuUfLmClqoJ6DKHFcd3ieJLSd9xh5i4JOsvm6VFd0jIYbMJTyoXHiEDHPFL7gAdT0kGT2wi7yoRHz7wkU4wOsPCRtTdKnRg\" alt=\"Instagram Card Design UI \" width=\"487\" height=\"800\"\/><\/figure>\n\n\n\n<p>Designers generally use cards to display a collection of content rather than a stand-alone item. These cards tell users that the content is related\u2013like images in your Instagram feed or the latest blog posts on a website&#8217;s homepage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Card Anatomy<\/h3>\n\n\n\n<p>We&#8217;ve borrowed this helpful dissection from Google&#8217;s Material Design depicting a card&#8217;s anatomy. Not every card will have these elements in this layout, but it&#8217;s an excellent illustration of the typical items designers use to create UI components.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/u3smMGnEtp8NiQixJyrD5NNnjmNGDSOMSSXxqbuxQGPDi_mZyl7XE5RrDqO_K5-40yL8vlXLmF5pLGvLEdgXJ90MfJPOnQxU-YzjSK3Lu-91jFxJ_VVor-lX8jFnWkeMQ4mSPOJobyyTW5_tuuyhOP4coZ3PE8fSldZGlgPsA6Cq4RNz4W8AUK3zSg\" alt=\"Anatomy of Card Design UI \" width=\"650\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Container:<\/strong> every card must have a container to house its content. These containers create separation between cards and surrounding content.<\/li><li><strong>Thumbnail:<\/strong> an avatar, logo, or icon, usually displaying ownership or relation. Instagram uses this thumbnail for the user&#8217;s profile pic.<\/li><li><strong>Header text:<\/strong> the card&#8217;s name or title. For a blog post, this might be the article&#8217;s H1 title.<\/li><li><strong>Subheading:<\/strong> a subheading may contain additional information, like the date or location.<\/li><li><strong>Media:<\/strong> cards often contain a <em>relevant<\/em> image or video. The Google Maps card above show pictures of Central Park and The Metropolitan Museum of Art on each card. Cards can have a single media item or carousel with multiple images and videos.&nbsp;<\/li><li><strong>Supporting text:<\/strong> a summary or description of the card and its contents.<\/li><li><strong>Buttons:<\/strong> CTAs with text (Read more, Add to cart, Buy now, etc.).<\/li><li><strong>Icons:<\/strong> actions using icon buttons (like, share, etc.).<\/li><\/ol>\n\n\n\n<p>Buttons and icons allow users to perform various actions, but cards don&#8217;t need these actions to be interactive. Designers can make the entire card a link to a piece of content (a blog post) or embed actions (a double tap to like an Instagram post).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-4-types-of-card-ui-designs\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">4 Types of Card UI Designs<\/span><\/h2>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">There are many advantages of card UI designs, but one of the most important is the ease in recreating them in unique ways that will convey a website\u2019s personality. There are a variety of card types, and when looking at the most popular and effective, the following four styles show up most consistently.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-pins\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">1. Pins<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Based on the Pinterest platform, Pins are easily the most recognizable card layout. While <\/span><a href=\"https:\/\/www.cnbc.com\/2019\/01\/24\/smartphones-72percent-of-people-will-use-only-mobile-for-internet-by-2025.html\" target=\"_blank\" style=\"background-color: transparent; color: rgb(17, 85, 204);\" rel=\"noopener noreferrer\">72 percent<\/a><span style=\"background-color: transparent; color: rgb(0, 0, 0);\"> of internet users will access the web solely with smartphones by 2025, Pinterest is already accessed via mobile devices by <\/span><a href=\"https:\/\/sproutsocial.com\/insights\/pinterest-statistics\/\" target=\"_blank\" style=\"background-color: transparent; color: rgb(17, 85, 204);\" rel=\"noopener noreferrer\">80 percent<\/a><span style=\"background-color: transparent; color: rgb(0, 0, 0);\"> of their users. Unfortunately, the quick growth in popularity of this style of card UI was its downfall. Sites using Pins today often appear unoriginal.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-flat-design\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">2. Flat Design<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Microsoft took a step away from the skeuomorphism employed in its early software designs and instead embraced bright colors and simple visuals. When looking at popular card patterns, their interface was likely the earliest widespread example most people were introduced to. Since that time, however, these cards <\/span>have evolved<span style=\"background-color: transparent; color: rgb(0, 0, 0);\"> to better reflect modern tastes.\u00a0<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-masonry-grid\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">3. Masonry (Grid)<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">One of the easiest card UI patterns to understand and browse is the <\/span><a href=\"http:\/\/designshack.net\/articles\/css\/masonry\/\" target=\"_blank\" style=\"background-color: transparent; color: rgb(17, 85, 204);\" rel=\"noopener noreferrer\">masonry-style framework<\/a><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">. These cards are arranged in a logical order, and they\u2019re typically displayed in neat grids featuring equal spacing between cards.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-magazine-style\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">4. Magazine Style<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">You once would only see Magazine Style interfaces on news and entertainment websites, but its popularity has pushed its use into other types of online platforms. Even content-heavy domains &#8211; such as portfolios and blogs &#8211; have taken to using this type of card. The layout merely features a text tag or teaser image that links to a full article on another page.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Regardless of the style of card UI being utilized, the main point is to showcase a large amount of content in a way that\u2019s easily digestible to users without the potential of overwhelming them.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common Use Cases for Cards UI Design<\/h2>\n\n\n\n<p>We see cards everywhere, from web design and mobile apps to games and streaming services. Here are some common use cases for card UI design and the problems they aim to solve.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Media cards<\/h3>\n\n\n\n<p>Designers use media cards to display visual content for social media posts or articles. The media (image or video) and title (headline) are prominent to attract attention and engagement. Most news websites use media cards to display their articles\u2013like <a href=\"https:\/\/www.bbc.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this example from the BBC&#8217;s homepage<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/xR_MIauSs-h4Z0CaodG5PNzRVyrmfTBHBGXTRgfZRm5Qh-vA_2wCv8YFpatMDcmPGgd0hpmi0NEPQ0kTAOwBtIWbxxNKY84B_nI2duW7g8YpbYNkTukQ_TKvH_w6dHAu9zb415iYoVmW6Nfnhgm5WCkTYI_Rc7vXgttktgOwIEH6wMONrRLwzcU13g\" alt=\"Card Design UI of BBC\" width=\"650\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Modal cards<\/h3>\n\n\n\n<p>Modal cards are similar to media cards but present the user with several actions on tap\/click. Streaming services, in-flight services, and car infotainment UIs use modal cards to display TV shows, movies, and other content.<\/p>\n\n\n\n<p>These streaming cards generally feature an image of the program&#8217;s poster with a title. When the user clicks\/taps a card, a modal appears with several options, like play, add to favorites, rate, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Product cards<\/h3>\n\n\n\n<p>Product cards are optimized for selling products and services. They usually have a media item, product title, price, and CTA (Buy Now or Add to Cart).<\/p>\n\n\n\n<p>Product cards might include additional information to create FOMO and entice shoppers, including a sale\/discount tag, review score, and availability. This example from the <a href=\"https:\/\/themes.shopify.com\/themes\/local\/styles\/light\/preview\">Local Shopify theme<\/a> displays the typical UI elements designers use for eCommerce product cards.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/2KrDHK0Qc2YvjiLMJgUlEQmrSAeIiHdGKU1SaUdC_tZg1n-kjG2iFsPihvkTKi6_KzdimEFPi2CdQljncsAKSBW5sL7-YYuiNyFHkpOV6iICRzk3dXzKuHtE6koFt4voAVXlu9sWa6AljVgQZe3VZwTS5YdnZ-a268VKBNWbizaeNI4Ss27uUeqDBw\" alt=\"Product Card Design UI \" width=\"650\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">List cards<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/list-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">List UIs<\/a> often use cards to display content like music playlists, contacts, tasks, etc. List cards generally feature a title, subtitle, and image (perhaps a checkbox for task cards). Designers might include a menu icon or swipe interactions to reveal the card&#8217;s options (edit, delete, archive, etc.).<\/p>\n\n\n\n<p>This list card example from a Spotify playlist shows the artist\/album image, song title, and artist&#8217;s name. The three-dot icon to the right opens a menu with several options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/06\/shopidy-list-design-513x1024.jpg\" alt=\"spotify list design\" class=\"wp-image-35782\" width=\"257\" height=\"512\" 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: 257px) 100vw, 257px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Data cards<\/h3>\n\n\n\n<p>Data cards display analytics, graphics, and statistical information on an app&#8217;s dashboard UI. These UI cards are most common in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/enterprise-ui-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">enterprise design<\/a>, but they also appear in consumer products like activity trackers, budgeting apps, and banking apps, to name a few.<\/p>\n\n\n\n<p>This example from <a href=\"https:\/\/dribbble.com\/shots\/15909695-Banking-App-for-Couples\" target=\"_blank\" rel=\"noreferrer noopener\">Purrweb UI\/UX Studio on Dribbble<\/a> shows how designers use cards to show users their four recent transfers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Property cards<\/h3>\n\n\n\n<p>Real estate listings and booking platforms like Airbnb and Booking.com use similar UI card layouts:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Listing title: number of rooms or type of accommodation<\/li><li>Subtitle: location or distance from the area you&#8217;re searching<\/li><li>Price: purchase\/rent\/per night<\/li><li>Description: 1-3 sentences describing the property or icons highlighting key features (rooms, bathrooms, etc.)<\/li><li>Star rating (booking apps): guest reviews<\/li><li>Favorite icon button: adds the property to your favorites<\/li><li>CTA: Book or Contact<\/li><\/ul>\n\n\n\n<p>These property cards allow users to scan many options as quickly as possible. Clicking back and forth is time-consuming, creating a poor user experience. Designers must use UX research and user interviews to find out what data user value most.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-advantages-of-card-ui-design\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Advantages of Card UI Design<\/span><\/h2>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">As with any digital tool currently available, you\u2019ll find those who absolutely love user interface cards and those who prefer other methods. If you\u2019re still on the fence, check out the following advantages and why they can help you reach a wider audience while improving the user experience.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-intuitive-usability\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">1. Intuitive Usability<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Click and drag manipulation makes designing a card user interface simple for you, but the overall concept also provides ease for your users. It\u2019s easy to decipher the information presented on card at a glance, and the variety of projects it can be used for (e.g. art, commerce, literature, etc) is seemingly limitless.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-ideal-for-aggregated-content\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">2. Ideal for Aggregated Content&nbsp;<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">If your website aggregates any type of content, the card UI is one of the best options on the table. This interface design makes it easy for users to find the information they\u2019re looking for without being bogged down by what appears to be endless content.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-easy-to-browse\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">3. Easy to Browse<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Regardless of the project type, the ease in which card designs allow browsing cannot be disputed. Cards are easily viewed as a page is scrolled, and you can make certain elements stand out by increasing their sizes relative to the surrounding content.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-shareable\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">4. Shareable<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Pinterest is the sole case study necessary to prove how shareable card UI designs are. These are essentially the digital equivalent of a business card. The visual design shows users <\/span><em style=\"background-color: transparent; color: rgb(0, 0, 0);\">exactly <\/em><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">what you want them to see without forcing them to digest unnecessary content.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-versatility\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">5. Versatility&nbsp;<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">You understand your users better than anyone else, so you know what they expect from your content. Whether they\u2019re looking for minimalist or elaborate displays, these cards can create just that. You can choose the level of complexity that works best.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-easy-manipulation-for-personal-creativity\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">6. Easy Manipulation for Personal Creativity&nbsp;<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">The material design of your website or mobile app can be easily manipulated with card patterns. This makes it simpler to add your own personal creativity to the design, and since this allows better brand presentation, it improves the overall user experience.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-disadvantages-of-card-design\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Disadvantages of Card Design<\/span><\/h2>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">There are also drawbacks to card UI design, but understanding these in advance can help you avoid the most common issues. It all comes down to how you implement the usage of the design patterns, so don\u2019t let these potential problems deter you from what could be a great improvement on your website.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-they-can-be-played-out\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">1. They Can Be Played Out<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Card interfaces are a type of experience design, but users have been experiencing them for a while. If you\u2019re not original in your presentation, the people visiting your website could see these as non-creative and played out.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-require-nuanced-ux-design\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">2. Require Nuanced UX Design<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">You can do just about anything with card UI tools, but you must remain nuanced in their presentation. It\u2019s great to be able to provide detailed information to your users, but if this isn\u2019t done subtly, the design may seem unprofessional.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-risk-of-cluttered-feel\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">3. Risk of Cluttered Feel<\/span><\/h3>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Your landing pages may have a cluttered feel if you don\u2019t use appropriate negative space. Focus on your design patterns and ensuring the cards don\u2019t bleed over into each other. This can take the potential for a great user experience and completely destroy it.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-7-best-card-ui-practices\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">7 Best Card UI Practices<\/span><\/h2>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">There are many strategies used to design effective card user interface patterns, but some of these practices are so essential that <\/span><em style=\"background-color: transparent; color: rgb(0, 0, 0);\">every <\/em><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">professional will advocate their use. The following were presented by Carrie Cousin in her <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" target=\"_blank\" style=\"background-color: transparent; color: rgb(17, 85, 204);\" rel=\"noopener noreferrer\">free ebook on web design trends<\/a><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">.&nbsp;<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Negative space<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: Effective card UI designs are all about organization, so make sure to use sufficient negative space (e.g. padding, borders) to avoid a cluttered screen.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">One card, once concept<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: The cards you use are meant to simplify your site\u2019s structure. Don\u2019t accidentally undercut this focus by adding too much complexity to your cards.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Suitable images<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: Most images used on cards are small, so only utilize clear pictures. Also make sure they\u2019re cropped to display appropriately where they\u2019ll be used.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Simple typography<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: The text on card UI designs will be small just like the utilized images, so maintain legibility with simple typography.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Be unique<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: Since it\u2019s one of the most popular user interface designs, you need to stand out when using cards. This could include anything from adding video, animated effects or new color schemes. We\u2019ll discuss this more below.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Consistent grid<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: Ensure that your grid has the same spacing between cards while utilizing breakpoints and respecting various card sizes.&nbsp;<\/span><\/li><li><strong style=\"background-color: transparent; color: rgb(0, 0, 0);\">Apply Fitt\u2019s Law<\/strong><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">: Check our <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-tangibles\/\" target=\"_blank\" style=\"background-color: transparent; color: rgb(17, 85, 204);\" rel=\"noopener noreferrer\">Interaction Design Best Practices<\/a><span style=\"background-color: transparent; color: rgb(0, 0, 0);\"> guide for an in-depth explanation of Fitt\u2019s Law. When applied to cards, it dictates that the <\/span><em style=\"background-color: transparent; color: rgb(0, 0, 0);\">entirety <\/em><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">of the card be clickable rather than <\/span><em style=\"background-color: transparent; color: rgb(0, 0, 0);\">just <\/em><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">the image or text. This simplifies user interaction.&nbsp;<\/span><\/li><\/ol>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Your job is going to get more difficult as your card UI designs get smaller. This makes it imperative for you to properly apply the fundamentals of design in order to convey your message to users.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-personalizing-cards\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Personalizing Cards&nbsp;<\/span><\/h2>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">As one of the main benefits of user interface card designs, it\u2019s important to know how to take advantage of personalization strategies. It\u2019s possible, for instance, to change the size of any specific card. This can depend upon how much content you want to display or whether the goal is to prioritize one card over another.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">By shrinking or expanding any card UI pattern, you can dictate how much information is going to be displayed. You can also control whether just the text or image shows, the size of specific elements, and many other variations. This will greatly influence the overall personal style of the layout.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">You\u2019ll also find that many designers opt to play with animation in their cards. Oftentimes the animation only occurs when the user hovers the cursor over a card, and this tells the user that the card is a clickable feature.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Some sites even go as far as letting users manipulate the card UI themselves. This is typically only an option on mobile websites, but desktop sites are increasingly offering the ability. Users can move cards around on their own or even stack various designs on top of each other for easier navigation of a page.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cards-design-ui-in-action\"><span style=\"background-color: transparent; color: rgb(0, 0, 0);\">Cards Design UI in Action<\/span><\/h2>\n\n\n\n<p>Here are five card UI tips and design inspiration for your next project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Create visual hierarchy<\/h3>\n\n\n\n<p>The first step for card design is to create a visual hierarchy\u2013<em>what content matters most?<\/em> It&#8217;s a good practice to structure cards with the most important content as high or large as possible. Color, whitespace, and fonts are also effective for creating separation and hierarchy.<\/p>\n\n\n\n<p>For example, most product cards feature a large, attractive image, followed by the title and CTA. The price is slightly smaller, but its proximity to the eye-catching image and surrounding whitespace makes it stand out as the customer scans the card. This information is most likely to get the user to take action.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/nzN-UnEl5t6U9AHry7aEJiQUsQTvQgZUseuW0Es1XUA-pRRxRJJkHnJnd-9z9masoSIsbGGTX3LzMq8A_b143HIBTcHnQfgA8HlJu0LA2D0ktrlcVyHWoQxVFPmF1uI2mvs71bpfI_8zeczhfZ1bYHulgyglWbzFuaq0mTUJRg9ao0z7uftkJC_TbQ\" alt=\"Card Design UI of a shopping cart item\" width=\"335\" height=\"669\"\/><\/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\">2. Minimize content<\/h3>\n\n\n\n<p>Too much content results in messy cards and increases <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive load<\/a>. Designers must reduce UI elements and, most importantly, keep text to a minimum.<\/p>\n\n\n\n<p>As UX Designer <a href=\"https:\/\/medium.com\/nextux\/8-rules-to-help-you-design-a-better-card-user-interface-a239257d633d\" target=\"_blank\" rel=\"noreferrer noopener\">Andrew Coyle states in this article<\/a>, <em>&#8220;The card should provide just enough information to help a user determine if they should further engage.&#8221;<\/em> Andrew shows how reducing text to a maximum of 100 characters, or three lines, creates a cleaner aesthetic that&#8217;s easier to digest.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Vrwfv2RDtKYHhdAkiXgU8V-2cl5qIqXgM1v38QjOgYdf7r_5TrYoaCDkcw3Vy-LgaRabtHU5WfhRuNOinG4Q4i10Tl1mkWDK8Ki-tdzyv7cSjaqqsCKW_jIjnEbGZdPdFH6tmBb5XLVGfbSi6EZC6NmAk9xqrnoa_FlmG443TShixe3-SP9AkfDzeg\" alt=\"Minimize content of card UI\" width=\"550\"\/><\/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\">3. Differentiate actions<\/h3>\n\n\n\n<p>Another great tip from Andrew Coyle is clearly differentiating the primary and secondary actions. The best option is to use a filled button for your primary action and a text or flat button for the secondary, as displayed in Andrew&#8217;s example.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/-ABsOaGlWFTu9zCqqwcHg2fuLsLdBN4d-EoFinGZz0F2mK88-aiNj4eJAI6UG-KiSfwjzWmVs2J1SwhOueiAYPfatxzzls0gvcn8XGjatY6QAlWTDnnVkFH4oOSh7pjnTjSGLDo96lcGBGDANK-LyWmtHMQappAQbksZWBc4YnZK_XjdO2TO87B4ag\" alt=\"best practices of Card Design UI \" width=\"550\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Material Design calls the primary action the card itself since most cards are clickable and don&#8217;t need CTAs. Supplemental actions belong in the card&#8217;s footer, including buttons and icons, as displayed below.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/9yLv0w9Whkbkn2QPXZEifuTYSkCP4rIzg_4TxhxAB4KXSxOjEIjLfAUXzvn8rj0Pnp-SjHUn29cWFfkIhft7FfZ5syCqkp8pg1op2E_yCrcoJyJ71MHBRLZSD9dFhO9DRZCeEo0ezXrx_0fHHtG2lcCqCdmXXOnIS4Lnz4MNN3TKBYF4Hg8Ouq8BLA\" alt=\"Material Design Card Design UI \" width=\"550\"\/><\/figure>\n\n\n\n<p>If you have more than two supplemental actions, Material Design recommends using an overflow menu to keep the card clean and uncluttered.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vkX-ysVIdJKup5W4QRm1702B3MdsmYEW6KC02qnWIVDAxzaVYczyLCLuCMO_9vyQuug_kLQHflz9wB7PGozeNbxitQpcbSrpHkEwtQ0Qw6aiKgmAzlFDX0gx5wBqT4GxSCbXODdmDibXMfzNLp9-Ncwe3jmFz64wAw1oIpLhkwAwMch8OLgsX0TbvQ\" alt=\"Another Material Design Card Design UI \" width=\"550\"\/><\/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\">4. Create responsive card layouts<\/h3>\n\n\n\n<p>One of the most significant benefits of cards is their responsiveness. Designers can easily create a comparative user experience across multiple viewports.<\/p>\n\n\n\n<p>The key is maintaining visual hierarchy while resizing and aligning cards to fit desktop, tablet, and mobile devices. <a href=\"https:\/\/material.io\/components\/cards#behavior\" target=\"_blank\" rel=\"noreferrer noopener\">This example from Material Design<\/a> shows mobile and desktop\/large tablet versions of the same card. Notice how the image, title, and call to action catch the eye in both designs.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Lar0b9URDK717CKtiVHu3ZY41acPkMIyv74U8kyIsYYVBHHyGnvd2jJxi1rtjIByOeeM2m1aubEJoqkdSoobQWpqaf6ob6--r87WmpmlaoB6pegL6aRDwYA_xpxxZzVgzx6n2RhwCiosTT9wy5VpS1uXreOIfZa7FwUM2RMzAMww9EguSbaqdV2e8Q\" alt=\"Example of Card Design UI  from Material design\" width=\"550\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Use one swipe gesture per card<\/h3>\n\n\n\n<p>Swipe gestures allow designers to hide actions, thus keeping cards clean and minimal. Multiple gestures (including an image carousel) can create confusion and usability\/accessibility issues.<\/p>\n\n\n\n<p>This example from Material Design demonstrates how multiple gestures create confusion, particularly for users with cognitive and dexterity disabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prototyping Cards With UXPin Merge<\/h2>\n\n\n\n<p>With <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a>, design teams can import a UI component library from a repository to prototype and test using the same interactive components, including cards, which engineers use to develop the final product.<\/p>\n\n\n\n<p>Merge cards include responsive layouts, buttons, typography, colors, images, icons, interactivity, and other properties defined by the design system so designers can focus on building and testing UIs\u2013<em>avoiding the time-consuming task of designing cards from scratch!<\/em><\/p>\n\n\n\n<p>Designers can use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Patterns<\/a> to combine static UI elements and other Merge components to create new cards and promote them to the design system. Patterns are also helpful for creating multiple card states, allowing for quick changes during user testing or stakeholder meetings.<br>Discover how component-driven prototyping with <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> can enhance your card design to create better user experiences for your customers. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Merge page to find out how to request access<\/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>Card UIs appear in many digital products, websites, and enterprise applications. Understanding card layout, visual hierarchy, and basic best practices are crucial for designing great card user interfaces. This article explores card user interface design, the anatomy of cards, common use cases, and design inspiration for your next project. Design, prototype, and test card UIs<\/p>\n","protected":false},"author":3,"featured_media":37216,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,4,6,7],"tags":[],"class_list":["post-9417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"How to Design Card UI and Why They Matter","yoast_metadesc":"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!","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>How to Design Card UI and Why They Matter<\/title>\n<meta name=\"description\" content=\"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!\" \/>\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\/card-design-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Playful Power of Card Design UI\" \/>\n<meta property=\"og:description\" content=\"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-20T13:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-09T14:40:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.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=\"46 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\\\/card-design-ui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"The Playful Power of Card Design UI\",\"datePublished\":\"2022-10-20T13:14:00+00:00\",\"dateModified\":\"2024-09-09T14:40:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/\"},\"wordCount\":2899,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/card-design-UI.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/\",\"name\":\"How to Design Card UI and Why They Matter\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/card-design-UI.png\",\"datePublished\":\"2022-10-20T13:14:00+00:00\",\"dateModified\":\"2024-09-09T14:40:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn the pros\\\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/card-design-UI.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/card-design-UI.png\",\"width\":1200,\"height\":600,\"caption\":\"card design UI\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/card-design-ui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Playful Power of Card Design UI\"}]},{\"@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":"How to Design Card UI and Why They Matter","description":"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!","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\/card-design-ui\/","og_locale":"en_US","og_type":"article","og_title":"The Playful Power of Card Design UI","og_description":"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/","og_site_name":"Studio by UXPin","article_published_time":"2022-10-20T13:14:00+00:00","article_modified_time":"2024-09-09T14:40:34+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"46 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"The Playful Power of Card Design UI","datePublished":"2022-10-20T13:14:00+00:00","dateModified":"2024-09-09T14:40:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/"},"wordCount":2899,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.png","articleSection":["Blog","Component-Driven Prototyping","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/","name":"How to Design Card UI and Why They Matter","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.png","datePublished":"2022-10-20T13:14:00+00:00","dateModified":"2024-09-09T14:40:34+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn the pros\/cons and best practices for card design UI, a popular interface design elements. Plenty of examples included, so dive in!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/card-design-UI.png","width":1200,"height":600,"caption":"card design UI"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/card-design-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The Playful Power of Card Design UI"}]},{"@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\/9417","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=9417"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9417\/revisions"}],"predecessor-version":[{"id":54444,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9417\/revisions\/54444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/37216"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=9417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=9417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=9417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}