Книга «Дизайн маркетплейса» . Гамма и стили
Получив от менеджеров и аналитиков необходимые данные, вы откроете Фигму и начнёте привычно рисовать дизайн. Полноценная дизайн-система у вас со временем будет своя, но основы важно заложить сразу. Они простые и универсальные
Цветовая гамма
Здесь важно понимать две вещи:
1. Нельзя бесконтрольно плодить цвета и оттенки. Гамма должна содержать минимально необходимое количество цветов.
2. Нельзя называть цвета black, white, red и тому подобные.
Есть несколько теорий о том, как правильно формировать цветовую палитру проекта. Некоторые рекомендуют вводить черный и белый цвета, к ним ещё десяток оттенков и дополнительных цветов. Некоторые используют готовые палитры от Google Material и тому подобные. Оба этих варианта слишком громоздкие и неудобные.
Я разработал для себя другую систему. Её суть — называть цвета по применению.
Контекст применения
Классически нам точно понадобятся цвета для фона, текста, какой-нибудь акцентный цвет для кнопок и ссылок, рамки. Для маркетплейса я добавил ещё пару цветов. В сумме получается 12 штук.
- Primary – основной цветовой акцент фирменного стиля проекта. Часто используется для ссылок и кнопок. Иногда для иконок.
- Secondary – второстепенный цветовой акцент фирменного стиля. Чаще всего используется для декора, мелких акцентов и иконок.
- Surface – подложка/поверхность. То, на чём обычно располагается текст.
- OnSurface – соответственно, цвет текста на подложке.
- Background – цвет фона вне подложек.
- Fields – цвет фона полей.
- FieldsInactive – цвет фона неактивных полей.
- Borders – цвет рамок полей и вообще всех рамок и разделительных линий.
- Active – цвет выделения активного элемента. Чаще всего этим цветом выделяется выбранная строка в таблице.
- Error – цвет ошибки. Обычно в оттенках красного.
- Success – цвет положительного результата.
- Inactive – цвет неактивного текста. Когда элемент какое-то поле не доступно для редактирования.
90% проектов укладывается в эти рамки без изменений.
Иногда я добавляю оттенки к основным цветам с признаком Variant. Например, когда цвет Primary выглядит плохо на тексте или иконках.
И никогда не добавляю цвета Blue, Red, Black и т.д. Потом просто невозможно понять, где этот цвет используется.
Стили текста
Здесь также есть множество вариантов и схем. Но они снова пытаются быть универсальными. А в итоге становятся сложными и громоздкими.
Работа со стилями текста в Фигме, прямо скажем, не самая лучшая. Перечёркивание и толщину приходится зашивать в стиль и это очень не удобно.
Из-за этого я выработал для себя следующую схему.
Сначала я завожу самые основные стили. Аналогично, привязываю к применению:
- Heading – стили для заголовков. На самом деле, в этот стиль я убираю все жирные начертания.
- Body – просто текст.
- XL, L, M, S, XS – затем я добавляю признаки размера к заголовкам и тексту.
Заголовки и текст в сочетании с размерами позволяют закрыть практически все варианты текстов на страницах маркетплейса. И запоминать просто: весь жирный текст – заголовки, остальное – просто текст.
Использование букв в размерах вместо цифр кегля делает схему полностью универсальной. В том числе и для мобильных приложений.
Затем, из-за тех самых особенностей Фигмы, я добавляю специфические, но “говорящие” стили:
- Price – шрифт для цены. Можно было бы использовать Heading. Но я предпочитаю отдельный стиль.
- Currency – иногда нужен отдельный шрифт для валюты. Актуально, когда на маркетплейсе есть мультивалютность.
- Old Price – перечёкрнутая цена до скидки.
- Old Currency – перечёркнутая валюта до скидки.
- Badges – текст для бейджей “новинка”, “рапродажа” и т.п. Шрифт здесь обычно самый мелкий. И больше нигде не используется.
Есть ещё одна особенность. Размеры Price и Old Price отличаются в каталоге и в карточке товара.
Поэтому к ним тоже можно добавить признаки L и S.
Не забываем про мобильное приложение. Здесь имеет смысл добавить кое какие дополнительные стили:
Bottom Nav – текст для нижней навигации. Особо мелкий текст для подписей к иконкам нижней навигации.
Badges – тоже бывают в мобильной версии сильно мельче, чем на десктопе.
Ну и в конце концов, стили текстов для удобства можно собрать в группы Desktop и Mobile.
UI kit
Я намеренно не буду касаться построения UI kit в этой книге.
Во-первых, вы и так уже 100% пользуетесь компонентами и прекрасно понимаете их пользу и применение.
Во-вторых, все киты индивидуальны, у вас всё равно будет вырисовываться свой собственный.
Дам лишь пару советов
1. Я держу кит на отдельной странице. Пришлось пожертвовать интерактивностью, зато не запутаюсь где что лежит.
2. Не забывайте рисовать ховер-состояния для элементов.
3. Летом 2023 года в Фигму добавили переменные, состояния и прочий сложный интерактив. Но помните, главное — скорость разработки.
.
Я занимаюсь UX-аналитикой и UI-дизайном онлайн-сервисов, CRM/ERP, кабинетов, дашбордов и мобильных приложений.
Работы и статьи — смотри на сайте
Поболтать, вдохновиться AI — в уютном ТГ форуме
а как решаешь, если один и тот же цвет в нескольких категориях? например, онсурфейс белый текст на тёмном фоне блока, белый как background и белый (не праймари при этом, кстати в какую его категорию тогда?) как цвет иконки на тёмном фоне?
Белый фон он как раз идёт как Surface в большинстве случаев. Но могут быть белые поля, например. Поэтому мне пришлось отдельно добавить стиль для Fields. Его использую для всех типов полей.
Вообще, стараюсь при разработке новых блоков отталкиваться от стилей. То есть какое-нибудь уведомление я не делаю контрастным (типа темный фон и белый текст). А делаю так: цвета Error или Success с прозрачностью 50% и поверх текст OnSurface. С прозрачностью разработчикам как раз проще, чем с новыми цветами.
Приходится всё оптимизировать ещё и из-за разработчиков. Внедрять новые стили в большой маркетплейс очень сложно. Плюс, на мобилке используются те же самые стили. Поэтому всё везде завязано ))
Хоть я и не дизайнер ,но интересно ознакомиться со всеми нюансами работы дизайнера
Спасибо!
В этой главе на самом деле очень интересно кто как с библиотеками работает. Причём осмысленно, с оптимизацией процесса )