Генератор афиш для «Большой переверстки»

Как я уже говорил, новые афиши для мастер-класса «Большая переверстка» делает робот, а я только нажимаю на кнопку Randomize. Вот как это выглядит:

Ну, если быть честным, я еще выбираю лучшие афиши из тех, что предлагает генератор. Это несложно, потому что большинство вариантов у него удачные.

Всю техническую часть сделал Иван Дианов. Посмотрите его Телеграм-канал, там много крутых штук: @razuznak

Но обо всем по порядку.

Идея

Я хотел заложить в макет две идеи:

1. Конструктор как символ вариативности. Хорошо передает то, чем мы занимаемся на мастер-классе: переставляем блоки в поисках лучшего решения.
2. Стрелка как символ движения от «было» к «стало». Вообще стрелка была символом рубрики «Переверстка» с самого начала.

Первый вариант вышел такой:

Прекрасный заяц из инстаграма Марии Хализовой до финального макета не дожил

Дальше я вернул синий цвет с прошлых афиш, добавил кружок с датой и сделал вертикальную версию:

В результате получились афиши, которые хочется переверстать :–)

Воплощение

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

Макет строится по сетке из 15 квадратных модулей: 5×3.

Картинки
— На фоне раздробленная картинка и 3 разных стрелки
— Всегда есть большой кусок картинки (сейчас на 4 модуля), остальные куски одинакового размера в 1 модуль
— Под мелким текстом и датой нет фоновых элементов, только цвет

Текст
— Все текстовые блоки стоят в смежных модулях, то есть рядом друг с другом, кроме даты
— Одна строка заголовка выключается влево, другая вправо
— Мелкий текст всегда занимает 2 модуля по горизонтали и набирается одним шрифтом

Можно попробовать
— Дробление картинки на более мелкие части (сделали)
— Модули разных пропорций (не сделали)

Дальше решаем, как будет меняться внешний вид элементов. Скрипт рандомно выбирает:

— Начертание шрифта для каждой строки заголовка из 6 возможных (3 у гротеска и 3 у антиквы)
— Кружок для даты из 10 заранее подготовленных
— 3 стрелки из 10 заранее подготовленных

Зайца я в итоге заменил космическими аппаратами, которые использовал на старых афишах. Cастейнабилити!

Еще сделали анимацию, но она пока сыровата.