<p>Published on <a href="https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Anton Lovchikov </p>
<p>Every time you look at a computer interface, your brain is trying to fool you. No matter how hard you try to make things look aligned — the eye of the beholder will often disagree, due to a way we are wired to perceive objects in real life. So, as designers, the only option we have is to fool viewer’s brain back. In this article, I will show you few things to compensate for when designing components. Take a look at this simple modal window for example.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ykog0j2SsS_eSdOVvjqU7w.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sY-2rADpza9206RIa-vofg.png">Left: 7 adjustments, right: no adjustments. Try to spot the difference before reading further.</p>
<p>It’s hard to tell the difference right away, so here’s a GIF to help:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ag0qu7g8q7UYhZfMPwMiew.gif"></p>
<h3>Adjusting for gravity</h3>
<p>Any physical object in a real world is affected by gravity. Meaning, it tries to fall down once lifted. Our brain applies the same real-world expectations to the elements of the interface and assumes that any object on screen is “trying” to fall down. Even when the object is entirely static, our brain still expects that it will start moving downwards (space above the object will increase, and space below will decrease) and adjusts for it. An object, perfectly centered vertically, will appear lower than it actually is. In order to align an object <em>optically</em>, we have to counter-compensate for gravity “expectations” and lift an object up a bit:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TPuXU3Q7ELJUTi2QFhyrsA.jpeg"></p>
<p>The bigger is the object, the “heavier” it is and thus “drops” faster (let’s not remind ourselves about vacuum this time :) — so we need to compensate more for bigger objects, and less — for smaller ones. A container that holds “lighter” buttons is shown in pink:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IRk169Ozqj6qH33ryxerrQ.jpeg"></p>
<h3>Adjusting margins for rounded buttons</h3>
<p>It is also a good idea to slightly shift your rounded buttons beyond the guides.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/928/1*gTAVFAeNHDmqwyd2lSnM6w.png"></p>
<p>Otherwise, a button will be perceived as slightly unaligned, “shifted in”. At the same time, if your button’s corners are rounded to a lesser extent and you can still draw a straight line adjacent to the edge — you don’t need to compensate:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/928/1*0J8h3UACYfsUUp59I8ihRw.png"></p>
<h3>Adjusting margins for headings</h3>
<p>Same principle applies to headings, especially to larger ones. With bigger font sizes, paddings around each letter become more apparent and it breaks the perception of the left border. To account for that, I apply a small negative left margin:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s7eUVKw93Efj-7zJ_XZPrQ.jpeg"></p>
<p>Surely, it’s tedious to apply this to every single heading in your design, as this is a manual process, but for more prominent ones (e.g., on a landing page) it is worth the effort.</p>
<h3>Adjusting a right border of a text block</h3>
<p>With left-aligned text, right edge of a text block becomes “ragged” and the right border is optically shifted. As in a case of a rounded button, I will shift the whole text block slightly to the right in order for it to appear centered:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RfsHrb8ktX3sjWpYNg3lhg.jpeg"></p>
<p>This way, right border sits closer to an implied vertical guide on the right. You can see the obvious difference in perception if we don’t apply this rule:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EDpaTi_3m07uZtzV9X0sZA.jpeg"></p>
<h3>Adjusting for color</h3>
<p>A color is perceived differently depending on the area it fills. A certain color applied to the text on a white background will appear paler than the same exact color applied uniformly to a large block. On the contrary, if we put colored text on a dark background, its color will appear darker. Backgrounds “absorb” thin typefaces and text color is always visually shifted towards the color of a background. To adjust for that fact, I make a color a bit darker when used on the light backgrounds, and lighter — on dark ones.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SwwAISOMu6A5JT7AWpnx4w.png"></p>
<p>The smaller font size and weight, the more you need to compensate:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*iI7JaNNYm2WFTWR8Ix02wQ.png"></p>
<h3>Adjusting for greyscale</h3>
<p>This is a particular case of color adjustment. I try to pick a shade of grey by taking a 100% black and modifying its opacity, not by setting color values directly:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Eupi7o0hoKiIeRUDTdiAHA.png"></p>
<p>That way, your grey would not be “washed out” when you darken a background:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5ilKoh6d20CVjpG4N2fRtw.gif"></p>
<p>Semi-transparent black helps achieve a readable result without creating a lot of different styles. For darker backgrounds semi-transparent white is also an option:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ML_BnApaSCQQmKz5I9dJ1g.png"></p>
<h3>Adjusting a shadow density</h3>
<p>I use different shadow density depending on the color of the object that produces a shadow. For darker objects a shadow should be made more intense, for lighter ones — more transparent:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QuuIe8aGojZt7JLSiddu3A.png"></p>
<p>Without that trick, a shadow from a lighter object will appear darker next to the shadow from a darker object, given that both shadows have the same opacity:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/634/1*e-21IK2RikFiYt5M3KupEA.png"></p>
<p>Surely, not every project deserves extra time spent on optical adjustments, but if the interface you are developing calls for a special attention and needs to stand out — using all the tricks above will lead to a more harmonious result.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a7f1f8655e0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0">Optical adjustments in components</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Optical adjustments in components

Top Stories