На початку свого дизайнерського я покладався виключно на програмні заходи у питаннях правди та брехні. Якщо Figma або Adobe XD стверджує, що дві фігури вирівняні, то вони вирівняні. Якщо дві різні фігури були різного розміру, то так і було. Якщо два кольори мали однакові hex коди, то вони виглядали однаково.
Такий підхід здається дизайнерам-початківцям логічним.
Обчислення, здійснювані програмою, розумні, але програма неспроможна врахувати людське сприйняття фігури, кольору та розміру. Крім цього, програма не може зрозуміти взаємовідносини об’єктів, їхнє місце у загальному візуальному контексті або те, як людина сприйме цей об’єкт.
Ірраціональний розум людини вирішує, чи виглядає предмет оптично вірно чи ні, тому що ми можемо бачити та розуміти контекст на відміну від комп’ютера. Розуміння цих ледь помітних відмінностей і вміння їх компенсувати і робить хорошого дизайнера ще краще, адже лише деякі помітять виправлення, але багато хто побачить помилку.
Погляньмо на невелику кількість показових прикладів.
Вирівнювання + візуальна вага
Комп’ютери не можуть визначити візуальну вагу об’єкта щодо інших предметів. Він лише може обчислювати ширину, висоту чи положення об’єкта осі XY. Дизайнерам часом доводиться компенсувати це за допомогою так званої оптичної компенсації.
Трикутник усередині іконки вирівняний по центру кола, чи не так? А ось і не правильно. Якщо намалювати прямокутник поверх трикутника, ми побачимо, що він не знаходиться по центру.
У цьому випадку має місце візуальна вага трикутника. Значна частина його площі знаходиться на лівій стороні, це і створює оптичну ілюзію того, що трикутник стоїть не по центру.
Щоб вирішити проблему, нам потрібно вручну змістити трикутник.
Але не всі фігури такі прості, як рівнобедрений трикутник. Саме тому в графічному дизайні важливим є дуже хороший окомір і розуміння центру мас для об’єктів геометрії різної складності.
Колір
Оптична компенсація у кольорах менш помітна. Але й у цьому випадку вся справа в оптичній вазі об’єкта.
Якщо використовувати один і той же відтінок зеленого як для іконки, так і для тексту, то текст виглядатиме трохи тьмянішим.
У іконки та тексту ліворуч той самий hex код, а у іконки та тексту праворуч — різний.
Щоб уникнути різної оптичної ваги, можна зробити іконку трохи яскравіше, або текст — темніше.
Масштаб
Масштаб — це те, як наш розум сприймає розміри об’єктів, зокрема і тексту. Наприклад, площа квадрата 120×120 пікселів більша, ніж площа кола діаметром 120 пікселів, тому коло потрібно зробити більше для компенсації. Це добре знали древні греки, які свої колони трохи розширювали в середині-щоб із землі колона здавалася ідеально рівною.
Базова лінія
Великі літери
Останній приклад, де необхідно внести виправлення — це застосування тексту, набраного великими літерами, біля стандартного тексту. Головний текст більш помітний, ніж стандартний, тому його потрібно компенсувати.
Текст, набраний великими літерами, здається набагато більше, ніж текст із звичайним регістром, розмір тексту знизу було зменшено на 2 пікселі
При роботі над повноцінним проєктом, навіть маленькі зміни вплинуть на загальне сприйняття картини. Саме увага до деталей відрізняє добрий дизайн від відмінного.
Варто зауважити, що використання тіні вимагає додаткової оптичної компенсації, такої як звисання тіней, до того ж на розмір звисання впливає так само і візуальна вага самої тіні. А вже сама вага формується і з кольору, і з розміру, і з розмиття, і т.п.
P.S. Сама собою тема оптичної компенсації дуже масштабна і заучувати її як зведення правил буде неправильним. Цю тему потрібно розуміти та вміти застосовувати, оскільки деякі стандартні правила компенсації працюють нестандартно залежно від тих чи інших умов. Комп’ютери та штучні інтелекти ще дуже довго не зможуть зрозуміти контекст окремого шматка дизайну, тому вони не можуть внести ті зміни, які можуть внести дизайнери. Ми повинні покладатися на наші очі та сприйняття під час роботи над дизайном.