Создание сайта театра «Мастерская Петра Фоменко»

Описание• Процесс IПроцесс II

Перед началом работы над дизайн-концепцией идем на подробную экскурсию по театру и посещаем несколько спектаклей.

Трансформируем полученную информацию в идеи.

Рисуем главную страницу.

Чтобы сохранить преемственность с первой версией сайта, многие изображения переводим в черно-белый режим.
Для каждого спектакля решаем делать собственную карточку.

Карточки занимают свои места в макетах списка постановок и в афише.

Готовим страницу постановки и страницу актера.

Для большей наглядности презентуем концепцию заказчику в виде прототипа.

После утверждения начинается чистовая работа над сайтом.
Следующим этапом идет отрисовка карточек спектакля. Сотрудник театра высылает множество материалов для их производства.

Составляем контрольный список, чтобы ничего не пропустить.

Для каждой фотографии выбираем уникальную форму. Обтравливаем снимки нужным образом, затем добавляем к некоторым из них авторские штрихи.

Приступаем к самим карточкам.

Пробуем разные пропорции и цветовые схемы.

Уточняем у технолога нюансы сохранения и расположения картинок в макетах.

Параллельно с работой над карточками совершаем выезды в театр, чтобы снять «живые» фотографии.

Приступаем к сервису покупки билетов. Изучаем схемы аналогов.

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

Уже неплохо, но есть над чем поработать. Основные проблемы: отвлекающие детали, искажения, отсутствие симметрии, неровности и нечеткие силуэты стульев.

Вносим исправления за несколько этапов.

Принимаемся за механизм выбора мест. Поверх фотографии будут расположены СВГ-маски свободных мест. Переносим итоговую картинку в «Иллюстратор» и приступаем к изображению схемы, начиная с партера.

Векторная схема должна быть максимально точной и симметричной, все неточности построения растровой картинки тут же «подчищаются» в «Фотошопе».

Переходим к амфитеатру. За основу берутся шейпы, созданные для партера. Шейпы загибаются по дуге нужного диаметра.

После этого копируем группу.

Затем с помощью инструмента Blend создаем промежуточные копии рядов.

Стулья поочередно выравниваются относительно схемы, как это было в случае с партером.

Сравниваем стулья до и после выравнивания.

Заканчиваем работу со схемой и передаем ее на верстку технологу.

На очереди — экран выбора билетов.

Также готовим изображения малого, серого и зеленого залов.