{"id":13428,"date":"2016-03-22T14:22:51","date_gmt":"2016-03-22T22:22:51","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=13428"},"modified":"2024-09-09T19:48:43","modified_gmt":"2024-09-10T02:48:43","slug":"use-color-to-up-the-ante-on-your-ui-cards","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/","title":{"rendered":"Use Color to Up the Ante on Your UI Cards"},"content":{"rendered":"<p>Thanks in part to the growing popularity of Material Design, card-style interfaces are popping up everywhere. This trendy and functional aesthetic uses container-style design elements to hold a variety of information. If you want to take advantage of this highly versatile approach, your cards need to stand out.<\/p>\n<p>One way to do that is with color. Great color choices, exciting color palettes, and interesting combinations can be used to create emphasis, enhance usability, and draw users into your design projects.<\/p>\n<h2><b>Card-Style Design Primer<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">There\u2019s a lot to know about designing with cards, which can feature various kinds of data (such as images, text, buttons, links, comments, or video) that all relate to one link or piece of information.<\/span><\/p>\n<p>Designed to mirror the look of old-school playing or trading cards, these clickable containers include an area for some sort of visual and a small block of text or a button. The advantages to a card style interface are that users tend to easily grasp how they work, making them an ideal solution for aggregated content or e-commerce. Plus, they\u2019re easy to browse and are highly shareable and versatile.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13430\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image015.jpg\" alt=\"image01\" width=\"720\" height=\"412\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image015.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image015-524x300.jpg 524w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><a href=\"https:\/\/www.namesforchange.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Urban Ministries of Durham<\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13433\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image038.jpg\" alt=\"image03\" width=\"720\" height=\"435\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image038.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image038-496x300.jpg 496w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><span style=\"font-weight: 400;\">The Clymb<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To start using cards, begin by learning the basics of card design in \u00a0UX Pin\u2019s \u201c<\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\"><span style=\"font-weight: 400;\">Web Design Book of Trends 2015-2016<\/span><\/a><span style=\"font-weight: 400;\">.\u201d <\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll also want to follow these seven best practices from \u201c<\/span><a href=\"http:\/\/designshack.net\/articles\/layouts\/the-complete-guide-to-an-effective-card-style-interface-design\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">The Complete Guide to Effective Card-Style Interface Design<\/span><\/a><span style=\"font-weight: 400;\">\u201d:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Negative space.<\/b><span style=\"font-weight: 400;\"> Use sufficient borders and padding to avoid clutter.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>One card, one concept.<\/b><span style=\"font-weight: 400;\"> Cards simplify your site\u2019s structure. Don\u2019t undermine that by making each card overly complex.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Suitable images.<\/b><span style=\"font-weight: 400;\"> Card images tend to be small, make sure you use clear pictures that are appropriately cropped to suit where they\u2019ll be used.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Simple typography.<\/b><span style=\"font-weight: 400;\"> Because text also tends to be small, simple typography is most legible. Choose simple and elegant fonts, avoiding decorative typefaces.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Get creative.<\/b><span style=\"font-weight: 400;\"> Make an extra effort to stand out from the crowd, using elements such as animated effects, video, round frames, or new color schemes.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Use an open grid. <\/b><span style=\"font-weight: 400;\">A standard grid helps maintain the same spacing while respecting various sizes and breakpoints.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Implement Fitts\u2019s Law.<\/b><span style=\"font-weight: 400;\"> As we described in <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-tangibles\/\"><i><span style=\"font-weight: 400;\">Interaction Design Best Practices<\/span><\/i><\/a><span style=\"font-weight: 400;\">, Fitt\u2019s Law (as applied to cards) suggests that the entire card be clickable\u2014not just the text or the image. This makes interaction easier for the user.<\/span><\/li>\n<\/ul>\n<h2><b>Light vs. Dark Cards<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The first decision you have to make is whether you prefer a light or dark color scheme. There are pros and cons to each; white or light schemes are most common, but darker colors are becoming increasingly popular for mobile apps.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13432\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg\" alt=\"image02\" width=\"720\" height=\"444\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024-486x300.jpg 486w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024-290x180.jpg 290w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><a href=\"https:\/\/dribbble.com\/\"><span style=\"font-weight: 400;\">Dribbble<\/span><\/a><\/p>\n<p>Dribbble\u2019s cards are easy to see, sort, and click to learn more about an individual project. Its design uses white cards against a light background, with a content area below each image to display work. The light color scheme works particularly well on desktops and is easy on the eyes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13435\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image054.jpg\" alt=\"image05\" width=\"720\" height=\"445\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image054.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image054-486x300.jpg 486w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image054-290x180.jpg 290w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><a href=\"http:\/\/www.sbjdanebury.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">SB Joinery<\/span><\/a><\/p>\n<p>SB Joinery chose a much darker color scheme\u2014reverse type on a dark background\u2014and uses a tinted overlay on images to put visual emphasis on the text and ghost buttons. The pop-out menu also uses this darker theme. Thanks to bolder fonts and high-contrast colors, this dark card aesthetic is readable and highly usable.<\/p>\n<h2><b>Bright Color Schemes<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Material Design has been a major influence in the use of cards\u2014and for good reason. The design style emphasizes mobile usability, borrowing from flat design and minimalism to follow an aesthetic and techniques that users are growing accustomed to.<\/span><\/p>\n<p>This style incorporates a color palette of bright, saturated hues ranging from blues to greens to reds. While you don\u2019t have to abide by these color suggestions, the idea is a good one. Adding bold, bright color elements can create emphasis and facilitate usability.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13434\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image043.jpg\" alt=\"image04\" width=\"720\" height=\"444\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image043.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image043-486x300.jpg 486w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image043-290x180.jpg 290w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><span style=\"font-weight: 400;\">Helbak <\/span><\/p>\n<p>How can you make the most of bright color?<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use for headers, buttons and call-to-action elements.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use as a background that adds meaning\u2014such as colors associated with different types of cards. (Like this example from Helbak.). Note that even pastel or light colors can work beautifully in this way.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use color for primary text elements to assist readability.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Overlay images with bright color or use a duotone technique to guide users through cards.<\/span><\/li>\n<\/ul>\n<h2><b>Color for Emphasis<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Finally, bold color choices can be a great tool to emphasize specific elements. For example, color elements can break up visual monotony and increase interaction. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13429\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image005.jpg\" alt=\"image00\" width=\"720\" height=\"443\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image005.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image005-487x300.jpg 487w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><a href=\"http:\/\/mayorschallenge.bloomberg.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Mayors Challenge 2016<\/span><\/a><\/p>\n<p>The Mayors Challenge design makes the most of material concepts without feeling like a Google product. Color is bold and bright, while cards are somewhat simple and \u201cundefined.\u201d Pulling it all together are hints of bold color in iconography, text, and links that guide users through actions to take on the site.<\/p>\n<p>One of the criticisms of card-style design interfaces is that elements can start to look too much alike\u2014so have fun and think outside the box.<\/p>\n<h2><b>Takeaways<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Color can be just the thing that helps your card-style design stand out from the crowd. Think about how color best compliments your brand and serves users, as you choose which techniques to use.<\/span><\/p>\n<p>For maximum impact \u00a0use color for a specific purpose and to draw users through the design and stir them to action. Whether you go with light versus dark, or bright colors and trendy combinations, color \u00a0can influence how users feel about and interact with your design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to pick the perfect color combination for your card interfaces. <\/p>\n","protected":false},"author":27,"featured_media":13432,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-13428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"","yoast_metadesc":"Learn how to pick the perfect color combination for your card interfaces.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Use Color to Up the Ante on Your UI Cards | UXPin<\/title>\n<meta name=\"description\" content=\"Learn how to pick the perfect color combination for your card interfaces.\" \/>\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\/use-color-to-up-the-ante-on-your-ui-cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use Color to Up the Ante on Your UI Cards\" \/>\n<meta property=\"og:description\" content=\"Learn how to pick the perfect color combination for your card interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-22T22:22:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T02:48:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"555\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Use Color to Up the Ante on Your UI Cards\",\"datePublished\":\"2016-03-22T22:22:51+00:00\",\"dateModified\":\"2024-09-10T02:48:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/\"},\"wordCount\":924,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/image024.jpg\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/\",\"name\":\"Use Color to Up the Ante on Your UI Cards | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/image024.jpg\",\"datePublished\":\"2016-03-22T22:22:51+00:00\",\"dateModified\":\"2024-09-10T02:48:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Learn how to pick the perfect color combination for your card interfaces.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/image024.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/image024.jpg\",\"width\":900,\"height\":555,\"caption\":\"image024\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-color-to-up-the-ante-on-your-ui-cards\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Use Color to Up the Ante on Your UI Cards\"}]},{\"@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\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Use Color to Up the Ante on Your UI Cards | UXPin","description":"Learn how to pick the perfect color combination for your card interfaces.","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\/use-color-to-up-the-ante-on-your-ui-cards\/","og_locale":"en_US","og_type":"article","og_title":"Use Color to Up the Ante on Your UI Cards","og_description":"Learn how to pick the perfect color combination for your card interfaces.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/","og_site_name":"Studio by UXPin","article_published_time":"2016-03-22T22:22:51+00:00","article_modified_time":"2024-09-10T02:48:43+00:00","og_image":[{"width":900,"height":555,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg","type":"image\/jpeg"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Use Color to Up the Ante on Your UI Cards","datePublished":"2016-03-22T22:22:51+00:00","dateModified":"2024-09-10T02:48:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/"},"wordCount":924,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/","name":"Use Color to Up the Ante on Your UI Cards | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg","datePublished":"2016-03-22T22:22:51+00:00","dateModified":"2024-09-10T02:48:43+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Learn how to pick the perfect color combination for your card interfaces.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/image024.jpg","width":900,"height":555,"caption":"image024"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-color-to-up-the-ante-on-your-ui-cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Use Color to Up the Ante on Your UI Cards"}]},{"@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\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13428","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\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=13428"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13428\/revisions"}],"predecessor-version":[{"id":54483,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13428\/revisions\/54483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/13432"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=13428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=13428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=13428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}