{"id":6859,"date":"2017-02-27T16:58:56","date_gmt":"2017-02-27T16:58:56","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=6859"},"modified":"2020-12-14T11:32:47","modified_gmt":"2020-12-14T11:32:47","slug":"color-ui-design-practical-framework","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/","title":{"rendered":"Color in UI Design: A (Practical) Framework"},"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\">Being pretty self-taught as far as UI design goes, I\u2019ve always wondered why so many articles and books talk about color theory and palettes. In my experience, using a \u201csplit complementary palette\u201d is about 0% predictive of me making nice-looking designs.<\/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\">I have another word for that sort of thing: <em>useless<\/em>.<\/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\">\"So if color theory doesn\u2019t provide a solid basis for color in UI design, what does?\"<\/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\">Let me throw an opinion at ya\u2019: color <em>modifications<\/em>. It\u2019s the tweaking of color that counts, not the picking of them from the color theory hat.<\/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\"><span class=\"long-quote\">\"Or, said another way: The <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">fundamental<\/strong> skill of coloring interface designs is being able to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">modify<\/strong> one base color into <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">many different variations<\/strong>.\"<\/span><\/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\">I know this sounds a little odd. Hear me out. I\u2019m going to give you a framework for adjusting <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/important-color-ui-design\/\">color in your UI designs<\/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\">This framework will:<\/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>Allow you to modify <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">one theme color<\/strong> for basically any purpose in your UI (this is hugely powerful, and, as we\u2019ll see, what apps like Facebook are already doing)<\/li>\n<li>Help you to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">predict what color changes will look <em>good<\/em><\/strong><\/li>\n<li>Make color seem <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">less subjective<\/strong> (\u201csubjective\u201d is often a word for \u201cI haven\u2019t figured out how it works\u201d \u2014 and it\u2019s a word you hear a <em>ton<\/em> when folks talk about color)<\/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\">Are we cool? We\u2019re cool?<\/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\">Great.<\/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;\">Darker and Lighter Variations<\/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\">One thing I\u2019ve noticed across many great-looking interfaces is that they often have darker and lighter variations on a particular theme color.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6860 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1Zebb-f-ULEc9Ii113ksa5Q.png\" alt=\"1Zebb-f-ULEc9Ii113ksa5Q\" width=\"448\" height=\"505\" \/><\/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\">You didn\u2019t think that search bar was just a translucent black overlay, did you? Spoiler alert: it\u2019s not. No opacity of black overlaid on that blue will give you the color of the search bar. It\u2019s a variation picked by some other magic.<\/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\">Quick, now look at Swell Grid, the beautiful surf forecast app.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6861 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/10-tWMLLKqvAPInnSNBigRw.png\" alt=\"10-tWMLLKqvAPInnSNBigRw\" width=\"800\" height=\"434\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/10-tWMLLKqvAPInnSNBigRw.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/10-tWMLLKqvAPInnSNBigRw-600x326.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/10-tWMLLKqvAPInnSNBigRw-768x417.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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\">Sha-BAM. We just got hit with a boatload of variations. How many are there? Go to the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/swellgrid.com\/australia\/north-coast-nsw\">website<\/a> and count \u2019em yourself. Practically everything on this page is a variation of the initial blue.<\/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\">Or, here\u2019s another simple example:<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6862 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1Vfetyb93BWZbrbhjcoFCjQ.png\" alt=\"1Vfetyb93BWZbrbhjcoFCjQ\" width=\"455\" height=\"85\" \/><\/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\">Even element <em>states<\/em> are variations on a color. This isn\u2019t best described as \u201ca palette of 3 blues\u201d. It\u2019s one blue with variations.<\/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\">But this begs the question: <em>how do you actually <\/em><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>modify<\/em><\/strong><em> a color to get good variations?<\/em><\/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\">We\u2019ll get there, but I want you to understand this stuff from the ground-up. So here are our 2 trusty principles for figuring this stuff out:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>We\u2019ll look to the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">real world for reference cues<\/strong>. Even though our interfaces are \u201cfake\u201d, we still copy like mad from the real world, because after decades of seeing things in the real world, we just <em>expect<\/em> light and color to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@erikdkennedy\/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda#b2a5\">work in certain ways<\/a>.<\/li>\n<li>We\u2019ll use the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">HSB color system<\/strong>. The short of it is: it\u2019s the most intuitive color system with broad usage (for my purposes, Sketch and Photoshop). If you don\u2019t know what hue, saturation, and brightness are, let\u2019s <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/geraldbakker.nl\/psnumbers\/hsb-explained.html\">break<\/a> and meet back in 10.<\/li>\n<\/ol>\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;\">Real-World Color Variations<\/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\">Alright, look around you. What \u201ccolor variation\u201d are you undoubtedly seeing two dozen instances of every time you glance around your room?<\/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\"><em>Shadows.<\/em><\/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\">You can think of a shadow as a darker variation on a base color.<\/p>\n<div id=\"attachment_6863\" style=\"width: 529px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6863\" class=\"size-full wp-image-6863\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1D2iCHDMNfNmLzGJlOqL86g.png\" alt=\"Photo by David\u00a0Blaikie\" width=\"519\" height=\"409\" \/><p id=\"caption-attachment-6863\" class=\"wp-caption-text\">Photo by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/photos\/nikonvscanon\/474310396\/\">David\u00a0Blaikie<\/a><\/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\">With me?<\/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\">Now let\u2019s jump into Sketch and get our color pickers and figure out <em>exactly<\/em> what happens when a shadow falls on our coral wall.<\/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\">Like I mentioned, we\u2019ll be figuring this out in HSB.<\/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_6875\" style=\"width: 424px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6875\" class=\"wp-image-6875 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/16zipl9z4CQD-Tm2VItC78g-1.png\" alt=\"16zipl9z4CQD-Tm2VItC78g-1\" width=\"414\" height=\"128\" \/><p id=\"caption-attachment-6875\" class=\"wp-caption-text\">Note: Monitor\/image color profiles might make these exact measurements different for you.<\/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\">The brightness moves down \u2014 OK, so <em>that<\/em> was pretty obvious. But hold up \u2013 before we go generalizing too much, let\u2019s actually look at another example.<\/p>\n<div id=\"attachment_6865\" style=\"width: 723px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6865\" class=\"size-full wp-image-6865\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1qHZQnmIMTpxMFSre_wyo8w.png\" alt=\"Photo by Matthias\u00a0Uhlig\" width=\"713\" height=\"358\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1qHZQnmIMTpxMFSre_wyo8w.png 713w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1qHZQnmIMTpxMFSre_wyo8w-600x301.png 600w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><p id=\"caption-attachment-6865\" class=\"wp-caption-text\">Photo by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/photos\/photography-matthiasuhlig\/14029265233\/\">Matthias\u00a0Uhlig<\/a><\/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\">Do shadows work the same way in Cuba? We\u2019re about to find out.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6876 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1QMAZ0jrMtHRF_GdgQ5h9sQ-1.png\" alt=\"1QMAZ0jrMtHRF_GdgQ5h9sQ-1\" width=\"414\" height=\"128\" \/><\/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\">Alright, now we can compare and contrast. Notice a pattern?<\/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\">When there\u2019s a shadowed variation of a color, you can expect <em>brightness<\/em> to go <em>down<\/em> and <em>saturation<\/em> to go <em>up<\/em>. We just looked at this in two instances, but <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">as far as I\u2019ve ever seen, it\u2019s a solid rule you can go by<\/strong>.<\/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\">Now hue is a bit crazier \u2014 it went <em>down<\/em> for the coral wall shadow, and <em>up<\/em> for the teal wall shadow. There <em>is<\/em> an explanation for that, but it\u2019s much less important and a bit more esoteric than saturation\/brightness \u2014 so we\u2019ll come back to hue later.<\/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;\">The Rules<\/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\">Let\u2019s unpack these concepts a bit more.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Darker color variation = higher saturation + lower brightness<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you look back to our facebook search bar example, you\u2019ll see that\u2019s exactly what\u2019s going on.<\/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\"><center><\/p>\n<div id=\"attachment_6867\" style=\"width: 424px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6867\" class=\"wp-image-6867 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1ooNBwTBKu1PZ8vz9U3bHyw.png\" alt=\"1ooNBwTBKu1PZ8vz9U3bHyw\" width=\"414\" height=\"128\" \/><p id=\"caption-attachment-6867\" class=\"wp-caption-text\">The hue moves 1\u00b0 out of 360\u00b0, which is practically a rounding error.<\/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\"><\/center>The saturation went up as the brightness went down. The reason the search bar couldn\u2019t be an opacity of black overlaid on the base blue is because, in HSB, <em>adding black<\/em> is equivalent to <em>reducing brightness<\/em>. Instead, we want to reduce brightness <em>while simultaneously adding saturation<\/em>. Black doesn\u2019t add any saturation to our color!<\/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\">Why, in the real world, are darker colors correlated with higher saturations? I haven\u2019t the slightest idea. But I can always make something up: <em>it\u2019s because as the intensity of the light (brightness) overtakes intensity of color (saturation), the color necessarily becomes more washed out \u2014 and vice versa.<\/em><\/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\">That might be complete BS, but it <em>kind of <\/em>makes sense, right?<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Lighter Color Variation = lower saturation + higher brightness<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, being the discerning and erudite readers that you are, you probably guessed that the opposite transform that gives us <em>darker variations<\/em> will give us <em>lighter variations<\/em>.<\/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\">And you nailed it, by golly.<\/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\">Of course, we can go one step further. If we go on lowering saturation and raising brightness till the cows come home, where do we end up?<\/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\">Here:<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6868 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag.png\" alt=\"1k8oOsCUdscEQT_EaMxnqag\" width=\"128\" height=\"128\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag.png 128w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag-32x32.png 32w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag-50x50.png 50w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag-64x64.png 64w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1k8oOsCUdscEQT_EaMxnqag-96x96.png 96w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/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\">We end up at white.<\/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\">You can think of <em>making lighter variations<\/em> as <em>adding white<\/em>. And there are two very simple ways to <em>add white <\/em>to a color in Sketch et al:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Reduce the opacity of the element (if it\u2019s on a white background)<\/li>\n<li>Add a translucent layer of white on top of the element<\/li>\n<\/ol>\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;\">The Most Important Thing<\/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\">If you remember only one thing from this article, remember this:<\/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\"><span class=\"long-quote\">\"Darker color variations are made by lowering brightness and increasing saturation. Brighter color variations are made by increasing brightness and lowering saturation.\"<\/span><\/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\">With this simple idea, you will be able to do amazing things with just a single color.<\/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\">The truth is, so many variations in color between elements \u2014 or even states of the same element \u2014 are just simple color modifications.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6869\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1QikhbzylR2lOTGcSY8eP6g.png\" alt=\"1QikhbzylR2lOTGcSY8eP6g\" width=\"800\" height=\"522\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1QikhbzylR2lOTGcSY8eP6g.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1QikhbzylR2lOTGcSY8eP6g-600x392.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1QikhbzylR2lOTGcSY8eP6g-768x501.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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\">Here\u2019s <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.getharvest.com\/\">Harvest<\/a>, the time-tracking app I use and love.<\/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\">Look at the header. The hover state is lighter. The selected state is darker.<\/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\">Or look at the green New Entry button.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6870 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1E3oPUwJXf_KgjtCiaPIBqg.png\" alt=\"1E3oPUwJXf_KgjtCiaPIBqg\" width=\"172\" height=\"139\" \/><\/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\">The hover state is a darker variation \u2014 higher saturation, lower brightness.<\/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\">You will use this <em>again and again<\/em>.<\/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\">To be fair, not every design follows this rule 100% of the time. In the Harvest header above, the selected state is <em>just<\/em> a lower brightness (saturation unchanged) and the hover state is <em>just<\/em> a lower saturation (brightness unchanged). But we\u2019ve looked at how color works in the real world, and we know that why these designs look good is because they <em>approximate<\/em> the principles laid out here.<\/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;\">What About\u00a0Hue?<\/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\">Speaking of <em>approximating the principles laid out here<\/em>, we should talk about hue. I said it above too, but it bears repeating: hue is so secondary to the whole <em>saturation-and-brightness-move-in-opposite-directions <\/em>thing that you can often just ignore it entirely when making color adjustments.<\/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\">That being said, here\u2019s the briefest of explanations.<\/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\">First of all, each color has a sort of \u201cperceived brightness\u201d to it. This is called <em>luminosity<\/em>.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6871 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1GLiOJLo9wLAbbVu40PkPLg.png\" alt=\"1GLiOJLo9wLAbbVu40PkPLg\" width=\"421\" height=\"176\" \/><\/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\">Even though this blue and this yellow are both at 100% HSB brightness, which <em>appears<\/em> brighter?<\/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\">I mean, like, ask anyone off the street: <em>which is brighter?<\/em><\/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\">\u201cUm. Yellow. Yellow?\u201d<\/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\">Thanks, rando. You just discovered luminosity.<\/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\">\u201cSo I\u2019m right?\u201d<\/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\">Yes, yes you are. Even if you hold brightness and saturation constant, and <em>just vary hues<\/em>, you will get a <em>range of luminosities<\/em>, or perceived brightnesses, which we measure in values between 0 and 100.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6872 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg.png\" alt=\"1Socr6lUXapFhZE86Jsa1dg\" width=\"234\" height=\"234\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg.png 234w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg-32x32.png 32w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg-50x50.png 50w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg-64x64.png 64w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg-96x96.png 96w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1Socr6lUXapFhZE86Jsa1dg-128x128.png 128w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/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\">These are our hues in 30\u00b0 intervals, all at 100% saturation and 100% brightness.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6873 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ.png\" alt=\"1c0A-5JQqtIVjDsI4R3rzGQ\" width=\"239\" height=\"239\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ.png 239w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ-32x32.png 32w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ-50x50.png 50w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ-64x64.png 64w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ-96x96.png 96w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1c0A-5JQqtIVjDsI4R3rzGQ-128x128.png 128w\" sizes=\"auto, (max-width: 239px) 100vw, 239px\" \/><\/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\">And <em>here <\/em>are our hues duplicated, put into Luminosity blend mode (on a white background \u2014 that\u2019s critical to add if you\u2019re following along in Sketch), and overlaid with the brightness of the resulting gray. This gives us a measure of the luminosity of the original color.<\/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\">In Luminosity blend mode, a <em>bright gray<\/em> means <em>high luminosity<\/em>, and a <em>dark gray<\/em> means <em>low luminosity<\/em>. If you think about it for a second, this makes perfect sense.<\/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\">Now, I\u2019ve printed the numbers out for you, but chart\u2019s worth a thousand numbers, right?<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6874 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1Ae52-cwRfQ1lTW1JAXZFow.png\" alt=\"1Ae52-cwRfQ1lTW1JAXZFow\" width=\"470\" height=\"237\" \/><\/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\">Look, Sherlock, a pattern.<\/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\">And this particular pattern answers our question from above. Remember how we saw that sometimes, for a shadow, hue would shift <em>down<\/em> and sometimes it would shift <em>up<\/em>? Why does it do that?<\/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\">Well, first, notice that this graph has three maximum points and three minimum points. The low-points are red, green, and blue. The high-points are cyan, magenta, and yellow.<\/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\">Does these particular colors ring a bell? Yes. RGB and CMY are popular color systems, but <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">ignore that for now<\/strong>, because it\u2019s leading you astray.<\/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\">The important bit is this: if you don\u2019t count saturation and brightness, shifting hue towards red (0\u00b0), green (120\u00b0), or blue (240\u00b0) will <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">decrease<\/strong> the luminosity, or perceived lightness of the color. And shifting the hue towards yellow (60\u00b0), cyan (180\u00b0), or magenta (300\u00b0) will <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">increase<\/strong> the perceived lightness of the color.<\/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\">The trick is to just <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">make the movement of the hue match up with the movement of the saturation and brightness<\/strong>. If you want a darker variation, move the hue towards red (0\u00b0), green (120\u00b0), or blue (240\u00b0), whichever is closest \u2014 and vice versa (with cyan, magenta, and yellow) for lighter variations. (Of course, this assumes you\u2019re also lowering brightness and increasing saturation)<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6875 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/16zipl9z4CQD-Tm2VItC78g-1.png\" alt=\"16zipl9z4CQD-Tm2VItC78g-1\" width=\"414\" height=\"128\" \/><\/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\">That\u2019s why the shadow on the coral wall shifted <em>down<\/em> in hue \u2014 it was shifting towards red, at 0\u00b0, which is the nearest minimum point to 21\u00b0.<\/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\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6866 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1QMAZ0jrMtHRF_GdgQ5h9sQ.png\" alt=\"1QMAZ0jrMtHRF_GdgQ5h9sQ\" width=\"414\" height=\"128\" \/><\/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\">And that\u2019s why the shadow on the teal wall shifted <em>up<\/em> in hue \u2014 it was shifting towards blue, at 240\u00b0, which is the nearest minimum point to 194\u00b0.<\/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\">Mind blown yet?<\/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;\">The Way of\u00a0Color<\/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\">So when it comes to color variations, ask yourself: do I need simply a lighter or darker variation on a color I already have?<\/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\">(And if you\u2019re going for something clean and simple, the answer is so, so often <em>yes<\/em>.)<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Darker variations:<\/strong><\/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>Brightness decreases<\/li>\n<li>Saturation increases<\/li>\n<li>Hue (often) shifts towards a luminosity minimum (red, green, or blue)<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Lighter variations:<\/strong><\/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>Brightness increases<\/li>\n<li>Saturation decreases<\/li>\n<li>Hue (often) shifts towards a luminosity maximum<\/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\">This will allow you to take one hue, but modify it endlessly for all your UI needs, using darker and lighter variations where appropriate.<\/p>\n<div id=\"attachment_6877\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6877\" class=\"wp-image-6877 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1B6rAGIo1d8NbXMCZ0d9hAw.png\" alt=\"1B6rAGIo1d8NbXMCZ0d9hAw\" width=\"800\" height=\"600\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1B6rAGIo1d8NbXMCZ0d9hAw.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1B6rAGIo1d8NbXMCZ0d9hAw-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1B6rAGIo1d8NbXMCZ0d9hAw-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-6877\" class=\"wp-caption-text\">An interface with one color and many modifications<\/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\">I just whipped together a quick example here. A whole interface being built out of a single color. Say\u2026 <em>does that shade of teal look familiar<\/em>?<\/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\">Now I\u2019ve been pretty brief with all of this. There are still many topics to cover:<\/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>How is <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">hue<\/strong> even more important in <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">gradients<\/strong> and <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">data visualization<\/strong>?<\/li>\n<li>When you\u2019re in Sketch (etc.), what technique do you use to make <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">darker variations<\/strong>?<\/li>\n<li>Do you to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">move saturation or brightness more<\/strong>?<\/li>\n<li>How do you find <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">grays<\/strong> that match your color scheme?<\/li>\n<li>How do you pick <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">totally unrelated colors<\/strong> that look good together?<\/li>\n<li>How do you fix it when colors <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">clash<\/strong>?<\/li>\n<li>And, of course, just why <em>are<\/em> RGB and CMY the low\/high points on the luminosity graph?<\/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\">I\u2019m glad you asked.<\/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;\">Introducing\u2026 Learn UI\u00a0Design<\/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\u2019ve been working hard the last 11 months to create the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">single most comprehensive <\/strong>online video course for learning the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">practical skills of interface design<\/strong>.<\/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=\"http:\/\/learnui.design\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/15l56C5BHjguxAu3F6IR8yA.png\" title=\"\" alt=\"\" \/><\/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\">We\u2019re talking <em>everything<\/em> here:<\/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>Color<\/li>\n<li>Typography<\/li>\n<li>Layouts<\/li>\n<li>Process<\/li>\n<li>Responsive Design<\/li>\n<li>And more\u2026<\/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\">The course is <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">16+ hours of video <\/strong>in over <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">30 video lessons<\/strong>.<\/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\">In almost every video, you\u2019ll <em>watch me design in Sketch<\/em>. This is important. I\u2019m not teaching some theoretical framework here. Instead, everything I show you is the tips, tricks, and frameworks I use to design interfaces every day. Think of it as watching over my shoulder as I teach you everything I know.<\/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\">For instance, in the Spacing video (and yes \u2014 that\u2019s a 50-minute video <em>entirely<\/em> on whitespace), I start with a simple text-based example, talking about how to approach letter-spacing, line-spacing, paragraph-spacing, space between the title and the body, space alongside the text, etc.<\/p>\n<div id='gallery-1' class='gallery galleryid-6859 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1JcxMHWpWV4A0eRzxzR0fEA.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"138\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1JcxMHWpWV4A0eRzxzR0fEA.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1JcxMHWpWV4A0eRzxzR0fEA.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1JcxMHWpWV4A0eRzxzR0fEA-600x104.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1JcxMHWpWV4A0eRzxzR0fEA-768x132.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That culminates in me talking about the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">3 most important principles of spacing<\/strong>. Then, in the second part of the video, I do a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">redesign of <\/strong><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/350.org\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">350.org<\/strong><\/a><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u2019s homepage<\/strong>, specifically focusing on improving their use of whitespace. It builds on all the concepts we\u2019ve just introduced. Finally, I discuss a few cases where you see these rules stretched, like landing pages or data-heavy tables.<\/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\">Here\u2019s what folks are saying:<\/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\"><span class=\"long-quote\">\u201cLearn UI Design is like learning how to fly a plane by actually sitting in the cockpit with the pilot \u2014 Erik is constantly designing\/redesigning <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">real-world examples<\/strong> right in front of you, explaining why X is good or bad, and how to go about making it even better.\u201d \u2014 Mudassir Ali, Frontend Engineer, Canva<\/span><br \/>\n<span class=\"long-quote\">\u201cLearn UI Design\u2019s straightforward approach, illustrated with real-life examples and tutorials, was extremely helpful and eye-opening. I would <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">highly<\/strong> <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">recommend<\/strong> this course for UX designers wanting to add UI design to their toolkit.\u201d \u2014 Sarah Kim, UX Design Lead<\/span><br \/>\n<span class=\"long-quote\">\u201cErik\u2019s <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">pragmatic approach<\/strong> to design has taught me infinitely more than what reading any design books ever did! Away with the books, and one more video please.\u201d \u2014 Anders Nysom, Freelance Developer<\/span><br \/>\nIf you\u2019re a dev, UX designer, or PM, and want to add visual design to your skillset, this course is tailor-made for you. Hop on over to <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/learnui.design\">learnui.design<\/a> for more.<\/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=\"http:\/\/learnui.design\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1a-FGKWDARSKKkJRF5Jtd8A.png\" \/><\/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\">And yes, I do have the best domain name ever \u2014 thanks for mentioning it.<\/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\"><em>This article was originally posted on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@erikdkennedy\/color-in-ui-design-a-practical-framework-e18cacd97f9e#.nponuskif\">Erik's Medium Page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Being pretty self-taught as far as UI design goes, I\u2019ve always wondered why so many articles and books talk about color theory and palettes. In my experience, using a \u201csplit complementary palette\u201d is about 0% predictive of me making nice-looking designs. I have another word for that sort of thing: useless. &#8220;So if color theory doesn\u2019t provide a solid basis&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":104,"featured_media":6908,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color in UI Design: A (Practical) Framework | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Being pretty self-taught as far as UI design goes, I\u2019ve always wondered why so many articles and books talk about color theory and palettes. In my experience, using a \u201csplit complementary palette\u201d is about 0% predictive of me making nice-looking designs. I have another word for that sort of thing: useless. &quot;So if color theory doesn\u2019t provide a solid basis... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/\" \/>\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-02-27T16:58:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T11:32:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colors.png\" \/>\n\t<meta property=\"og:image:width\" content=\"981\" \/>\n\t<meta property=\"og:image:height\" content=\"695\" \/>\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=\"10 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.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:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/colors.png\",\"width\":981,\"height\":695},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/\",\"name\":\"Color in UI Design: A (Practical) Framework | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#primaryimage\"},\"datePublished\":\"2017-02-27T16:58:56+00:00\",\"dateModified\":\"2020-12-14T11:32:47+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/40871078716544419a818bae344f77e3\"},\"headline\":\"Color in UI Design: A (Practical) Framework\",\"datePublished\":\"2017-02-27T16:58:56+00:00\",\"dateModified\":\"2020-12-14T11:32:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/color-ui-design-practical-framework\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/40871078716544419a818bae344f77e3\",\"name\":\"Erik Kennedy\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/593e10c488fcc7fcf4e747976a3f17f473c8e968e17677f510632165c50abdff?s=96&d=mm&r=g\",\"caption\":\"Erik Kennedy\"},\"description\":\"Erik is an independent UX\/UI Designer, who's designed for clients such as Amazon, Soylent, and Pro.com. He's spoken in the US and abroad, and his design writing has been read by over a million people. He is the creator of Learn UI Design, an online video course about the visual design of software. He also has a design newsletter you might like.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=6859"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6859\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/6908"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=6859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=6859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=6859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}