Video is unavailable for watching
Show in Telegram
Ну сделай уже из своего дашбордика конфетку
Пост о моей ненависти к дашбордам и их дизайну. Я пытался несколько раз сделать из дашборда не только красивую, но и удобную систему. А эти две вещи иногда бывает очень сложно состыковать.
Но у меня получилось.
К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ.
Давайте я сначала расскажу как и что я делал, почему дашборд именно такой, а в конце дам вам собственный скилл для ИИдеального повторения такого же стиля (палитра, шрифты, расположение ваших компонентов, графики и тд.)
Больше всего меня раздражает и нервирует, когда на экране есть полно информации, но ты в душе не ебешь куда смотреть и твои глаза просто разбегаются по всем данным.
Я решил создать дашборд для аналитики рекламных компаний для наглядного примера (его вы можете увидеть в видео прикрепленным к посту).
Так вот, что же я делал для того, чтобы решить типичные проблемы + сделать привлекательный и не отвлекающий вид.
• Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами.
В моем случае это связи между рекламным каналом, кампанией и результатом. Поэтому большую часть экрана занимает карта, по которой можно пройти эту цепочку.
Выбираешь кампанию, ее связи выделяются, а снизу уже появляются все подробности. То есть я КОНКРЕТНО могу понять, что это за цифры и за что они ОТВЕЧАЮТ.
• Второе - разобрался с цветами. В ранних версиях при разработке дизайна у меня было куча проблем и мне самому не нравилась ни одна палитра из тех что пробовал. Сначала я хотел взять акцент на бежевом и его оттенков и глубине, после переключился на зеленый, но все это выглядело дешево и ужасно.
В итоге решил трайнуть черный + графитовый и мне безумно сильно зашло. Потом начал слегка играться: рабочую область сделал темнее, плашки чуть светлее, добавил тонкие границы и небольшую глубину. А свечение оставил только для выбранных элементов.
• Третье - циферки и шрифт.
У меня были плашки, которые выглядели просто ужасно из за их содержания внутри и их размера. Где то слишком мало места, а где то наоборот полно.
Поэтому я отдельно подгонял размеры самих блоков, отступы и соотношения текста с цифрами.
Для цифр взял Instrument Sans с табличными знаками (цифры занимают одинаковую ширину и их удобнее сравнивать между собой). Плюс следил, чтобы сумма и знак валюты не разъезжались по разным строкам.
• И финал - кнопки и взаимодействия с ними.
Изначально кнопки мне тоже вообще не нравились. Переделал скругления, иконки, внутренние отступы и состояния при наведении.
Потом доделал список, чтобы при нажатии все было хорошо.
Карту я тоже сделал интерактивной: можно приблизить нужную область и рассмотреть связи подробнее.
Ну и теперь обещанный скилл.
Все эти решения я собрал в Graphite Dashboard Design: палитру, шрифты, поверхности, отступы, оформление компонентов и правила проверки.
Он помогает ИИ создавать дашборды в таком же стиле, но под ВАШУ задачу. Копировать мою карту связей не обязательно. Я уже попробовал его на аналитике видеороликов и расходах компании.
В репозитории есть инструкция по установке и примеры, которые можно открыть и потыкать.
Буду безумно рад вашему фидбеку и тестам! Еще увидимся.
Пост о моей ненависти к дашбордам и их дизайну. Я пытался несколько раз сделать из дашборда не только красивую, но и удобную систему. А эти две вещи иногда бывает очень сложно состыковать.
Но у меня получилось.
К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ.
Давайте я сначала расскажу как и что я делал, почему дашборд именно такой, а в конце дам вам собственный скилл для ИИдеального повторения такого же стиля (палитра, шрифты, расположение ваших компонентов, графики и тд.)
Больше всего меня раздражает и нервирует, когда на экране есть полно информации, но ты в душе не ебешь куда смотреть и твои глаза просто разбегаются по всем данным.
Я решил создать дашборд для аналитики рекламных компаний для наглядного примера (его вы можете увидеть в видео прикрепленным к посту).
Так вот, что же я делал для того, чтобы решить типичные проблемы + сделать привлекательный и не отвлекающий вид.
• Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами.
В моем случае это связи между рекламным каналом, кампанией и результатом. Поэтому большую часть экрана занимает карта, по которой можно пройти эту цепочку.
Выбираешь кампанию, ее связи выделяются, а снизу уже появляются все подробности. То есть я КОНКРЕТНО могу понять, что это за цифры и за что они ОТВЕЧАЮТ.
• Второе - разобрался с цветами. В ранних версиях при разработке дизайна у меня было куча проблем и мне самому не нравилась ни одна палитра из тех что пробовал. Сначала я хотел взять акцент на бежевом и его оттенков и глубине, после переключился на зеленый, но все это выглядело дешево и ужасно.
В итоге решил трайнуть черный + графитовый и мне безумно сильно зашло. Потом начал слегка играться: рабочую область сделал темнее, плашки чуть светлее, добавил тонкие границы и небольшую глубину. А свечение оставил только для выбранных элементов.
• Третье - циферки и шрифт.
У меня были плашки, которые выглядели просто ужасно из за их содержания внутри и их размера. Где то слишком мало места, а где то наоборот полно.
Поэтому я отдельно подгонял размеры самих блоков, отступы и соотношения текста с цифрами.
Для цифр взял Instrument Sans с табличными знаками (цифры занимают одинаковую ширину и их удобнее сравнивать между собой). Плюс следил, чтобы сумма и знак валюты не разъезжались по разным строкам.
• И финал - кнопки и взаимодействия с ними.
Изначально кнопки мне тоже вообще не нравились. Переделал скругления, иконки, внутренние отступы и состояния при наведении.
Потом доделал список, чтобы при нажатии все было хорошо.
Карту я тоже сделал интерактивной: можно приблизить нужную область и рассмотреть связи подробнее.
Ну и теперь обещанный скилл.
Все эти решения я собрал в Graphite Dashboard Design: палитру, шрифты, поверхности, отступы, оформление компонентов и правила проверки.
Он помогает ИИ создавать дашборды в таком же стиле, но под ВАШУ задачу. Копировать мою карту связей не обязательно. Я уже попробовал его на аналитике видеороликов и расходах компании.
В репозитории есть инструкция по установке и примеры, которые можно открыть и потыкать.
Буду безумно рад вашему фидбеку и тестам! Еще увидимся.