{"id":18348,"date":"2019-11-14T15:00:08","date_gmt":"2019-11-14T15:00:08","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18348"},"modified":"2020-09-03T11:22:42","modified_gmt":"2020-09-03T10:22:42","slug":"10-cheat-codes-for-designing-user-interfaces","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/","title":{"rendered":"10 Cheat Codes for Designing User Interfaces"},"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\">I\u2019d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works. I remember how it is established in us at Make Technology, a UX driven company, that Design can\u2019t be simply explained by colors, shapes, and text. It is a process that has a <em>\u201cWhy\u201d<\/em> behind it, that whenever we create a text bigger, add a shadow, or change the color, there has to be a reason of why things have to be.<\/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\">Thus in this article, I\u2019ll be sharing a list of things I\u2019ve learned from different companies, designers, things I\u2019ve learned in designing user interfaces, and new discoveries I found along the way:<\/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>*Disclaimer: The following \u201cDon\u2019t\u201d samples provided doesn\u2019t necessarily mean they\u2019re wrong. It\u2019s our basis of how we can improve from a good design solution to a much better one<\/em> ????<\/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;\">1. This text is important, make it bigger!<\/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\">When faced with content that needs font hierarchy, making the text bigger to give emphasis and importance usually doesn\u2019t solve the problem, just like the one below:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1zeL3V5_Xjr0R6EweICq1YQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1zeL3V5_Xjr0R6EweICq1YQ.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\">Font hierarchy is just not about small to big font sizes. It is about the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">right<\/strong> <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>mix of size, weights, and colors that creates contrast. Bigger contrast, the better.<\/em><\/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\"style=\"text-align: center;\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1yqVwmecQQmn6fB6yRjv94A.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1yqVwmecQQmn6fB6yRjv94A.jpeg\" title=\"\" alt=\"\" \/><\/a>Apologies if the photo comes in low res format \u270c\ufe0f<\/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 how do I create better contrast?<\/h2>\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>Don\u2019t use one kind of weight with different font sizes to create contrast and hierarchy.<\/li>\n<li>Instead, use bolder and darker style for primary content, or smaller and lighter for secondary content (less important).<\/li>\n<li>Create three kinds of text colors that varies from dark to light (see example below). Usually I use my base color as body text color.<\/li>\n<li>Don\u2019t be afraid to apply big font gaps to your items (i.e. 24px header, 16px body text, 10px meta etc). Bigger gap = better contrast.<\/li>\n<li>Check out <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.modularscale.com\">Modularscale<\/a> an online calculator you can use to create better font hierarchy.<\/li>\n<li>Remember, contrast is = size + weight + color.<\/li>\n<li>Lastly, make sure to check its contrast ratio. You can use this <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/leaverou.github.io\/contrast-ratio\/\">calculator<\/a> to check its accessibility.<img class=\"size-full\" title=\"\" alt=\"\" \/><\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1J9cLqeIrNQ3j3FzQrMnxzg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1J9cLqeIrNQ3j3FzQrMnxzg.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\"style=\"text-align: center;\">from my base color, I move from darker for headlines to lighter for ancillary content.<\/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;\">2. Don\u2019t create multiple shades of black<\/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\">Don\u2019t make your life difficult by moving your color picker up and down to produce different shades of black text over white background.<\/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 all know that using black text color (#000) causes eye strains for readers, and so our solution is to create darker variants as an alternative. But instead of color picking 3 or more hex color values, we can use black with different opacity as a solution:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1l0W8gs5yDqzWGEH0lwsBtw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1l0W8gs5yDqzWGEH0lwsBtw.jpeg\" 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\">In my example above, I used black as my primary color (#000) and decreased its opacity depending to where it will be applied (i.e. primary content, secondary content, 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;\">3. Do the math for understanding colors<\/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\">Most of us suck at picking the right color combinations, and whenever we see a design with a well orchestrated color palette, we question ourselves <em>\u201cHow the F they did it?\u201d<\/em> (just like the one below):<\/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\"style=\"text-align: center;\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Wti5_ENOwQ0Vb6_YgKBmjw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Wti5_ENOwQ0Vb6_YgKBmjw.png\" title=\"\" alt=\"\" \/><\/a>taken from momoandspirits<\/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\">Until I learned that understanding colors is not just for those who have the gift of design since the beginning of time, that a simple addition and subtraction at Hue, Saturation, Brightness (HSB) will do the magic <em>(we will be using HSB for this formula instead of RGB)<\/em>. You can easily get rid of the boring white over colored backgrounds, and turn it into a Picasso work like the one below:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/10MEEXvT1nTVIxtFNDdXwlQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/10MEEXvT1nTVIxtFNDdXwlQ.png\" title=\"\" alt=\"\" \/><\/a><\/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 where does the addition and subtraction in HSB comes in?<img class=\"size-full\" title=\"\" alt=\"\" \/><\/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\"style=\"text-align: center;\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/16mow0PlBFMP0iBnG4dB34Q.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/16mow0PlBFMP0iBnG4dB34Q.jpeg\" 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\">Two approaches for understanding colors<\/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\">There are actually two approaches we can do, and as we can see, both options have the same base color #B9F4BC (circle background) but differ when it comes to Folder and Strip color. As we start, always remember that the first number corresponds to Hue, followed by Saturation and lastly, Brightness.<\/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;\">Option A<img class=\"size-full\" title=\"\" alt=\"\" \/><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/174tlybKnuD3QLq-GYOAYiA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/174tlybKnuD3QLq-GYOAYiA.png\" title=\"\" alt=\"\" \/><\/a><\/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\"style=\"text-align: center;\">Option 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\">In Option A, we can see that we kept the Hue value <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">123 <\/strong>all throughout the shapes (circle, folder, strip) while the Saturation and Brightness are where the change happens.<\/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, as we focus on the Saturation of the base which is <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">24 <\/strong>and its Brightness, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">96, <\/strong>both values changed when we created darker green for the Folder. From Saturation of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">24<\/strong> it became <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">40 <\/strong>(increment of +16) and from Brightness of <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">96<\/strong> it became <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">82 <\/strong>(decrement of -14), which shows us that <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>a change in saturation whether incremental or decremental needs an inversely proportional adjustment to brightness, in order to create a good contrast (vice versa)<\/em><\/strong>. And the same thing happened in Strip, using the Folder\u2019s Saturation and Brightness as base value, we moved from <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">40<\/strong> to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">44 <\/strong>(increment of +04), and decreased from <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">82 <\/strong>to <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">75<\/strong> (decrement of -07) for Brightness.Thus, leads us to the formula:<\/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\">\"Darker Value = Increment in Saturation is a decrement in Brightness.<br \/>\nLighter Value = Decrement in Saturation is an increment in Brightness\"<\/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\">This formula helped me every time I\u2019m in wonder of what right colors should I use on my designs. I learned that the best starting point is to have a base color, and from there, start the adjustments in Saturation and Brightnesswhile keeping the Hue value the same.<\/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;\">Option B<img class=\"size-full\" title=\"\" alt=\"\" \/><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/17Nb4p-N2E24q1xCTNwDZ8Q.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/17Nb4p-N2E24q1xCTNwDZ8Q.png\" title=\"\" alt=\"\" \/><\/a><\/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\"style=\"text-align: center;\">Option B<\/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 Option B, the same principle is still applied (the formula we had above) but the Hue values change. And the terminologies RGB and CMY which we used to pass by in various design materials, will now make sense for us.<\/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\">RGB stands for Red, Green, and Blue, while CMY is Cyan, Magenta, and Yellow. These terminologies haven\u2019t made any importance for me when I first started, until I came across this discovery of using RGB and CMY for color combinations.<\/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\"style=\"text-align: center;\">Now In Option B, if we want to have a darker variation of the base color, all we need to do is move our color picker to the direction where the nearest RGB is located in our color palette, or move it the direction of CMY for lighter variation. For example:<br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1dEL58mn2oo546s3oCG-C3Q.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1dEL58mn2oo546s3oCG-C3Q.png\" alt=\"Colour picker\" width=\"650\" height=\"595\" \/><\/a>Color Picker<\/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\">Since we want to create a darker variation of our base color #B9F4BC (circle background) which is to be applied in our Folder icon, we need to move our color picker to the direction where the nearest RGB is located (which is Blue in this case). But if we want to have a lighter version of our Folder, we will be moving our picker to the left, near CMY (in this case 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\"><em>\"*More often RGB leads to darker variation and CMY for lighter one\"<\/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\">After moving the color picker to our desired variation, we now apply the formula in Option A, which results us to having this color combination:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1xFJji20nmU2k5NB1NjL05A.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1xFJji20nmU2k5NB1NjL05A.jpeg\" 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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1QPP5vQxaP18yKlMDckyDqA.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1QPP5vQxaP18yKlMDckyDqA.jpeg\" title=\"\" alt=\"\" \/><\/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\">\"Red, Green, Blue (RGB) + Option A formula = Darker variation. Cyan, Magenta, Yellow (CMY) + Option A formula = Lighter variation\"<\/p><\/span><\/blockquote>\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;\">4. Use spacing to separate groups <img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1kpIkcNoPiyCVgPwVoZgq6g.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1kpIkcNoPiyCVgPwVoZgq6g.jpeg\" title=\"\" alt=\"\" \/><\/a><\/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\"style=\"text-align: center;\">\u00a0Be a generous space giver<\/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\">Aside from adding a line between two groups to show separation, using a generous space between is a better and easier solution.<\/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\">As what the Law of Proximity states:<\/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\">\"Objects that are near, or proximate to each other, tend to be grouped together.\"<\/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\">From my example above, my goal is to create a separation between my title and its writer by using a large space gap between them which is 24px.<\/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;\">5. Use colors to separate rows<img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1lvdKMx2DuwQ8E1U3v23Wig.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1lvdKMx2DuwQ8E1U3v23Wig.jpeg\" title=\"\" alt=\"\" \/><\/a><\/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\"style=\"text-align: center;\">Colors as separators<\/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\">Doing row interfaces could be boring at times to design, since it only requires duplicating the component for n times. But on the user side, reading them can be difficult specially if there\u2019s no great distinction between one row to the other. Thus aside from using lines, adding color background in rows can be a lot helpful for users in reading, and also will be more enjoying to do for us designers????<\/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;\">6. Multiply instead of Drop shadow text <img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Iby-zWJwGxdR0PFRl467Dw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1Iby-zWJwGxdR0PFRl467Dw.jpeg\" \/><\/a><\/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\"style=\"text-align: center;\">\u00a0Header design<\/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\">It\u2019s quite challenging designing header components or adding text over an image specially if the image background will be dynamic (or can be changed from time to time).<\/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\">Usually the common solution for text with dynamic image background is adding drop shadow, but it doesn\u2019t help user\u2019s readability. It adds more visual clutter around the letters and words because they fill up the spaces in between them.<\/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 some, black\/white color overlay is the solution which is a helpful hack for these kinds of designs. But recently, I\u2019ve discovered about using Multiply as blend tool for a gradient fill.<\/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 class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1FeILhUoIzi2xxe3iVpjAiw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1FeILhUoIzi2xxe3iVpjAiw.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\"style=\"text-align: center;\">Specs for Multiply blend options<\/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\">Doing it is much easier than creating a black background over the image and lessen its opacity. Also, having it grayed scale makes the other part of the image retain its natural color, and makes the part where the text is located a little bit darker, for text readability.<\/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;\">7. Line Length<img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1vkoWZ1l8BuhVH5kapAEMJg.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1vkoWZ1l8BuhVH5kapAEMJg.jpeg\" \/><\/a><\/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\">The common thing most designers do is making the line length longer so that it may fit its container. But doing so, creates eye strain for our users unlike having a 45\u201365 characters per line which is the ideal.<\/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\">If you ever came across the dilemma of making the length shorter to make it ideal but will result to a big white space at the right side like the one below:<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1keGR7l-EGER0p03SupmYKA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1keGR7l-EGER0p03SupmYKA.png\" \/><\/a>with big white space at the 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\">Don\u2019t hesitate to do so, and make the whole text column center aligned to its container, so that you can remove the white space.<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1x-Bzz3RlnSVFVfXca71hIg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1x-Bzz3RlnSVFVfXca71hIg.png\" \/><\/a>centered content<a><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><\/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;\">8. Don\u2019t reinvent the wheel<img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1bShhh5jnPP8b5xVViXNT_g.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1bShhh5jnPP8b5xVViXNT_g.jpeg\" \/><\/a><\/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\">What makes a design inconsistent is when it is not component based. It is when you came to realize that you\u2019ve made 5 kinds of card interface, 10 buttons, 5 heading title styles etc.<\/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\">Before you start creating an interface for specific content, try to look around your previously created designs, for you might see a pattern which you can recycle and use.<\/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\">Instead of reinventing the wheel and create another card for an Art Group (example above), we can use the Article card and replace it with the Art Group\u2019s content. This will save time for designers and also make the interface consistent.<\/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;\">9. Use brand colors as accents<img class=\"size-full\" \/><br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1m7dCpHin2HX9uN3LqlBVew.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1m7dCpHin2HX9uN3LqlBVew.jpeg\" \/><\/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\"><\/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 usually think that branding colors must occupy a big chunk of our interface colors. We are having a hard time where to showcase our client\u2019s shocking neon yellow, orange, and pink branding colors in our clean and minimalist layout. The answer? use them as accent colors.<\/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><img class=\"aligncenter size-full wp-image-6580\" \/><\/a><\/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;\">10. Hang the bullets <img class=\"size-full\" \/><\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1X0mKGU-XpzbTOrkLhChHBw.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/10\/1X0mKGU-XpzbTOrkLhChHBw.jpeg\" \/>\/h2><\/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 lastly, if you are creating a list design like the one above, make the bullets, glyphs, or number sit in the margin to highlight the list. This will make the user readability flow uninterrupted and more legible.<\/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\">There\u2019s still a long list of design cheatsheets I would like to add, but for now, I hope these 10 design tips will help you in creating design interfaces. Also, feel free to add your cheat codes in the responses ????<\/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 article is inspired by\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/refactoring-ui\/7-practical-tips-for-cheating-at-design-40c736799886\">7 practical tips for cheating at design<\/a> and by tons of design articles, I\u2019ve read :)<\/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 article was originally posted on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/sketch-app-sources\/design-cheatsheet-274384775da9\">Riel M's Medium page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works. I remember how it is established in us at Make Technology, a&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":301,"featured_media":18404,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-18348","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=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Cheat Codes for Designing User Interfaces | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"I\u2019d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works. I remember how it is established in us at Make Technology, a... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/\" \/>\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=\"2019-11-14T15:00:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T10:22:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/11\/21.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\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=\"7 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\/10-cheat-codes-for-designing-user-interfaces\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/11\/21.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/\",\"name\":\"10 Cheat Codes for Designing User Interfaces | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#primaryimage\"},\"datePublished\":\"2019-11-14T15:00:08+00:00\",\"dateModified\":\"2020-09-03T10:22:42+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/bd482b5a9436cf2655dbc7a0d163358b\"},\"headline\":\"10 Cheat Codes for Designing User Interfaces\",\"datePublished\":\"2019-11-14T15:00:08+00:00\",\"dateModified\":\"2020-09-03T10:22:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/10-cheat-codes-for-designing-user-interfaces\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/bd482b5a9436cf2655dbc7a0d163358b\",\"name\":\"Riel Mosqueriola\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/34af5427c167093594fcff5192b084bbeffa974ef777730f34c597174defcb87?s=96&d=mm&r=g\",\"caption\":\"Riel Mosqueriola\"},\"description\":\"Product designer at Grab Singapore | Twitter\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18348","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\/301"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=18348"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/18404"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=18348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=18348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=18348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}