Ну сделай уже из своего дашбордика конфетку

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

Но у меня получилось.

К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ.

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

Больше всего меня раздражает и нервирует, когда на экране есть полно информации, но ты в душе не ебешь куда смотреть и твои глаза просто разбегаются по всем данным.

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

Так вот, что же я делал для того, чтобы решить типичные проблемы + сделать привлекательный и не отвлекающий вид.

• Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами.

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

Выбираешь кампанию, ее связи выделяются, а снизу уже появляются все подробности. То есть я КОНКРЕТНО могу понять, что это за цифры и за что они ОТВЕЧАЮТ.

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

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

• Третье - циферки и шрифт.

У меня были плашки, которые выглядели просто ужасно из за их содержания внутри и их размера. Где то слишком мало места, а где то наоборот полно.

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

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

• И финал - кнопки и взаимодействия с ними.

Изначально кнопки мне тоже вообще не нравились. Переделал скругления, иконки, внутренние отступы и состояния при наведении.

Потом доделал список, чтобы при нажатии все было хорошо.

Карту я тоже сделал интерактивной: можно приблизить нужную область и рассмотреть связи подробнее.

Ну и теперь обещанный скилл.

Все эти решения я собрал в Graphite Dashboard Design: палитру, шрифты, поверхности, отступы, оформление компонентов и правила проверки.

Он помогает ИИ создавать дашборды в таком же стиле, но под ВАШУ задачу. Копировать мою карту связей не обязательно. Я уже попробовал его на аналитике видеороликов и расходах компании.

В репозитории есть инструкция по установке и примеры, которые можно открыть и потыкать.

Буду безумно рад вашему фидбеку и тестам! Еще увидимся.