More ideas from Jana
I personally was surprised when learned that our eyes are more sensitive to the height of an object than to its width. It explains why even in geometric fonts, letters “o” are always wider than geometric circles, and the vertical stems of letters “H” are always thicker than the horizontal ones.

Optical Effects in User Interfaces (for True Nerds)

a simple fix for rounded corners. You need to convert revertible rounding effects into an outline, enter the shape editing mode and manually move curve handles closer to each other.

a simple fix for rounded corners. You need to convert revertible rounding effects into an outline, enter the shape editing mode and manually move curve handles closer to each other.

The main benefit of using shapes like superellipse is their more circular and smooth appearance.

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. Over 50 pics included.

The main benefit of using shapes like superellipse is their more circular and smooth appearance.

The main benefit of using shapes like superellipse is their more circular and smooth appearance.

The main benefit of using shapes like superellipse is their more circular and smooth appearance. (vpravo)

The main benefit of using shapes like superellipse is their more circular and smooth appearance. (vpravo)

The main benefit of using shapes like superellipse is their more circular and smooth appearance.

The main benefit of using shapes like superellipse is their more circular and smooth appearance.

Optical Effects in User Interfaces (for True Nerds)

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. Over 50 pics included.

horizontální centrování ikony

horizontální centrování ikony

3. horizontální centrování ikony - příprava podkladů pro vývoj (vč. pozadí)

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. Over 50 pics included.

2. horizontální centrování ikony

Optical Effects in User Interfaces (for True Nerds)

1. horizontální centrování ikony

1. horizontální centrování ikony

The trick is that on the right button I moved the word a bit to the left, since the right edge is triangular. Moreover, the arrow-like button is 40 pixels wider to look optically equal to the rectangular one.

The trick is that on the right button I moved the word a bit to the left, since the right edge is triangular. Moreover, the arrow-like button is 40 pixels wider to look optically equal to the rectangular one.

Alignment - The light background of input fields on the left can go beyond input labels and user’s input. The right edge of “Send” button is not fully aligned with the right edge of input backgrounds since the button is darker and looks heavier from optical perspective.

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. Over 50 pics included.

the black background is aligned with the rest of text while the white text inside of it is placed with indents

the black background is aligned with the rest of text while the white text inside of it is placed with indents