Это промо-статья, посвященная руководству по цвету для UX/UI дизайнеров. Этот материал является частью большого комплекса гайдов, которые помогут новичкам освоить новую для себя тему, а опытным дизайнерам — открыть для себя тему цвета более детально. Без воды и лирических отступлений.
Мой подход к изучению дизайна базируется на том, что ученик сначала должен получить базовые знания графического редактора, в нашем случае - это Figma. Следующим шагом является освоение теории визуального дизайна пользовательского интерфейса (UI). И только после этого - переход к более сложным темам по UX дизайну.
Сейчас мы остановимся на втором шаге - UI дизайне и продолжим изучать его, разбираясь в теме цветов. Первым шагом было освоение типографики. Гайды по этой теме вы можете найти здесь.
Цвет влияет на эмоциональное состояние пользователей, создает атмосферу и впечатление от продукта. Правильно подобранный цвет может облегчить навигацию, улучшить удобство использования и даже повлиять на конверсию.
Предлагаю вам больше не работать с цветами, выбирая их на глаз или случайным образом. Также не ограничивайте себя рамками клиентских цветов. Такой подход не только улучшает взаимодействие с продуктом, но и повышает его доступность для всех пользователей, делая дизайн инклюзивным и пригодным для широкой аудитории.
Итак, внутри гайда вы найдете следующее:
- Основные понятия колористики и использование цветов в UI дизайне;
- Типы цветовых моделей: разбираемся в чем разница и когда какую использовать;
- Цветовое колесо Иттена: как с ним работать на реальных примерах;
- Психология цветов: об эмоциональной нагрузке и использовании в UI дизайне;
- Выбор цветов для проекта в зависимости от его масштабности. Как избежать ошибок;
- Как самостоятельно создать цветовую палитру проекта? Строим иерархию пошагово, имея только основной цвет;
- Правила и лайфхаки: работаем с цветом для текста, фона и теней;
- Accessibility или проверка продукта на доступность. В чем суть и как с этим работать;
- Палитры для вдохновения. Веб-сайты. 10 детализированных палитр для вашего интерфейса с примером реализации;
- Сетчатые градиенты (mesh). Туториал по созданию mesh-градиента в Figma;
- Подарок – 36 стильных векторных градиентов в отдельном файле;
- Ресурсы: цветовые палитры, книги и плагины для Figma.
Думаю, вы неоднократно замечали, что самостоятельный подбор цветов не приносит такого же результата, как у более опытных дизайнеров? Дело не в какой-то магии, хотя, конечно, есть талантливые люди, способные на глаз подобрать идеальные комбинации. Но большинство (в том числе и я) не из этой категории людей:) Мы — люди ремесла и должны оттачивать свои навыки, чтобы улучшить результат.
Поэтому я предлагаю вам ознакомиться и взять себе на вооружение подборку приемов, которые улучшат ваш дизайн и раскроют секрет, почему у дизайнеров с опытом так хорошо получается даже без использования референсов.
В гайде вы найдете подборки детализированных готовых палитр, которые можно использовать в своих проектах. Для проектирования дизайна интерфейсов я подобрала 10 разнообразных цветовых сочетаний и показала реальный пример, как с ними нужно работать.
Чтобы придать этому материалу еще больше ценности, я подготовила для вас подарок в виде 36 трендовых векторных градиентов. Это не просто фоны из двух точек, а полноценные интересные mesh-градиенты.
Да, гайд создала я, опираясь на свои знания, проверенные источники и опыт, который я получила в процессе менторства моих учеников. Поэтому понимаю как о потребностях новичков в освоении материала, так и в том, какая именно информация понадобится в работе дизайнеру.
- Новичкам, которые хотят начать изучение UX/UI дизайна;
- Уже работающим дизайнерам, у которых есть пробелы в знаниях темы цвета;
- Всем дизайнерам, которые хотят применять системный подход к подбору цветов в своих проектах и узнать, как строить цветовую иерархию;
- Тем, кого интересует углубленная информация о том, как из одного цвета создать целую палитру;
- Дизайнерам, которые хотят иметь под рукой готовую информацию по теме цветов в UI-дизайне без воды;
- Людям других профессий, которые часто имеют дело с оформлением презентаций или рекламных креативов и интересуются психологией цвета.
Цена гайда - 399 грн. Его можно купить тремя способами:
-
С помощью кнопки «Купить». Вас перенаправит на страницу безналичной оплаты через безопасный сервис LiqPay. Для использования необходимы банковские карты Visa / Mastercard. Нажимая «Купить», вы соглашаетесь с условиями Публичной оферты.
-
Перевод на безналичный счет по Украине. Чтобы получить реквизиты для перевода, напишите в Instagram @frusia.pro или Telegram @frusia.
-
Перевод на счет PayPal. Для международных платежей. Чтобы получить реквизиты для перевода, напишите нам в Instagram @frusia.pro или Telegram @frusia.
После подтверждения оплаты, вы сразу получите ссылку на руководство. Приятного обучения :)