Increase the Power of Your Website with Optical Adjustment

For many people, designing a website can seem like a pretty straightforward task. There's a little programming, a little functionality and maybe some art, if one feels up to it. However, there's a difference between functional and effective, and professional web designers can make even the most utilitarian website stand out from the crowd by following a few pointers.

An often overlooked element of web design is the philosophy of optical adjustment. As the name implies, elements on a web page are adjusted, sometimes just a few pixels in a direction, to make a layout more pleasing to the average eye. Much of this has to do with the difference between true alignment and perceived alignment.

For example, when aligning elements in a design program, like Adobe Photoshop, one only has to click a few buttons and two or more "things" can be lined up a certain way, like on their left edges. This logical approach to alignment seems pretty cut and dry, but in reality, not all elements will be perceived as aligned by the user's brain, even if the leftmost pixels of all the elements are indeed aligned on a vertical ruler.

To go a little deeper, consider two elements: A block of left-justified text and a typical pill-shaped button with rounded edges. It's tempting to just line these elements up on some sort of logical center, like the horizontal middle of their bounding boxes. But left-justified text has a visual "weight" to it that causes it to be visually heavier on the left side. To make the design more pleasing to the eye, slight pixel adjustments may have to be made to the object's alignment to make it seem more optically aligned with the rest of the layout.

Another thought to consider is the difference in shapes. For example, if one is faced with a side-by-side graphic of a 90 by 90 pixel circle and a 90 by 90 pixel square, the square will actually seem larger to the human eye. To compensate, a designer may consider making the circle just slightly larger or a darker color. For more information click here https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0.