Генератор афиш для «Большой переверстки»
Как я уже говорил, новые афиши для мастер-класса «Большая переверстка» делает робот, а я только нажимаю на кнопку Randomize. Вот как это выглядит:
Ну, если быть честным, я еще выбираю лучшие афиши из тех, что предлагает генератор. Это несложно, потому что большинство вариантов у него удачные.
Всю техническую часть сделал Иван Дианов. Посмотрите его Телеграм-канал, там много крутых штук: @razuznak
Но обо всем по порядку.
Идея
Я хотел заложить в макет две идеи:
1. Конструктор как символ вариативности. Хорошо передает то, чем мы занимаемся на мастер-классе: переставляем блоки в поисках лучшего решения.
2. Стрелка как символ движения от «было» к «стало». Вообще стрелка была символом рубрики «Переверстка» с самого начала.
Первый вариант вышел такой:
Прекрасный заяц из инстаграма Марии Хализовой до финального макета не дожил
Дальше я вернул синий цвет с прошлых афиш, добавил кружок с датой и сделал вертикальную версию:
В результате получились афиши, которые хочется переверстать :-)
Воплощение
Когда графическое решение найдено, нужно его формализовать: придумать, как это будет работать в динамике. Ниже правила компоновки макета, которые я передал Ивану для разработки:
Макет строится по сетке из 15 квадратных модулей: 5×3.
Картинки
- На фоне раздробленная картинка и 3 разных стрелки
- Всегда есть большой кусок картинки (сейчас на 4 модуля), остальные куски одинакового размера в 1 модуль
- Под мелким текстом и датой нет фоновых элементов, только цвет
Текст
- Все текстовые блоки стоят в смежных модулях, то есть рядом друг с другом, кроме даты
- Одна строка заголовка выключается влево, другая вправо
- Мелкий текст всегда занимает 2 модуля по горизонтали и набирается одним шрифтом
Можно попробовать
- Дробление картинки на более мелкие части (сделали)
- Модули разных пропорций (не сделали)
Дальше решаем, как будет меняться внешний вид элементов. Скрипт рандомно выбирает:
- Начертание шрифта для каждой строки заголовка из 6 возможных (3 у гротеска и 3 у антиквы)
- Кружок для даты из 10 заранее подготовленных
- 3 стрелки из 10 заранее подготовленных
Зайца я в итоге заменил космическими аппаратами, которые использовал на старых афишах. Cастейнабилити!
Еще сделали анимацию, но она пока сыровата.
Click to viewНу, если быть честным, я еще выбираю лучшие афиши из тех, что предлагает генератор. Это несложно, потому что большинство вариантов у него удачные.
Всю техническую часть сделал Иван Дианов. Посмотрите его Телеграм-канал, там много крутых штук: @razuznak
Но обо всем по порядку.
Идея
Я хотел заложить в макет две идеи:
1. Конструктор как символ вариативности. Хорошо передает то, чем мы занимаемся на мастер-классе: переставляем блоки в поисках лучшего решения.
2. Стрелка как символ движения от «было» к «стало». Вообще стрелка была символом рубрики «Переверстка» с самого начала.
Первый вариант вышел такой:
Прекрасный заяц из инстаграма Марии Хализовой до финального макета не дожил
Дальше я вернул синий цвет с прошлых афиш, добавил кружок с датой и сделал вертикальную версию:
В результате получились афиши, которые хочется переверстать :-)
Воплощение
Когда графическое решение найдено, нужно его формализовать: придумать, как это будет работать в динамике. Ниже правила компоновки макета, которые я передал Ивану для разработки:
Макет строится по сетке из 15 квадратных модулей: 5×3.
Картинки
- На фоне раздробленная картинка и 3 разных стрелки
- Всегда есть большой кусок картинки (сейчас на 4 модуля), остальные куски одинакового размера в 1 модуль
- Под мелким текстом и датой нет фоновых элементов, только цвет
Текст
- Все текстовые блоки стоят в смежных модулях, то есть рядом друг с другом, кроме даты
- Одна строка заголовка выключается влево, другая вправо
- Мелкий текст всегда занимает 2 модуля по горизонтали и набирается одним шрифтом
Можно попробовать
- Дробление картинки на более мелкие части (сделали)
- Модули разных пропорций (не сделали)
Дальше решаем, как будет меняться внешний вид элементов. Скрипт рандомно выбирает:
- Начертание шрифта для каждой строки заголовка из 6 возможных (3 у гротеска и 3 у антиквы)
- Кружок для даты из 10 заранее подготовленных
- 3 стрелки из 10 заранее подготовленных
Зайца я в итоге заменил космическими аппаратами, которые использовал на старых афишах. Cастейнабилити!
Еще сделали анимацию, но она пока сыровата.