Создание сайта Абинского электрометаллургического завода

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

Погружаемся в задачу. Выясняем, что ключевым преимуществом завода перед конкурентами является его географическое расположение. Решаем не опускать этот факт, а, наоборот, сделать на нем акцент.

Придумываем идею трехуровнего приближения, на каждом из которых зрителю раскрываются определенные детали: мир → завод с высоты птичьего полета → конкретный цех.

Делаем черновые варианты для разных масштабов. Указываем основные направления экспорта, отображаем сравнительные котировки, обозначаем местонахождение предприятия.

В следующем приближении показываем, какие именно объекты включает в себя завод.

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

Отрабатываем анимацию переходов между масштабами, презентуем итоговое видео заказчику.

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

Едем на завод делать фотографии и снимать видео. Первым делом отправляемся на склад и снимаем продукцию — эти фото понадобятся для сборки и отрисовки изображений.

Теперь предстоит пройти все цеха и снять материалы для видео. Надеваем защитные костюмы и приступаем к съемкам.

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

Пишем экшен в «Фотошопе».

Собираем видео для нужных цехов в программе «Афтер Эффектс».

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

Начинаем детальную работу над страницами.

Собираем готовую графику с помощью верстки, параллельно дорабатывая верстку самóй страницы.

Переходы между экранами осуществляются с помощью масштабирования двух карт. Добавляем промежуточное состояние для усиления эффекта приближения.

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

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

Дорабатываем внутренние страницы. Собираем типовую.

Для форм придумываем экран успешного завершения с улыбающимся заводом.

Арт-директор предлагает на странице контактов поддержать рифму с логотипом завода. Делаем.

Добавляем красиво обработанные фотки на страницу продукции.

Остается сделать прелоудер.

Из всех вариантов арт-директор выбирает арматуру — бенгальский огонь.

На деле бенгальский огонь оказывается слишком тревожным вариантом. Останавливаемся на простой арматуре с плавно бегущими засечками.

Готово.