Как правильно оформить темный режим

Темные темы сейчас везде .

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

На протяжении 2020 года бесчисленное множество ведущих брендов дебютировали со своей собственной версией темной темы. У Google есть решение для вашего Диска, а Apple и Android встроили производительность темных тем прямо в свои операционные системы.

Если вы еще не научились максимально эффективно использовать темный режим, возможно, вы упускаете прекрасную возможность выделить свои дизайнерские навыки и привлечь больше клиентов в будущем.

Почему темный режим?

Прежде чем мы слишком глубоко погрузимся в возможности создания вашей собственной темной темы, давайте разберемся, что такое темный режим и почему он так эффективен.

В конечном итоге темные темы создаются для уменьшения яркости, излучаемой всем, от вашего настольного компьютера и ноутбука до смартфона и умных часов. Темные темы помогают улучшить визуальную эргономику дизайна за счет снижения утомляемости глаз, регулировки яркости в соответствии с текущими условиями освещения и т. Д. Кроме того, многие предложения темного режима также отлично подходят для экономии заряда батареи.

Вот некоторые из основных преимуществ добавления темных тем в ваше портфолио.

• Улучшение взаимодействия с пользователем: Упор на взаимодействие с пользователем — одна из важнейших тенденций цифровой эпохи. Вы должны быть готовы доставлять невероятные впечатления каждому, кто посещает ваш сайт, если вы хотите выделиться сегодня. Темный режим снижает нагрузку на глаза и снижает расход заряда аккумулятора. Это помогает удерживать клиентов на веб-сайте дольше.
• Инновации и ультрасовременная привлекательность: Большинство компаний хотят доказать, что они могут оставаться на переднем крае своей отрасли. Возможность предлагать версию темы или внешнего вида веб-сайта в темном режиме может помочь вашим клиентам выделиться из толпы. По мере того как среда становится все более ориентированной на мобильные устройства, все больше компаний будут искать дизайнеров, которые могут обеспечить лучший мобильный опыт.
• Поддержка универсального дизайна: Темный режим подходит не только людям, чувствительным к свету в ночное время. Это решение может быть более удобным для пользователей с ослабленным зрением, которым в противном случае пришлось бы бороться с усталостью глаз при посещении ваших веб-сайтов. Если вы хотите, чтобы ваш контент был более инклюзивным для более широкого круга зрителей, то научитесь разрабатывать дизайн для темного режима — хороший способ начать.

Лучшие практики при проектировании для темного режима

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

Вот несколько полезных советов, которые помогут вам двигаться в правильном направлении.

1. Экспериментируйте с цветами

Большой проблемой для многих веб-дизайнеров, когда дело доходит до разработки решения для темного режима, является то, что они слишком увлекаются такими вещами, как чистый белый текст на чисто черном фоне. Однако через некоторое время этот высококонтрастный вариант может немного измениться.

Часто гораздо проще использовать темно-серый в качестве основного цвета поверхности вместо настоящего черного. Кроме того, вместо использования ярко-белого цвета подумайте о слегка не совсем белых альтернативах, которые будут теплее для глаз.

Поэкспериментируйте с поверхностями и сочетаниями цветов, которые вряд ли вызовут чрезмерную нагрузку на глаза. Темно-серая основа часто предлагает более широкий диапазон глубины, потому что вы можете продемонстрировать тени на сером.

Кроме того, когда вы экспериментируете с цветами, помните, что насыщенные цвета часто болезненно вибрируют на очень темных поверхностях, что затрудняет их чтение. Обесцвечивание цветов поможет уменьшить контраст и сделать ваши веб-сайты более привлекательными.

Более светлые тона в диапазоне 200–50 лучше читаются на темных темах. Однако вы всегда можете поэкспериментировать со своим выбором. Google Material Design рекомендует использовать контраст между фоном и текстом около 15: 8: 1.

2. Рассмотрим эмоциональное воздействие

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

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

Например, подумайте о зеленом цвете. На светлом фоне передает природу и даже финансовое благополучие. Однако на темном фоне тот же зеленый цвет может показаться чем-то ядовитым, токсичным или даже болезненным. Важно подумать о том, какие впечатления получат конечные пользователи, когда они зайдут на ваш сайт.

3. Предоставьте пользователям свободу выбора

Одна из самых больших ошибок, которую вы можете сделать, когда начинаете проектировать для темного режима, — это думать, что вы должны полностью сосредоточиться на своих темных темах и ни на чем другом. Это ставит вас перед проблемой, если вы взаимодействуете с пользователями, которые хотят получить лучшее из обоих миров. Если вы разрабатываете, в частности, приложения, вам понадобятся веб-страницы, которые могут естественным образом переключаться между светлыми и темными темами.

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

Несмотря на то, что темный режим должен предлагать конечным пользователям разные возможности, он все равно должен создавать впечатление, будто они просматривают один и тот же веб-сайт. Это означает, что вам нужно будет поэкспериментировать с наиболее естественным сочетанием светлого и темного режимов.

4. Помните основы

Помните, хотя три приведенных выше совета помогут вам встать на правильный путь разработки темного режима, вам также необходимо учитывать возможности и ограничения платформ, для которых вы разрабатываете. Темный режим, который вы можете предоставить для веб-сайтов Google Chrome, будет сильно отличаться от того, что вы можете создать для чего-то, что работает на iOS.

Изучение документации, предоставляемой системой, для которой вы проектируете, поможет вам разработать что-то с глубоким пониманием того, что на самом деле возможно.

Другие важные советы по дизайну темного режима:

• Сосредоточьтесь на своем содержании. Убедитесь, что ваше содержание выделяется на странице, но не является чрезмерным.
• Проверьте свой дизайн: и в светлых, и в темных условиях вам нужно убедиться, что все работает так, как должно быть.
• Добавьте яркости в свои интерфейсы. Яркость помогает улучшить контраст между фоном и передним планом.
• Использовать семантические цвета: семантические цвета автоматически адаптируются к текущему виду веб-сайта. Жестко заданные значения цвета, которые не адаптируются, могут показаться более агрессивными.
• Тонирование рабочего стола. Попробуйте поэкспериментировать с такими вещами, как прозрачность и фильтры, чтобы придать вашим веб-сайтам и приложениям немного более теплый оттенок — идеально для ночного просмотра
• Значки: при необходимости используйте отдельные глифы и значки для темного и светлого режимов.

Готовы к разработке для темного режима?

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

Самое важное, что нужно помнить, — это то, что все на вашем веб-сайте или в приложении должно выглядеть так же красиво, как и в светлом режиме. Просто добавить динамический черный фон, когда люди хотят переключить настройки в приложении, недостаточно. Вам необходимо углубиться в свой дизайн и изучить, как разные шрифты, цвета и изображения работают вместе.