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

В представленном логотипе основным цветом является один из оттенков фиолетового:

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

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

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

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

Используем выравнивание.

Дашборд выглядит более организованным и простым для восприятия, если на нем соблюдается принцип выравнивания.

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

Два предыдущих правилах несложно соблюдать в FineBI, поскольку инструмент позволяет:
+ создавать пустые пространства между элементами;
+ задавать общий межэлементный интервал в пределах всего дашборда (Component Gap);
+ регулировать отступ содержимого от границы каждого визуального элемента вплоть до пикселя (Component Padding);
+ размещать элементы без привязки к сетке дашборда (Overlap / Hover);
+ производить выравнивание отдельных элементов внутри одного компонента, в том числе для таблиц.

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

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