Explore Products: проверьте цветовую палитру на макетах приложений и дашбордов
Палитра, которая хорошо смотрится в виде плашек, всё равно может не сработать в плотном дашборде, сайдбаре чата или карточке маркетплейса. Explore Products показывает ваши цвета вживую внутри 13 макетов продуктов - дашборды для разработчиков, платежи, командный чат, маркетплейсы путешествий, видеоленты и другие. Так палитру можно оценить на том интерфейсе, который вы действительно делаете.
Три шаблона продуктов с палитрами по умолчанию. Нажмите на любой, чтобы открыть живое превью и попробовать свои цвета.
Что такое Explore Products
Explore Products - это режим «Продукты» на странице Explore. Каждый шаблон - оригинальный макет интерфейса в духе знакомой категории продуктов, который перекрашивается по вашей палитре.
- Вы видите основной цвет на настоящих кнопках, ссылках, сайдбарах и статусных бейджах, а не на плоском прямоугольнике.
- Вы сравниваете очень разные интерфейсы - тёмные и светлые, плотные и воздушные - с одной и той же палитрой.
- Вы получаете палитру шаблона как отправную точку, если своих цветов пока нет.
Зачем проверять палитру на макете продукта
Настоящие интерфейсы нагружают палитру так, как плашки никогда не смогут: мелкий текст на тонированных поверхностях, основной цвет одновременно в кнопках и в ссылках, рядом стоящие цвета успеха, предупреждения и ошибки, тёмные поверхности, из-за которых иначе читается каждый акцент. Макет показывает эти проблемы за несколько секунд.
Как посмотреть палитру на макете продукта
- Создайте или сгенерируйте палитру в панели цветов.
- Откройте Explore и выберите режим «Продукты».
- Выберите шаблон, ближайший к вашему продукту: дашборд для админки, чат для мессенджера, маркетплейс для сайта с объявлениями.
- Переключайтесь между палитрой по мотивам и «Вашей палитрой», чтобы увидеть, как ваши цвета меняют макет.
- Проверьте мобильную рамку и развёрнутый вид.
- Поделитесь ссылкой или откройте страницу шаблона с полным описанием его цветовой системы.
Шаблоны продуктов и что проверяет каждый
У каждого шаблона есть своя страница с описанием и живым превью. Выберите тот, который нагружает палитру так же, как будет нагружать ваш продукт.
| Шаблон | Категория | Что проверяет |
|---|---|---|
| Дашборд разработчика | Платформа для разработчиков - хостинг кода | Тёмный интерфейс с плотным текстом и зелёными состояниями успеха |
| Управление проектами | Платформа для разработчиков - управление задачами | Почти монохромный светлый интерфейс, где один основной цвет держит весь акцент |
| Облачный дашборд | Облачная платформа - хостинг и деплой | Чистый чёрно-белый интерфейс с одним акцентом - до какого минимума можно свести палитру |
| Дашборд платежей | Платёжная инфраструктура | Насыщенные данными финтех-экраны с тёмно-синим текстом, сильным основным и вторым акцентным цветом |
| Редактор документов | Продуктивность - заметки и документы | Чтение и редактирование длинных текстов на тёплом нейтральном фоне |
| Командный чат | Командный чат и коммуникация | Цветной сайдбар рядом с белой областью сообщений и зелёный индикатор онлайна |
| Платформа сообщества | Коммьюнити-чат и голосовая связь | Тёмный чат с красными упоминаниями и алертами рядом с основным цветом |
| Маркетплейс путешествий | Маркетплейс - путешествия и жильё | Карточки с упором на фото, где основной цвет не должен спорить с изображениями |
| Заказ еды | Ресторан быстрого питания | Два громких фирменных цвета и контрастный текст для быстрого сканирования |
| Платформа планирования | Планирование и бронирование | Выбранные и доступные состояния в минималистичном светлом интерфейсе |
| Редактор дизайна | Дизайн-инструмент - канвас для интерфейсов | Тёмный холст с основным цветом выделения и тёплым вторым акцентом |
| YouTube | Видеоплатформа - лента контента | Нейтральная лента, где один красный основной цвет и индикаторы эфира должны выделяться |
| Блог-платформа | Платформа для публикаций - статьи и лонгриды | Чтение текста, где единственный акцент - ссылки |
Шаблоны - оригинальные макеты по мотивам категорий продуктов. Их цвета - референсные палитры, а не копии официальных фирменных цветов каких-либо компаний.
Палитра по мотивам и Ваша палитра
Каждый шаблон можно смотреть с двумя источниками цветов:
- Палитра по мотивам - собственные фирменные цвета шаблона, чтобы увидеть, как макет задуман.
- Ваша палитра - ваша текущая палитра в том же макете, чтобы увидеть, как ведут себя ваши цвета.
На что смотреть
- Основной цвет на кнопках и ссылках - хорошо ли он виден и на светлых, и на тёмных поверхностях?
- Статусные цвета - различаются ли успех, предупреждение и ошибка с одного взгляда и отличаются ли от основного цвета?
- Мелкий текст на тонированных фонах: сайдбарах, бейджах, строках таблиц.
- Границы и разделители - остаются ли они заметными и не становятся ли тяжёлыми?
- Мобильная рамка - сохраняет ли макет иерархию на ширине телефона?
Читайте также: Explore Styles · Режим Elements · Как проверить палитру на реальном интерфейсе
Частые вопросы
Что такое Explore Products в PaletteDesk?
Explore Products - режим страницы Explore, который показывает вашу цветовую палитру вживую внутри макетов интерфейсов продуктов: дашбордов для разработчиков, платёжных дашбордов, командного чата, маркетплейсов и видеолент.
Шаблоны продуктов - это официальные дизайны брендов?
Нет. Это оригинальные макеты по мотивам знакомых категорий продуктов, а их цвета - референсные палитры, а не копии официальных фирменных цветов каких-либо компаний.
Как проверить цветовую палитру для дашборда?
Откройте шаблон в стиле дашборда в Explore Products, переключитесь на «Вашу палитру» и проверьте основной цвет на кнопках и ссылках, статусные цвета, мелкий текст на тонированных поверхностях и границы. Затем проверьте контраст в режиме Elements.
Можно ли посмотреть и светлые, и тёмные интерфейсы?
Да. Шаблоны охватывают и светлые, и тёмные интерфейсы, так что можно сравнить, как одна и та же палитра ведёт себя в каждом.
Explore Products бесплатен?
Просмотр шаблонов бесплатен. Применение своих цветов к части премиум-шаблонов требует Pro, такие шаблоны помечены в списке.
Готовы примерить палитру на макет продукта? Открыть Explore Products