Дизайн, код и AI в одних руках - проект под ключ
- Город
- Москва
- Опыт работы
- 6 лет
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
Личный демо-проект. Задачу ставила себе сама: показать, что лонгрид с плотной
графикой и анимацией можно собрать одной HTML-страницей — без конструктора, без
фреймворка и без единой строки JavaScript.
Тему взяла из истории дизайна. Изотайп — венский метод изобразительной статистики,
который в 1925 году придумал Отто Нейрат: как объяснить устройство экономики людям,
не читающим таблиц. Метод дал первое правило инфографики — большее количество
показывают не увеличенным знаком, а бо́льшим числом одинаковых знаков. Правило
нарушают в отчётах и дашбордах до сих пор, поэтому тема живая, а не музейная.
Что должна была уметь страница:
— удерживать читателя на восьми разделах и не разваливаться на середине;
— объяснять правило метода наглядно, а не пересказывать его словами;
— открываться где угодно, включая просмотрщик Telegram, где скрипты не работают;
— весить столько, чтобы грузиться с телефона в поле.
Дополнительное ограничение поставила по авторским правам: работы Герда Арнца
охраняются, воспроизводить их нельзя. Значит, вся графика должна быть нарисована
заново по правилам метода — и об этом должно быть сказано на самой странице.
Собрала автономную HTML-страницу: один файл, шрифты вшиты в base64, вся графика —
собственный SVG. Внешних запросов нет вообще.
Ни одного тега script. Всё, что двигается, сделано средствами CSS:
— закрепление блоков на position: sticky;
— появление разделов и полоса прогресса чтения — на CSS scroll-driven animations;
— самоиграющие анимации — на обычных keyframes.
Ни одно состояние не спрятано по умолчанию: если поддержки scroll-анимаций нет,
страница просто открывается целиком, ничего не теряя.
Визуально страница держит два регистра, и это осознанное решение. Эпоха вокруг
метода — тёмный коллаж: рваные края бумаги, полутон, красные акценты, бегущая
строка. Сам метод показан противоположным образом — стерильной сеткой на светлом
фоне, где ничего не отвлекает от цифры. Столкновение двух регистров и есть
содержание страницы.
Смысловая опора — первое правило метода, вынесенное в первое движение страницы.
В разделе «Метод» рядом стоят две диаграммы: «так неправильно» — знак растёт вместе
с числом, и «так правильно» — знак повторяется. В первой знак сам подменяется
раздутым вдвое и загорается красный крест; читатель видит ошибку, а не читает о ней.
Графика: 16 собственных пиктограмм в SVG плюс полутон через SVG-паттерн точек.
Работы Арнца не воспроизводятся, об этом сказано прямо на странице.
Палитра: чернила, бумага, красный — и ещё синий с охрой, но только внутри диаграмм,
где цвет означает категорию данных, а не украшение. За пределами диаграмм этих двух
цветов на странице нет.
Отдельно проработана честность материала: спорная роль Нейрата в основании ИЗОСТАТа
вынесена в плашку «спорно», в титрах перечислены источники и оговорки — расхождения
в датировках и то, что цифры в примерах диаграмм условные.
Готовая страница: 8 разделов, 16 своих пиктограмм, ноль библиотек, ноль скриптов,
ноль внешних запросов. Один файл, который можно переслать в мессенджере и открыть
без интернета.
Что это показывает по работе:
— плотная редакционная вёрстка со скролл-механикой держится на голом CSS, а значит
не тянет за собой сборку, зависимости и их обновления;
— инфографика рисуется под задачу в векторе, а не собирается из стоковых иконок;
— тема разобрана до правил и оговорок, а не пересказана по верхам.
Формат применяю там, где нужен редакционный материал, спецпроект или страница
«о продукте», которую потом никто не хочет поддерживать: заказчик получает файл,
а не конструктор с подпиской.
