{"id":2447,"date":"2016-08-05T18:10:38","date_gmt":"2016-08-05T17:10:38","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=2447"},"modified":"2021-02-15T07:11:14","modified_gmt":"2021-02-15T07:11:14","slug":"optical-adjustment-logic-vs-designers","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/","title":{"rendered":"Optical Adjustment &#8211; Logic vs. Designers"},"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\">In my early days as a designer, I relied on Photoshop or CSS to tell me whether something was right or wrong. If Photoshop indicated that two shapes were aligned, then they were aligned. If two different shapes were the same size, then that was the case. If two colours had the same hex values, then they <em>looked<\/em> the same colour.<\/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 approach seemed logical, but it was an incorrect way of working.<\/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 calculations software makes are rational, but software cannot take into account the way humans perceive shape, colour, and size\u200a\u2014\u200athat is to say the software cannot understand the <em>context<\/em> of an object in relation to other objects, in the context of an overall visual language, or how a human would perceive the object.<\/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 irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can\u2019t. Understanding these subtle differences and knowing how to adjust them is what makes a good designer even better\u200a\u2014\u200afew will notice if it has been considered, but many will notice if it hasn\u2019t.<\/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\">Let\u2019s take a look at a small number of examples of this in action.<\/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\">Alignment + Visual Weight<br \/>\n<\/strong><br \/>\nComputers cannot figure out where the <em>weight<\/em> of an object lies in an accurate way, it can only rely on certain information such as the width, height, or x\/y position. As designers, we need to compensate for this through something called optical adjustment.<\/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 triangle in a play icon is centre-aligned in the circle right? Wrong. Drawing a rectangle around the play icon reveals that it\u2019s off-centre.<\/p>\n<div id='gallery-1' class='gallery galleryid-2447 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\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-1-2474\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1.jpeg 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1-600x338.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1-768x432.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-qyim2akrZ_ExNIuyE_XAAQ-1-1500x844.jpeg 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-2474'>\n\t\t\t\tThe left play icon appears centrally-aligned, despite it being off-centre when wrapped in a rectangle\n\t\t\t\t<\/dd><\/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\">Whilst the \u2018correct\u2019 play icon doesn\u2019t appear off-centre, it is clear here that it is, and not just by a little bit. Why? Visual weight. The weight or mass in the triangle lies in its left-hand side, this creates an optical illusion of being off-centre even when it isn\u2019t.<\/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 solve this, we have to manually nudge the triangle until it <em>appears<\/em> central.<\/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\">Colour<br \/>\n<\/strong><br \/>\nOptical adjustments in colour are more subtle. Once again, it is about the weight of the object, and how much of the colour appears.<\/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 short: the same green might be used for a filled-icon and some text, but one of them will look lighter than the other.<br \/>\n<div id='gallery-2' class='gallery galleryid-2447 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\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-2-2475\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1.jpeg 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1-600x338.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1-768x432.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-9QpGNYzAk2T9rGWbFFJefw-1-1500x844.jpeg 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-2475'>\n\t\t\t\tThe left icon + text combo uses the same hex value, the right combo uses two different values. To achieve this, I decreased the brightness of the green in the \u2018HSB\u2019 values in Sketch.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n<\/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 is subtle, but you can see that the icon is heavier than that of the text. To adjust this, either make the icon colour lighter, or make the text darker\u200a\u2014\u200aI suggest picking whichever colour will help you meet AA accessibility guidelines.<\/p>\n<div id='gallery-3' class='gallery galleryid-2447 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"620\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-2O6AY_PfwnGbXxyPWAt5qQ-2.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-3-2476\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-2O6AY_PfwnGbXxyPWAt5qQ-2.jpeg 1160w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-2O6AY_PfwnGbXxyPWAt5qQ-2-600x321.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/1-2O6AY_PfwnGbXxyPWAt5qQ-2-768x410.jpeg 768w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-2476'>\n\t\t\t\tI would recommend using the HSB colour values instead of RGB in your design application. One huge benefit is allowing a designer to swiftly change the brightness of a colour.\n\t\t\t\t<\/dd><\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Scale<\/strong><br \/>\nScale is about how our brains perceive the size of objects, text included. If we think about this in terms of circles and squares, a 120 \u00d7 120 pixel square has a larger surface area than a 120 \u00d7 120 pixel circle, so the circle must be larger to compensate.<\/p>\n<div id='gallery-4' class='gallery galleryid-2447 gallery-columns-1 gallery-size-large'><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\/2016\/08\/Shape-Proportions.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Shape-Proportions.jpeg\" class=\"attachment-large size-large\" alt=\"Shape Proportions\" aria-describedby=\"gallery-4-2451\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Shape-Proportions.jpeg 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Shape-Proportions-600x338.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Shape-Proportions-768x432.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-2451'>\n\t\t\t\tThe left shapes are both 120 \u00d7 120 pixels, which makes the circle feel too small. The right circle is 126 \u00d7 126 pixels, to compensate for the larger surface area of the square\n\t\t\t\t<\/dd><\/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\">As with all other adjustments this is subtle, but the adjustments help the overall design <em>look<\/em> right. This is very much fine-tuning of an element\u200a\u2014\u200anudging values up and down by 1 pixel until it <em>feels<\/em> right.<\/p>\n<div id='gallery-5' class='gallery galleryid-2447 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\/2016\/08\/font.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/font.jpeg\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-5-2478\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/font.jpeg 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/font-600x338.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/font-768x432.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/font-1500x844.jpeg 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-2478'>\n\t\t\t\tNotice how the tops\/bottoms of curves on Didot go above the x-height and drop below the baseline. This can be seen on 7 different letters here\n\n\t\t\t\t<\/dd><\/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\">This is also true in typography, where overshoots on curved letters drop or rise above the cap-height, baseline, etc. If you write a line of text in Garamond and draw a line on the baseline and x-height of the text, you would see the curved shapes overhanging these lines. If these <em>overshoots<\/em> didn\u2019t exist, the individual characters would feel too small next to their siblings.<\/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\">Uppercase text<\/strong><br \/>\nA final, quick example of where optical adjustment is necessary: when setting uppercase text next to standard case text. Uppercase text is more prominent than standard case text, and needs to be adjusted to compensate.<\/p>\n<div id='gallery-6' class='gallery galleryid-2447 gallery-columns-1 gallery-size-large'><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\/2016\/08\/Text-Proportions.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Text-Proportions.jpeg\" class=\"attachment-large size-large\" alt=\"Text Proportions\" aria-describedby=\"gallery-6-2454\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Text-Proportions.jpeg 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Text-Proportions-600x337.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Text-Proportions-768x432.jpeg 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-2454'>\n\t\t\t\tThe uppercase text in the top example seems larger than the text it is next to, the uppercase text in the bottom example has been adjusted by 2 pixels to make it feel the same size\n\t\t\t\t<\/dd><\/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\">Unless the aim of this design aspect is for the uppercase text to be more prominent, uppercase text should always be reduced by a small number of pixels, e.g. 16 pixels to 14 pixels or 12 pixels to 11 pixels.<\/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 working on a large interface each of these tiny design details add up and will affect the overall feel of the website. This attention to detail is what makes a good design great.<\/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\">Once it becomes part of a workflow, reducing text size by 2 pixels or nudging a triangle 10 pixels to the right takes moments, but these are the things that make a design feel pixel perfect.<\/p>\n<div id='gallery-7' class='gallery galleryid-2447 gallery-columns-1 gallery-size-large'><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\/2016\/08\/Eye.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Eye.jpeg\" class=\"attachment-large size-large\" alt=\"Eye\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Eye.jpeg 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Eye-600x337.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Eye-768x432.jpeg 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/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\">Computers or even AI cannot understand the context of a piece of design, so it cannot make the accurate adjustments that a designer can make. Until a computer can make a rational judgement about an isolated component within the context of an entire visual language, it cannot be relied on to make complex design decisions.<\/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 shouldn\u2019t rely on computers to do all the thinking for us, we should rely on our eyes and our instincts. Designers hone their instincts with every working day, so we should trust them, even when a computer tells us otherwise.<\/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>I\u2019m a bit of a nerd when it comes to stuff like this, so if you have any interesting examples that you\u2019ve had to fix then please <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/lukejones\" target=\"_blank\" rel=\"noopener noreferrer\">shoot me a tweet<\/a>. Or is it that I am totally wrong? If I am, please <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/lukejones\" target=\"_blank\" rel=\"noopener noreferrer\">call me out on it<\/a>, I want to talk about it!<\/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\"><em>This post was <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@lukejonesme\/optical-adjustment-b55492a1165c#.7v026sxov\" target=\"_blank\" rel=\"noopener noreferrer\">originally posted<\/a> on Luke\u2019s <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@lukejones\" target=\"_blank\" rel=\"noopener noreferrer\">Medium profile<\/a>.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">\nFurther reading:<br \/>\n<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/z-list-tech-terms-need-know-ux-designer\/\">An A-Z List of Tech Terms You Need to Know as a UX Designer<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/ooux\/\">Object-Oriented UX<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/design-principles-help-shape-best-user-experience\/\">UX Design Principles That Help You Shape The Best User Experience<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/body-text-small\/\">Your Body Text Is Too Small<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/basic-principles-visual-design\/\">The Basic Principles of Visual Design<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In my early days as a designer, I relied on Photoshop or CSS to tell me whether something was right or wrong. If Photoshop indicated that two shapes were aligned, then they were aligned. If two different shapes were the same size, then that was the case. If two colours had the same hex values, then they looked the same&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":18,"featured_media":2456,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-2447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Calculations software makes are rational, but software cannot take into account the way humans perceive objects. Optical adjustment compensates the flaws.\" \/>\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\/optical-adjustment-logic-vs-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optical Adjustment - Logic vs. Designers - Marvel\" \/>\n<meta property=\"og:description\" content=\"Calculations software makes are rational, but software cannot take into account the way humans perceive objects. Optical adjustment compensates the flaws.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/\" \/>\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=\"2016-08-05T17:10:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-15T07:11:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Optical-Adjustment-Banner.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\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=\"4 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\/optical-adjustment-logic-vs-designers\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Optical-Adjustment-Banner.jpeg\",\"width\":2000,\"height\":737,\"caption\":\"Optical Adjustment Banner\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/\",\"name\":\"Optical Adjustment - Logic vs. Designers - Marvel\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#primaryimage\"},\"datePublished\":\"2016-08-05T17:10:38+00:00\",\"dateModified\":\"2021-02-15T07:11:14+00:00\",\"description\":\"Calculations software makes are rational, but software cannot take into account the way humans perceive objects. Optical adjustment compensates the flaws.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3e766734a20212d7ac6a1a6bfd4b6f65\"},\"headline\":\"Optical Adjustment &#8211; Logic vs. Designers\",\"datePublished\":\"2016-08-05T17:10:38+00:00\",\"dateModified\":\"2021-02-15T07:11:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/optical-adjustment-logic-vs-designers\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3e766734a20212d7ac6a1a6bfd4b6f65\",\"name\":\"Luke\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c23fbd997b10319666ff30f54606f3ff32d84cb56a2fb259f372273c3533c5f0?s=96&d=mm&r=g\",\"caption\":\"Luke\"},\"description\":\"UI \/ Visual designer with a focus on user-centred design and research. Currently working at Hudl. Follow me on Twitter @lukejones and check out my work.\",\"sameAs\":[\"http:\/\/lukejones.me\/portfolio\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2447","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=2447"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/2456"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=2447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=2447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=2447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}