1.0 2.0

Создание второй версии сайта «Демилье»

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

Пробуем продукт на вкус и начинаем поиски дизайн-концепции.

В какой-то момент появляется идея подчеркнуть структуру крем-меда, изобразив его в виде цветной «колбасы», растянутой на всю страницу. Такой ход станет основным акцентом на странице и будет органично поддерживать всю линейку продукции.

Пробуем разные техники исполнения.

Тонкости производства крем-меда держатся в секрете. Решаем положить этот принцип в основу главной страницы.

Доводим идеи до презентационного вида.

В ходе работы придумываем сделать в разделе «О компании» пролет с интересным рассказом о продукте.

Презентуем концепцию заказчику, демонстрируя видеоролик.

После утверждения приступаем к воплощению идей в браузере. Начинаем со страницы пролета. Она состоит из семи частей, в каждой из которых происходит свое действие. Чтобы четче реализовать идею и проще донести ее технологу, решаем собирать страницу в программе «Афтер Эффектс». Принцип простой: выстраиваем все объекты в ряд и распределяем их на семь сцен. Далее камера пролетает сквозь все сцены.

Технолог предлагает передавать ему не видеоролики, а исходные файлы «Афтер Эффектс». Он сам переводит систему координат в нужный формат и реализует движение в браузере.

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

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

Решаем моделировать и анимировать объекты в пакете «Синема 4D», после чего выводить последовательность кадров — по тридцать пять кадров для меда и торнадо. Первая проба воодушевляет.

Примеряем материал.

Подстраиваем динамику. Блики рендерим и накладываем отдельно.

Проделываем схожие манипуляции с торнадо.

Вместо ПНГ-файлов передаем технологу раскадровки в двух форматах: джипег с однородным фоном и ПНГ-маска с прозрачностью. Таким образом размер файлов удается уменьшить примерно с 45 до 5 МБ.

Нижняя часть страницы должна быть максимально динамичной и привлекательной.

Готовим слоеные фоны, множество картинок с ингредиентами и банку.

Передаем страницу с «колбасой» дизайнеру, разбирающемуся в технологии «Вебджиэль».

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

Для отображения сцены в браузере используем библиотеку three.js. Добавляем верчение, настраиваем камеру, свет и прокрутку.

Добавляем в сцену банки.

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

Предусматриваем реакцию на наведение и клик. Собираем мобильную версию.

На финальном этапе исправляем все баги, тюним анимацию и оптимизируем размер файлов.