Насколько сложным может быть использование цвета? У нас есть множество новых цветовых пространств и цветовых форматов. Нам также необходимо обеспечить доступность и учитывать дальтонизм. И тогда встает вопрос о цветовой организации — от дизайнерских фишек до цветовых палитр для темного режима, сезонных кампаний и сценариев “снежинки”.
Цветовые решения — дело непростое, особенно когда вам нужно добиться, чтобы цвет работал в нужном масштабе, исправить неисправную палитру или создать доступные палитры, которые подойдут всем. В этом информационном бюллетене мы рассмотрим, как это сделать.
С нашей стороны, на этой неделе мы запускаем тренинг по UX—моделированию Smart Interface Design Patterns 🍣 — практический тренинг по UX со сложными задачами UX — со сложными таблицами данных, фильтрами, навигацией и информационными панелями. Осталось всего несколько последних билетов!
Присоединяйтесь к программе Smashing и получите бесплатный билет на онлайн-конференцию по вашему выбору.
У нас постоянно растущее потрясающее сообщество пользователей, которые любят полезный контент, ценят приятные скидки и являются активной частью нашего замечательного веб-сообщества. Станьте участником Smashing до 7марта и получите бесплатный билет на онлайн-конференцию по вашему выбору. Нам не терпится увидеть вас снова, лично или онлайн, или в перерывах между электронными письмами и разговорами в Slack. Итак, давайте погрузимся в мир цветов!
— Виталий
1. Набор инструментов для раскрашивания
Потратив слишком много времени на поиск подходящих инструментов для работы с цветами, Паскаль Бюркле решил создать простой, но полезный набор инструментов, содержащий все, что может понадобиться для решения распространенных задач и проблем, связанных с цветом: hue.инструменты.
Он имеет открытый исходный код и предлагает множество опций, которые делают работу с цветами простой и увлекательной! Вы можете комбинировать и объединять несколько цветов, визуализируя промежуточные цветовые переходы, изменять и смешивать цвета, а также получать информацию о цвете, включая значение цвета, переведенное в разные цветовые пространства, значения CSS, гармоничные сочетания. А на случай, если вам понадобится немного вдохновения, в «маленьком помощнике» также есть ссылки на творческие проекты, в которых используется этот цвет. Замечательный маленький помощник, которого вы, возможно, захотите иметь при себе. (см)
2. Как исправить испорченную цветовую палитру
Слишком много вариантов, несоответствий, недоступных цветовых сочетаний и труднообъяснимых названий цветов — исправление неисправной цветовой палитры может показаться непосильной задачей. Итак, с чего мы начнем? Адам Уилсон делится бесценной информацией о том, как команда Skyscanner совершенствовала свою цветовую палитру, а также о процессе, названии, тестированиии исследованиях, направленных на достижение этой цели.
Новая цветовая палитра Skyscanner разделена на библиотеки брендов и продуктов. Они основаны на одних и тех же базовых ценностях, но используются по-разному, чтобы обеспечить как отличительные черты бренда, так и доступные интерфейсы. Весь процесс занял у команды Skyscanner год, в нем приняли участие десятки участников и заинтересованных сторон. В нем содержится множество практических рекомендаций, поэтому его обязательно нужно прочитать всем, кто собирается столкнуться с подобной проблемой. (см)
3. Доступные цветовые палитры
Цветовой контраст и доступность цветов могут быть сложной темой. Мы все знаем, насколько это важно, однако многие дизайнеры опасаются, что доступность цветов ограничит их цветовую палитру и, следовательно, их творческий потенциал. Конечно, доступность цветов означает, что вы, возможно, не сможете использовать именно те цвета, которые вы себе представляли, но это не значит, что вы не можете проявить творческийподход, как показывает Стефани Уолтер.
В своей статье о создании доступной и контрастной цветовой палитры Стефани представляет инструменты и краткие советы, которые помогут вам справиться с этой задачей. На практическом примере она шаг за шагом объясняет, как она проверяет контрастность, тестирует палитру и что делать, если сочетание цветов не соответствует требованиям. Практические советы, которые показывают, что создать доступную цветовую палитру не так сложно, как может показаться. (см)
источник: https://www.smashingmagazine.com/the-smashing-newsletter/
Устали от визуальных ошибок, которые проскальзывают мимо функциональных тестов? Познакомьтесь с пакетом визуального тестирования BrowserStack, включающим Percy, App Percy и Visual Scanner, который предназначен для выявления всех несоответствий до того, как они повлияют на пользователей. Визуальное тестирование с использованием искусственного интеллекта и полная интеграция CI/CD на более чем 20 000 реальных устройствах. Начните работу бесплатно!