{"id":13302,"date":"2017-10-30T10:05:31","date_gmt":"2017-10-30T10:05:31","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13302"},"modified":"2024-03-15T22:31:28","modified_gmt":"2024-03-15T22:31:28","slug":"important-color-ui-design","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/","title":{"rendered":"The most important and best colors in UI design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As you probably already guessed this article is dedicated to <em>blue color<\/em>. Without a doubt, blue is one of the best colors in UI design, and one of the most frequent. Just look at your smartphone app icons, and you\u2019ll see that a lot of them are blue: Facebook, Twitter, Shazam, Safari, etc.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">So why is blue the best-chosen color?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are a lot of reasons to use blue, I\u2019ll list a few of them:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People like this color. <\/strong>Surveys show majority of people see blue as their favorite color. Blue is considered to be the safest color globally.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/0HezEwkvHleqYp371.png\"><img decoding=\"async\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0HezEwkvHleqYp371.png\" alt=\"&quot;&lt;yoastmark\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/0pmIBlkK-Qon0izYh.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0pmIBlkK-Qon0izYh.png\" alt=\"\" width=\"1313\" height=\"801\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Associated with nature. <\/strong>Blue is strongly associated with clean water, clear skies, etc., which leads to its high preference as a color.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 780px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0fMz9baq-jerEv3xa.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0fMz9baq-jerEv3xa.jpg\" alt=\"\" width=\"770\" height=\"334\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Blue has an association with nature due to this being the color of ocean and\u00a0sky.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Universal color for UI designers.<\/strong> From a UI designer standpoint, it\u2019s an incredibly useful color. A lot of colors from designer\u2019s toolbox such as red, orange, and green already have strong built-in associations \u2014for error, caution\/safety, success. This makes blue color a good choice for designers and one of the best colors for ui design<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/0Ed_h3TyfZfNhLWDb.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0Ed_h3TyfZfNhLWDb.png\" alt=\"\" width=\"704\" height=\"412\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Gives a sense of innovation.<\/strong> Often, companies use blue because it associated with tech and innovation.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/03VARFnxHAoiL5JbY.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/03VARFnxHAoiL5JbY.jpg\" alt=\"\" width=\"960\" height=\"568\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Makes people feel safe.<\/strong> Blue is a very common color for websites and apps in the travel industry. It represents reliability, which is a good thing for travel companies.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/12To1OUV7C1NRRozVPA4cuA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/12To1OUV7C1NRRozVPA4cuA.png\" alt=\"\" width=\"1340\" height=\"639\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id=\"attachment_6580\" style=\"width: 1352px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/1rAk95zZMhe3X9Pl8Q4ZDhA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/1rAk95zZMhe3X9Pl8Q4ZDhA.png\" alt=\"Delta airlines\" width=\"1342\" height=\"652\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Delta airlines<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Makes the product seem trustworthy.<\/strong> More often than not, it\u2019s a case of trying to convince the user that this is the right product to use. The purpose of adding blue, in this case, is convincing the user of its credibility. Technology brands like Dell, IBM, Intel, AT&amp;T and PayPal take advantage of blue\u2019s trustworthy message; they create products that people rely on day after day.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/1KpgaNJycn9EetGXdGIPvsA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/1KpgaNJycn9EetGXdGIPvsA.png\" alt=\"Paypal UI design\" width=\"800\" height=\"600\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Blue evokes a sense of balance as well as calm intelligence. That\u2019s why the vast majority of financial services firms use\u00a0blue.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Colorblindness.<\/strong> Most common types of colorblindness (Protanopia and Deuteranopia) can see the color blue. This can\u2019t be said for colors like green or red.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 586px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0LZ-Py8LpDtLKKmP9.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/0LZ-Py8LpDtLKKmP9.jpg\" alt=\"\" width=\"576\" height=\"253\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">How visually impaired people see\u00a0colors<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/13GL68QivZdBwEBhEFSMX_Q.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/13GL68QivZdBwEBhEFSMX_Q.png\" alt=\"Facebook UI design\" width=\"1347\" height=\"652\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Blue is Facebook\u2019s dominant color, because Mark Zuckerberg is colorblind. As he said, \u201cblue is the richest color for me \u2014 I can see all of\u00a0blue.\u201d<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I hope that after reading this article you have a good idea of why blue color is so popular among designers. However, this doesn\u2019t mean that you should go and change the main color in your app\/website to blue using your <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/fixthephoto.com\/photo-color-editor.html\">photo color editor<\/a>.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Blue isn\u2019t the universal best color. There\u2019s simply no universal best\u00a0color.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What works on one site or app, doesn\u2019t necessarily work on another. It\u2019s a safe bet to select the color according to the preferences of your target audience:<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Ultimately, the right color for your design is the one that your users think is\u00a0right.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Originally published at <\/em><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/babich.biz\/blue-color\/\"><em>babich.biz<\/em><\/a><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/intro-color-theory\/\" target=\"_blank\" rel=\"noopener noreferrer\">An Intro to Color Theory<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/crash-course-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Crash Course in UI Design<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/can-master-design-must-first-master-fundamentals\/\" target=\"_blank\" rel=\"noopener noreferrer\">Before You Can Master Design, You Must First Master the Fundamentals<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/35-great-ios-ui-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">35 Great iOS UI Kits<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Designing a Styleguide: Elements That Go Into Building Compelling Products<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>As you probably already guessed this article is dedicated to blue color. Without a doubt, blue is one of the best colors in UI design, and one of the most frequent. Just look at your smartphone app icons, and you\u2019ll see that a lot of them are blue: Facebook, Twitter, Shazam, Safari, etc. So why is blue the best-chosen color?&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":165,"featured_media":13303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-13302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Without a doubt, blue is one of the best colors In UI\u00a0Design, and one of the most frequent.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The most important and best colors in UI design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Without a doubt, blue is one of the best colors In UI\u00a0Design, and one of the most frequent.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-30T10:05:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-15T22:31:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/1UpcrJ27NaHZa3TTZWCyKuA.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"312\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/10\/1UpcrJ27NaHZa3TTZWCyKuA.png\",\"width\":900,\"height\":312},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/\",\"name\":\"The most important and best colors in UI design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#primaryimage\"},\"datePublished\":\"2017-10-30T10:05:31+00:00\",\"dateModified\":\"2024-03-15T22:31:28+00:00\",\"description\":\"Without a doubt, blue is one of the best colors In UI\\u00a0Design, and one of the most frequent.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\"},\"headline\":\"The most important and best colors in UI design\",\"datePublished\":\"2017-10-30T10:05:31+00:00\",\"dateModified\":\"2024-03-15T22:31:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/important-color-ui-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2b91d9b457afee054f90b68440ad9e23902300b23c8109206f0a7d32fe0fbea4?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"I\\u2019m a software developer, tech enthusiast and UI\/UX lover. http:\/\/babich.biz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/165"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=13302"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/13303"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=13302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=13302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=13302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}