Дизайн система в DSX. Часть 1, как мы начинали

Каждый UX-дизайнер рано или поздно встречает ЕГО: огромный интерфейс, бессистемно (или не очень системно) развивавшийся много лет. Там можно найти самый первый пиксель на свете, завернутую рыбу или кости динозавра.

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

В моей практике был такой сайт, над которым сначала долго работали разработчики, а потом — дизайн-агентство.

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

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

Что делать с таким сайтом?

Создать дизайн-систему :)

Спасибо, кэп! Но с чего начать, если у нас сжатые сроки, и дизайн-система нужна вчера?

Мы решили причесать:

1. Цвета. Тут из интересного — как именно мы разобрали по полочкам текущие цвета в интерфейсе и макетах. Как определили, что порезать и убрать, а что оставить, и по каким правилам применять (и как я помог дизайнеру, который до этого не делал дизайн-системы).

2. Микроинтеракшны и валидации для инпутов. Текстовое (а точнее, цифровое) поле — один из наших главных контролов (ведь мы криптобиржа). Пользователи работают с ним дестяки раз в день. И у этого "простого" элемента — десятки вопросов и десятки кейсов, которые нужно решить, чтобы работать стало удобно.

3. Стили текста и компоненты. Об этом мы поговорим в следующих статьях (или никогда), чтобы не раздувать этот лонгрид уж совсем в бесконечность :)

От 50 оттенков серого - к удобной библиотеке

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

Приходя в такой проект — сложно подхватить и пилить фичи, развивать и улучшать продукт.

Пробуем в лоб

Я попросил дизайнера разобраться с цветами, и решить, какие выпилить, а какие использовать дальше (и по каким правилам).

Дизайнер ~~умер~~ вернулся назад и сказал, что не получается. В такой ситуации нужно дать дизайнеру опору. Сузить задачу, помочь разделить ее на части, дать фидбек, задать наводящие вопросы, дать какой-то фреймворк и пр.

Я стал ходить по интерфейсам и искать, по какому принципу можно их разделить. Дальше рассуждение развивалось примерно так:

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

Цветовые схемы

В "уже продукте" нашлось несколько сложившихся типов интерфейсов:

"простые-развлекательные"
обычные/сложные
трейдинговые

Эти интерфейсы уже были по-разному покрашены.

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

Обычные/сложные интерфейсы имели белые подложки, часто представляли собой многошаговые формы, таблицы, страницы настроек, списки балансов и пр.

Трейдинговые интерефейсы — ну биржа и биржа :) Графики, таблицы, форма покупки, очень много данных, сложных сценариев, много эргономики.

Раскладываем дальше. Цвет = функция

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

Как дальше делить цвета?

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

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

Звучит сложно, на схеме получилось просто:

Я отдал эту схему дизайнеру и она смогла разобрать по полочкам все цвета в приложении.

Вот так она работала над этим:

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

В итоге:

Мы убрали лишние "оттенки серого"
Получили хороший набор, который позволил не придумывать новые цвета, а брать из библиотеки (думаю, никому в 2019 не надо объяснять, как работает библиотека цветов? Поправили в библиотеке цвет — он поменялся на всех 100500 элементах дизайна, в которых был применен)
Разработчики поправили код, убрали баги в стиле "один компонент на разных страницах покрашен по-разному" и выкинули много кода.

Вот такой набор цветовых схем у нас получился:

Dark trade/light trade — это цветовые схемы для дневной и ночной темы трейдинговых страниц.
Day — виззарды, сложные страницы с контентом, настройками, репортами, счетами и пр.
Common — распространенные цвета, которые могут встретиться в любых интерфейсах
Fay — легкие/развлекательные странички, попапы и пр.
Так потом добавились "ховеры" и "редкие"

Работает?

С таким набором мы прожили почти год, и сейчас доросли до следующей реинкарнации.

Делается адекватный брендинг, где всё-всё расписывается от самых основ, прорабатывается коммуникация бренда, позиционирование и пр.

Естетственно, переосмысляется и дизайн-система.

Мы (уже руками Clay, агентства из Сан-Франциско) сильно упрощаем схему, выкидываем кучу цветов и делаем стиль дизайна не абстрактно красивым, а растущим из брендинга.

Это мы сейчас (к��нец 2019) и делаем, и сможем рассказать через пару месяцев :)

Продолжение следует

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

Хотите уметь так же?

Решать задачи при помощи схем я учу на курсе по схемам. А любым другим продуктово-дизайнерским вещам учу в личном менторинге, записаться можно в личке в телеграм: @serebrennikov_i