Год цифр, который затягивает

Как правило, у отчёта два читателя, и они почти не пересекаются. Совет директоров знает цифры наизусть: им нужны плотность, точность и динамика за несколько лет. Аудиторы и сторонние организации открывают документ впервые и ничего не могут уточнить — всё, что им непонятно, они прочитают как ошибку. Поэтому из макета ушло всё, что спорит с цифрами: декоративные иллюстрации, градиенты, подложки под текстом. Остались сетка, типографика и данные.

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

Отчёт разложен на 35 экранов: обложка, содержание, шесть глав, приложение с методикой. У каждой главы своя контрастная обложка, дающая представление о том, что ждёт в этой части отчёта.

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

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

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

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

Читается он сверху вниз, как документ. Руководство получило плотность и динамику, внешние читатели — компанию, понятную без пояснений. Анимация здесь ничего не заменяет. Она просто снимает необходимость писать рядом «обратите внимание».