Просмотров:
Пост был изменен: March 2, 2021

Автор: Богдана Данилейко

Секрети чорних тем в дизайні інтерфейсів та сайтів

Історія виникнення чорних тем

У 2017 році чорний колір став найпопулярнішим в жіночій моді, займаючи приблизно 36% ринку (за даними компанії Edited). І в наступному році ця тенденція захопила дизайн UI/UX. Хоча той же сервіс Spotify чи Adobe Creative Suite використовують принцип “світле на темному” вже давним-давно.

Черные темы в дизайне

Чорна тема у дизайні сайтів та додатків почала набувати масової популярності уже з 2019 року.

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

Вперше темна (або чорна) тема була анонсована в системі Android 9, в операційній системі IOS – з 13 версії та в оновленнях October 2018 Update в Windows10 для ОС Windows.

За останнє десятиліття компаніями з усього світу було проведено достатньо досліджень з приводу темного/світлого інтерфейсу. Не будемо наводити в статті конкретні дослідження, просто наголосимо, що середнє арифметичне всіх висновків – це відсутність єдиної думки чи прямої кореляції від застосування того чи іншого оформлення чи правила. Є лише рекомендації, тренди та емпатія до користувача.

Опрос пользователей сайтов

Опитування: habr.com

Чому ми ж всі так любимо чорні теми в інтерфейсі

Чорна тема швидко почала набирати популярність відразу по кількох вагомих причинах. По-перше, на мобільних пристроях її використання зберігає до 20% заряду батареї, оскільки дисплеї з Amoled-та OLED-екранами потребують менше “увімкнених” пікселей. По-друге, темна тема зменшує навантаження на очі в умовах недостатнього освітлення.

Темная тема в дизайне сайта

Зображення: habr.com

Дизайн сайту в темних тонах

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

Недавнє опитування ProBlogger показало, що 47% користувачів подобаються сайти зі світлим фоном, 10% відповіли, що завжди віддавали перевагу темному оформленню і 36% вважають, що успішність використання темної теми залежить від правильно оформленого контенту. Тож вибір суб’єктивний.

Статистика популярности сайтов

problogger.com

Розробка сайтів з темним оформленням

Поширена думка про те, що чорна тема може приховати недоліки сайту та збільшити лояльність користувачів. Але на практиці ця теорія не діє. Адже потрібно бачити всі фактори, які будуть вливати на сприйняття інформації.

Отже, розглянемо нюанси, які необхідно враховувати при оформленні сайту з чорною темою.

  • Чорний колір підкреслює акценти на сайті

Якщо ваш сайт містить багато графіки, візуального контенту, то темне оформлення буде акцентувати погляд і зміщувати фокус уваги на потрібних місцях завдяки елементам іншого кольору.

  • Темний – символ статусу

Темний інтерфейс у збалансованому поєднанні з мінімалізмом додає відчуття статусу, створює емоційний зв’язок з розкішстю та достатком.

  • Темний не означає чорний

Якщо ви знайомі принципами малювання картин, то пам’ятаєте, що художники ніколи не використовують 100% чорний колір та 100% насичений колір будь-якого віддтінку. Людське око розрізняє сотні відтінків кольрорів навіть, коли картина насичена та малоконтрасна. Тому ніколи не використовуйте 100% чорний та 100% білий. Варто витримувати баланс та використовувати поєднання різних відтінків кольорів: обирайте золоту “середину”.

Варианты оттенков в темном дизайне сайтов

Зображення: habr.com

  • Перевіряйте контраст

За даними ВООЗ, близько 285 мільйонів людей по всьому світі страждають від порушень зору, з них 39 мільйонів вражені сліпотою. Серед цих людей велика частка тих, хто страждає на дальтонізм, катаракту, макулодистрофію та інші вади зору.

Тому якщо людина не розрізняє основні кольори, попіклуйтеся, щоб вона змогла прочитати ваш інтерфейс, користуючись контрасністю темного фону і елементів графіки або тексту на ньому.

Контраст при использовании темных тем в дизайне

Зображення: cdnews.ru

  • Проявляйте емпатію до свого користувача

Під конкрентий випадок обов’язково враховуйте: хто ваш клієнт, його вік, в який час доби буде більше відвідуваність сайту, скільки часу він буде проводити на сайті, спокійні емоції чи напругу хочете викликати контентом і т.д.

  • Тестуйте сайт

Перегляньте свій сайт або додаток рано вранці, коли прокинулися, на вулиці, коли світить яскраве сонце чи в нічному транспорті.

Дизайн интерфейса с использованием черного цвета

Зображення: cdnews.ru

  • Дайте вибір користувачу

Відвідувачі сайту будуть більш лояльними до вас, якщо ви дасте їм право вибору. Особливо наразі, коли більшість тестує темні теми і проявляє респект до додатків, що включаються в тренд і дають можливість змінити схему самостійно.

Висновок

Темне оформлення найчастіше придає елегантність, дуже гарно виглядає в портфоліо, але насправді має використовуватися тільки коли це доцільно та аргументовано.