Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Categories:

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

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




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

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

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

Идея

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

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


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


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






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

Воплощение

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

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

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

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

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


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

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






Еще сделали анимацию, но она пока сыровата.
Tags: автоматизация верстки, афиша, большая переверстка, верстка, знаю как, портфолио, процесс, типографика
Subscribe

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments