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

Дизайн у темних тонах відноситься до стилю та підходу до створення візуального оформлення, заснованого на використанні глибоких та насичених колірних схем, зазвичай з переважанням темних відтінків. Цей стиль дизайну став популярним в останні роки і може бути використаний у різних галузях, включаючи веб-дизайн, графічний дизайн, інтер'єрний дизайн та інші.

Приглушіть світло, розслабте очі та зекономте енергію. Темний режим - одна з найпопулярніших тенденцій у дизайні, і такі бренди світового рівня, як WhatsApp, Instagram, Google, Facebook та Apple вже сіли на поїзд дизайну темного режиму.

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

Друкований маркетинговий матеріал

Що таке темний режим? Дизайн в темних тонах

Темний режим — це інтерфейс користувача (UI) при слабкому освітленні, в якому як основний колір фону використовується темний колір - зазвичай чорний або відтінок сірого. Це повна протилежність до стандартного білого інтерфейсу користувача, який дизайнери використовували десятиліттями. У відповідь на те, що у нас збільшився час використання екрану, розробники виявили, що темні теми допомагають знизити навантаження на очі, особливо в умовах низького освітлення або в нічний час. Найменше навантаження на очі означало менше головного болю та кращий досвід роботи.

 

 

Але в темному режимі насправді немає нічого нового.

Розробка плакатів. 5 правил

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

 

Цей класичний темний вигляд вийшов з моди в 80-х на користь чорного тексту на білому тлі, що імітує чорнило на папері. Дизайн в темних тонах

Що таке відеореклама? Визначення, типи і тенденції

Протягом майже трьох десятиліть це було нормою, поки темний режим не повернувся в Windows Phone 7 в 2010 році. Після того, як Google підтвердив, що темний режим економить заряд батареї, в 2018 році вони додали цю функцію в свою ОС Android. Рік по тому Apple Потім був темний режим на iOS і iPadOS.

Плюси використання темного режиму. Дизайн в темних тонах

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

Знижує навантаження на очі

Ви не повинні відчувати свої очі. Але будь-хто, хто аналізує дані на екрані протягом тривалого часу, знає, що через деякий час ви починаєте це робити. Синдром комп'ютерного зору (CVS) включає біль в очах, нечіткість зору, двоїння в очах, головний біль, біль у шиї / спині та багато іншого. Коли справа доходить до діаграм та графіків, темний режим може допомогти буквально зменшити біль.

 

Збільшує видимість при слабкому освітленні

Якщо ви спите, і хтось увімкне яскраве світло, у вас заболить голова. За таким же принципом працюють люди, які працюють перед екраном комп'ютера пізно ввечері чи рано-вранці. Темний режим зменшує це яскраве світло та спрощує перегляд контенту в умовах низького освітлення.

Економить заряд батареї

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

Дає емоційний заряд

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

Запобігає СДВ. Дизайн в темних тонах

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

Мінуси використання темного режиму

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

Може знизити емоційний зв'язок. Дизайн в темних тонах

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

стискає простір

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

Кольори з низьким контрастом можуть бути складним для розуміння. Дизайн в темних тонах

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

Як використовувати темний режим в дизайні

Дизайн темного режиму може працювати будь-де. Від мобільних додатків до розумного годинника і телевізійних інтерфейсів — ця тенденція в дизайні може просунути ваш бренд вперед. Зробіть це правильно і темний режим може працювати як гангстери. Зробіть це неправильно, і ваш дизайн може негайно вимкнути користувачів. Ось кілька основних порад при розробці темного веб-сайту або інтерфейсу програми:

Коли використовувати темний режим. Дизайн в темних тонах

Підберіть кольори вашого бренду

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

 

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

Виділіть свою галузь. Дизайн в темних тонах

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

Стань мінімалістичним

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

викликати емоції

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

 

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

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

 

Кращі практики для дизайну темного режиму

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

1. Не йдіть занадто темно. Дизайн в темних тонах

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

 

2. Майте правильний контраст

Фон у темному режимі повинен бути досить темним, щоб відобразити білий текст. Пропозиція від Google Material Design – використовувати рівень контрастності тексту та фону не менше 15,8:1.

3. Знебарвлення кольору. Дизайн у темних тонах

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

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

4. Використовуйте правильні кольори «на»

Що це за колір? Той, який відображається поверх елементів та ключових поверхонь. Для написів зазвичай використовуються "ввімкнені" кольори. Колір інтерфейсу темного режиму за замовчуванням — чистий білий (#FFFFFF). Не використовуйте. #FFFFFF здається вібруючим під час перегляду на темному тлі. Вибирайте світло-сірий колір.

5. Не просто перевертайте. Дизайн в темних тонах

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

6. Пориньте глибше

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

 

7. Випробуйте і запропонуйте свободу. Дизайн в темних тонах

Протестуйте як темну, так і світлу версію вашого дизайну. Поекспериментуйте з кожним стилем та внесіть відповідні зміни на основі відгуків користувачів. Зрештою, переваги людей можуть бути непередбачуваними, тому не навішуйте собі на плечі користувачів. Дозвольте їм переключити свій дисплей зі світлого режиму на темний. Це дає користувачам можливість контролювати свій досвід та дозволяє їм почуватися більш індивідуальними.