Продуктовий дизайнер Grammarly Олександр Вілінський, який працює з дизайн-принципами, етикою та розвитком дизайнерів, та Дмитро Новиков розібралися з графічними концептами іконок Big Sur. Telegraf.Design публікує переклад висновків Олександра щодо аналізу візуального дизайну.

1.Cinematic Backgrounds

Найчастіше для графічних елементів я на автоматі ставлю світло зверху, і це логічно для багатьох компонентів. Але я завжди боявся чіпляти «атмосферні» об’єкти – фони, де це можна порушити та зробити навпаки, щоби додати ефект кінотеатру. Цей ефект класно працює, щоби керувати настроєм і приготувати сцену для об’єктів.

2.Bevels and Highlights

Як і в 3D, щоб об’єкти виглядали реалістичними, потрібно додавати фаски, від яких відбивається колір. Не варто боятися ставити у Figma лінії 0.25 та складати схему освітлення (звідки світить і чому). Фаски мають бути максимально субтильними, щоби бути ледь видимими – око однаково розпізнає їх та домалює картинку.

3.Highlights and Shadows

Важливо балансувати між відблисками і тінями. Вони мають допомагати об’єкту перебувати у просторі. Кожна додана тінь свідчить про дистанцію об’єкта, його можливу динаміку та матеріал. Для реалістичного відображення, тіней має бути декілька: де об’єкт зіштовхується зі площиною, де він відображає світло на площину, де вбирає колір від площини. Їх можна додавати нескінченно, головне – щоби фінальна картинка виглядала красивою. У тіней є своя температура і колір, які можна контролювати, щоби додати реалізму.

4.Non-linear Gradients

Лінійні градієнти не виглядають реалістично, тому варто пробувати радіальні, переносячи їхній кут – для додавання природності. Світло незавжди (й узагалі рідко) перебуває в зеніті.

5.Rhythm between elements

Я часто випускаю ритм зі своєї роботи, намагаючися покращувати кожен елемент окремо. Але композиція складається не тільки тоді, коли простір між елементами відповідає ієрархії, а й тоді, коли різні елементи підводять тебе до розуміння об’єкта. Наприклад, за допомогою ритму.

6.Structure of icons

У іконок у новій версії macOS є принципи. Я думав, що вони схожі на медальки, де є поглиблення і висоти. Але ми прийшли до висновку, що вони радше схожі на циферблати з розтягнутим матеріалом під головним елементом і відстанню між матеріалом і «фоном» (який перебуває трохи вище і перестає бути фоном). Для відображення правильної структури потрібно декілька разів подумати про освітлення.

7.Icon Perception

У іконках насамперед сприймають колір, а потім уже форму. Приділяючи час головному кольору (темі) іконки, можна контролювати, наскільки вона буде виокремлюватися в оточенні, де буде використовуватися.

Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.