class="p1">Чтобы дашборд соответствовал брендбуку, применить к нему корпоративную тему недостаточно. Новые цвета могут снизить контрастность, новые шрифты – исказить макет.
Для профессионального результата проверяйте свою работу по пунктам чек-листа из главы 4.5. И не забудьте про элементы фирменного стиля.
■ Цвет фона правильно распределился по всей панели: белых пятен между диаграммами нет.
■ Стандартный шрифт заголовков и надписей (в том числе в карточках) изменился на фирменный.
■ Размер нового шрифта оптимален для дашборда: подписи расположены горизонтально и легко читаются.
■ Между элементами диаграмм, которые нужно сравнивать, достаточно контраста, и они не сливаются.
■ Карточки KPI не потерялись на общем фоне из-за использованной темы: они хорошо заметны.
■ Фон интерактивных срезов также оформлен в нужных цветах: на нем не осталось белых пятен.
■ На дашборде есть все необходимые элементы корпоративного стиля, как например логотип.
5.3 Создаем дашборд в темной теме
Темный стиль выглядит оригинальнее и дороже как в презентациях, так и на дашбордах. Но чтобы сделать его таким, нужно приложить больше усилий: пройтись по всем элементам, убедиться, что они хорошо заметны и достаточно контрастны. Где-то для этого придется добавить контрастности, а где-то убрать.
Некоторые нюансы не уложить в чек-лист – они потребуют опыта и насмотренности. Именно поэтому я рекомендую использовать светлую тему – с ней объективно проще.
Если вам приходится вписывать свою работу в специфический фирменный стиль, то эта глава для вас. Если нет, можно закончить с практикой и переходить к правилам визуализации.
Дашборд в темной теме рекомендую создавать из копии светлой. Скопируйте лист с фирменной версией и дайте ему понятное название. Так вы сохраните и светлый и темный дашборды в корпоративном стиле.
Тема, которую мы брали в PowerPoint, уже содержит в палитре цвета как для светлого, так и для темного варианта. Поэтому используем новую заливку – самый темный оттенок коричневого. И проверим, что получилось хорошо, а что нужно исправить.
● Логотип стал неразличимым на темном фоне.
● Черный шрифт заголовков также стал невидимым.
● Синие карточки KPI не вписываются в новое оформление.
● Фон диаграмм остался светлым – это не соответствует темной теме.
● Оформление срезов также не соответствует темной теме дашборда.
И это еще не все недостатки. Цвета столбцов и линий, а также метки данных и цвет шрифта подписей остались теми же, что в светлой теме. Но мы делаем темный дашборд: как только изменим фон диаграмм, потеряются и они.
Заголовок дашборда и логотип
Лист с копией светлого фирменного дашборда я назвал «Чистовик темный» – на нем и буду проводить преобразование.
Первое, что привлекает внимание, – это померкший логотип. Из-за нового фона он стал неразличимым. Мы возьмем вариант из темной темы в презентации PowerPoint, так же как делали это в предыдущей главе.
Также мы сразу видим, что название «Анализ фонда оплаты труда» на темном фоне потерялось. Выделяем ячейку с заголовком дашборда и на главной вкладке меню под кнопкой «Цвет шрифта» выбираем белый цвет.
Так как мы уже настроили фирменный шрифт на светлом дашборде, эти настройки применились к темной версии – никаких операций с проверкой шрифта или с изменением его размера здесь не требуется.
Заголовки диаграмм
Они тоже потеряли свою видимость на темном фоне, значит, меняем цвет шрифта и у этих элементов. Чтобы они не отбирали яркости у названия дашборда, выберем самый светлый оттенок коричневого из палитры (на 90 % светлее фона).
Линия под заголовками
Этот элемент также остался светлым, и это тоже нужно поменять: в темной версии смысловые блоки тоже должны четко отделяться друг от друга. Сначала настроим ширину этой линии.
Выделяем ячейку с заголовком диаграммы.
На вкладке меню «Главная» нажмем на кнопку «Границы».
В выпадающем меню выбираем «Тип линии» → самую широкую линию.
Дальше в том же меню нажимаем на «Цвет линии»: из предложенных вариантов нужно выбрать оттенок на тон светлее нашего фона.
Не пугайтесь появившегося «карандаша»: он рисует исключительно прямые линии. Нам остается только закрасить с его помощью линию под заголовком диаграммы. Выйти из режима рисования можно с помощью клавиши Esc.
Задаем аналогичное форматирование и для заголовков остальных диаграмм. Можно повторить описанные выше пункты для каждого, а можно выделить отформатированную ячейку и с помощью кнопки «Формат по образцу» повторить этот формат для других заголовков.
Новый цвет для карточек
Они бросаются в глаза в первую очередь – насыщенный синий цвет не гармонирует с новой темой нашего дашборда. Если для белого фона я рекомендовал использовать светлый серый или голубой цвет карточек, то здесь по такому принципу возьму оттенок фирменного коричневого, только на 25 % светлее. Получится, будто карточки вдавлены в подложку.
Настройка графика
Фон графика
Он по-прежнему остался в светлой теме, а нам нужно привести его в соответствие с цветом всего дашборда. Для этого выделяем область построения и на главной вкладке меню кнопкой «Цвет заливки» выбираем самый темный оттенок коричневого – тот же, что мы использовали для фона дашборда.
Линия на графике
Теперь новая задача – на таком фоне померкла синяя линия графика. Изменим ее цвет на зеленый. Для этого выделим область построения графика и вызовем меню правой кнопкой мыши. Здесь нужно использовать обе кнопки – «Заливка» и «Контур».
Метки данных на графике
Цвет для меток данных выбираем уже в ленте меню. Обычно я делаю их в цвет линий или столбиков, но на темном фоне такой вариант будет читаться плохо. Поэтому и для меток «План», и для меток «Факт» выбираю оттенок на несколько тонов светлее соответствующих линий графика. С красным это несложно – нужный цвет есть в доступной палитре.
А вот зеленые оттенки в раскладке цветов не подойдут – слишком уж «неоновые». Поэтому меткам для этой линии подберем цвет самостоятельно. Вот как я это делаю.
Выделяю метки данных для линии «План».
