Є одна річ, яку я дуже люблю в дизайні: іноді достатньо змінити зовсім небагато, щоб раптом побачити те, чого раніше не помічав. Уявіть, що ви кілька тижнів працювали над інтерфейсом. Продумали структуру, підібрали кольори, налаштували типографіку, знайшли правильні відступи. Ви знаєте, чому один елемент більший за інший, де потрібно залишити більше простору і що людина має побачити першою. Нарешті дивитеся на результат і розумієте: усе на своїх місцях. А потім змінюєте білий фон на темний — і раптом щось перестає працювати.
Кнопки нікуди не зникли, структура не зламалася, сценарії залишилися тими самими. Але інтерфейс, який ще хвилину тому здавався зрозумілим, тепер виглядає зовсім інакше. Картки зливаються з фоном, акцентний колір привертає забагато уваги, текст стає важчим для сприйняття. Наче ви зайшли до добре знайомої кімнати, у якій хтось вимкнув світло. Меблі стоять на тих самих місцях, але орієнтуватися вже не так просто. І знаєте, що мені подобається в цьому моменті? Він дуже добре показує, наскільки багато в дизайні залежить від деталей, які ми звикли не помічати.
ПЕРЕВАГИ DARK MODE
У світлому інтерфейсі багато рішень здаються природними. Картка може відокремлюватися від фону завдяки ледь помітній різниці відтінків, правильно підібраним відступам або тонкій межі. Темний текст добре читається на світлій поверхні, а акцентна кнопка привертає увагу саме там, де це потрібно. Я взагалі люблю, коли дизайн обходиться без зайвих ефектів. Наприклад, своїм студентам я часто раджу не поспішати додавати тіні, а спочатку пошукати інші способи створити глибину й розділити інформацію. Іноді достатньо зовсім невеликої зміни кольору чи простору, щоб усе стало на свої місця. Але варто перейти до темної теми, і навіть ці делікатні рішення потрібно перевірити заново. Саме тому для мене Dark Mode ніколи не був просто ще однією палітрою кольорів. Адже ми змінюємо не лише вигляд інтерфейсу, а й те, як людина сприймає інформацію.
Особливо добре це видно на прикладі інтернет-магазину. Уявімо сторінку товару: велика фотографія, назва, ціна, характеристики та кнопка покупки. У світлій темі все виглядає логічно: погляд спочатку зупиняється на товарі, потім переходить до важливої інформації, а далі — до дії. Але після переходу в темну тему раптом виявляється, що найпомітнішим елементом стала кнопка. Не тому, що ми змінили її розмір або розташування. Просто тепер її колір виглядає значно яскравішим на темному фоні. Здавалося б, дрібниця. Але людина може навіть не усвідомлювати, чому сторінка стала менш зрозумілою. Раніше їй було легко роздивитися товар і прийняти рішення, а тепер увага постійно перескакує між елементами.
І тут у дизайнера з'являється вибір. Можна почати змінювати кольори, поки все знову не стане красивим. А можна спочатку зрозуміти, що саме ми хочемо, щоб людина помітила. Для мене це одна з найважливіших відмінностей між оформленням і проєктуванням. Недостатньо зробити інтерфейс привабливим. Потрібно розуміти, чому він працює і що станеться, якщо змінити хоча б одну його частину.
Хороший Dark Mode починається не з темного кольору. Він починається з логіки, яку ми закладаємо ще під час створення світлої теми.
Коли ми працюємо над дизайн-системою, легко захопитися палітрою. Підібрати красиві відтінки, визначити основні й додаткові кольори, знайти цікаві поєднання. Але справжня цінність системи не в кількості кольорів. Вона в тому, що кожен із них має своє призначення. Один відповідає за основний фон, інший допомагає відокремити картку, третій виділяє важливу дію, четвертий використовується для другорядної інформації. І коли ми розуміємо ці ролі, створювати темну тему стає значно простіше. Нам уже не потрібно щоразу вигадувати нові рішення. Ми адаптуємо знайому систему так, щоб вона залишалася зрозумілою в іншому вигляді.
Мені подобається порівнювати це з музикою. Одну й ту саму мелодію можна зіграти на фортепіано або гітарі. Звучання буде різним, деякі акценти зміняться, але ви все одно впізнаєте мелодію. З інтерфейсами схожа історія.
Світла й темна теми не повинні виглядати абсолютно однаково. Вони мають зберігати ту саму логіку, характер бренду й зрозумілість для людини.
До речі, саме тому я не люблю використовувати чистий чорний як основний фон темного інтерфейсу. Мені важливо, щоб між поверхнями залишалася глибина, а текст не створював відчуття надмірної яскравості. На абсолютно чорному фоні білий текст може виглядати занадто контрастним, особливо коли людина користується пристроєм у темному приміщенні. Тому я частіше обираю складніші темні відтінки, з якими легше працювати над візуальною ієрархією та відчуттям простору. Але тут важливо не просто замінити чорний на темно-сірий. Потрібно перевірити, чи добре читається текст, чи достатньо помітні елементи та чи комфортно користуватися інтерфейсом у різних умовах.
І знаєте, що найприємніше? Для того щоб почати так мислити, не потрібно мати десять років досвіду. Можна взяти один власний екран і спробувати створити для нього темну тему. Не намагатися одразу зробити ідеально, а просто подивитися, що зміниться. Можливо, виявиться, що карткам узагалі не потрібні рамки, якщо правильно підібрати поверхні. Або що кнопка, яку ви так старанно виділяли, і без додаткових ефектів чудово привертає увагу. Або що деякі кольори у вашій системі існували лише тому, що колись вам сподобалися, а не тому, що виконували конкретну роль. Мені подобаються такі відкриття, бо саме в ці моменти дизайнер починає бачити не просто красиві екрани, а причини, через які вони працюють.
Звісно, є речі, які не варто залишати на рівні власних відчуттів. Читабельність, контраст, доступність, поведінка кнопок й інших елементів у різних станах — усе це потрібно перевіряти. Існують стандарти й дослідження, які допомагають зрозуміти, де наше відчуття «виглядає нормально» може нас підвести. Але для мене вони не про складні обмеження. Вони про впевненість у тому, що наші рішення працюють не лише на нашому моніторі й не лише для нас.
Є ще одна думка, до якої я часто повертаюся. Ми звикли говорити про Dark Mode так, ніби він автоматично робить продукт кращим. Але комусь комфортніше читати на світлому фоні, хтось віддає перевагу темному інтерфейсу ввечері, а хтось узагалі не замислюється про тему, поки вона не починає заважати. І це нормально.
Хороший дизайн не повинен змушувати всіх людей однаково сприймати світ. Іноді найкраще, що ми можемо зробити, — дати людині можливість вибрати. А якщо вона цей вибір зробила, подбати, щоб обидва варіанти були однаково продуманими.
Рекомендуємо курси по темі
ВИСНОВОК
Мені хочеться, щоб дизайнери не боялися Dark Mode. Не сприймали його як ще одну складну задачу, яку потрібно якнайшвидше закрити. Бо насправді це чудова можливість перевірити, наскільки добре ви розумієте власний дизайн. І тут я повертаюся до нашого інтерфейсу з початку історії. До того самого екрана, який виглядав майже ідеально, поки ми не змінили фон. Можливо, проблема була зовсім не в темній темі. Можливо, вона просто показала нам те, чого ми раніше не помічали: деякі рішення працювали лише завдяки звичному світлому середовищу, певні кольори не мали чіткого призначення, а візуальна ієрархія була не настільки продуманою, як нам здавалося.
І це не привід розчаровуватися у власній роботі. Це можливість зробити її сильнішою. Бо хороший дизайнер не той, хто з першої спроби знайшов ідеальний колір. А той, хто розуміє, що станеться з його інтерфейсом, якщо цей колір змінити.
І, мабуть, саме тому Dark Mode для мене ніколи не був просто темним фоном. Це один із найцікавіших способів перевірити, чи справді ми спроєктували інтерфейс — чи лише звикли до того, як він виглядає.
Рекомендуємо публікації по темі
