Учитывая, что дашборд - это наполовину продукт дизайна, не стоит отмахиваться от понимания цветов и форм, как от ненужного знания “это только для гуманитариев!”. Материалов по темам дизайна достаточно, и умение сделать не только полезный, но и эстетически приятный продукт, всегда огромный плюс для аналитика.
Статья под пэйволом, так что прикладываю, как всегда, краткий перевод и полезные ссылки.
Система сеток
Каждая страница начинается с чистого листа. Подобно процессу решения любой проблемы, добавление ограничений и руководств помогает облегчить структурированное решение. В дизайне именно здесь играет роль сеточная система; это помогает выровнять элементы в соответствии с упорядоченными столбцами и строками для достижения баланса и согласованности на странице.
В приложениях большинство популярных фреймворков используют базовую сеточную систему из 12 столбцов одинаковой ширины; это позволяет дизайнерам разделить данную область на половинки, трети, четверти или шестые. Это полезно для создания согласованности, выравнивания и баланса, поскольку такая система обеспечивает выравнивание нижней части каждой строки текста (ее базовой линии) по вертикали.
После того, когда вы установили свою сетку, можно быстро и легко определить размещение контента, который вы хотите разместить на пустом листе. Различные компоненты вашего проекта будут занимать разные позиции в сетке в зависимости от их иерархии и важности.
Цвет
Четко определенная цветовая палитра является ключом к гармонии в каждом визуальном опыте. Он привлекает зрителя, вызывает преднамеренные эмоции и доставляет чувство порядка, если подобран вдумчиво. В конечном счете, это инструмент, предназначенный для эффективной передачи психологического сообщения или тона своей аудитории.
Большинство палитр имеют от трех до шести цветов в зависимости от темы. Хорошим эмпирическим правилом было бы использовать правило 60% / 30% / 10% для ваших доминирующих, вторичных и акцентных цветов соответственно. Эта формула работает, потому что она создает баланс между различными оттенками и является известной техникой в дизайне интерьера.
Вот несколько цифровых инструментов, которые помогут вам создать свои собственные цветовые палитры:
- Colormind, генератор цветовой палитры с питанием от AI
- Color Wheel, генератор цветовой палитры Adobe
- Color Hunt, открытая платформа для подобранных цветовых палитр
- ColorHexa, цветная энциклопедия
Типография
Выбор шрифтов - это искусство, но есть соглашения, которые могут помочь вам в этом процессе. Во-первых, начните со шрифтов, которые имеют четкие основы: разборчивость, читаемость, чистое расстояние и соответствие контексту, для которого вы разрабатываете. Есть много забавных и дурацких шрифтов, но это не значит, что вы должны их использовать.
Затем определите, сколько шрифтов вам понадобится для вашего дизайна; как правило, это будет варьироваться от одного до трех вариантов. Если вы используете только один вид шрифта - у вас уже все хорошо. Однако, если вы смешиваете более двух вместе, вот тут дизайнерские навыки имеют решающее значение.
После того, как вы определили свои шрифты, следующим шагом будет построение модульной шкалы типов.
Итак, выбрав начальный размер шрифта, который вы считаете нужным, вы можете использовать соотношение для получения резонансных чисел для других стилей шрифтов в ваших проектах. Я бы рекомендовал использовать «Золотое сечение» (1: 1.618) или «Совершенную четверть» (2: 3) из-за их репутации в создании эстетически привлекательных работ греческих и ренессансных математиков, архитекторов и музыкантов.
Популярные инструменты про шкалы:
Для вдохновения и наглядных примеров рекомендую посмотреть дашборды в моей галерее.