Контейнер Фирстиль Листовка Сайт

Создание сайта компании «Тетра пак»

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

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

Берем за основу форму упаковки.

Возвращаемся к красочному иллюстрированному рассказу.

Думаем про страницу о лесозаготовках. Рисуем на стене прототип и тестируем видеоисторию.

Фотографируем стену и собираем страницу с иллюстрацией.

Замечаем, что надутая воздухом картонная упаковка отлично хлопает.

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

А что, если замкнуть цикл, пустив историю по кругу?

На основе этой идеи собираем первую страницу.

Работаем над иллюстрацией к жизненному циклу.

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

Думаем над меню, ищем метафоры и рисуем иконки.

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

Клиент просит наполнить упаковку соком. Делаем.

Рисуем правильную крышку.

Работаем над страницей о производстве картона. Готовим схему.

Выслушав комментарии клиента, вносим изменения.

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

Отрисовываем чистовик схемы, попутно меняя направление движения.

Получаем очередные комментарии по доработке.

Доделываем страницу, добавляя новое содержимое.

Приступаем к странице про полиэтилен.

Прикидываем схему производства.

Ставим ее на страницу, попутно делая акцент на том, что «Тетра пак» по максимуму использует «зеленый» полиэтилен.

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

Такой подход не срабатывает. Правим схему, меняя нефть на новый источник сырья.

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

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

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

Примеряем схему на страницу.

Схема не совсем соответствует реальности. Пробуем упростить.

Не то. Изучаем процесс еще.

Утверждаем с клиентом нужный вариант.

Рисуем новую схему и доделываем страницу.

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

Работаем над иллюстрацией.

Следим за эволюцией страницы про упаковочные системы.

Думаем, каким может быть будущее упаковки.

Клиент говорит о своем стремлении к экологичности. Развиваем эту тему.

Эта идея не подходит. Показываем новые направления.

Отрисовываем новый вариант иллюстрации и переверстываем страницу с новым содержимым.

Приступаем к странице о транспортировке. С помощью интерактивного переключателя показываем, сколько машин можно сэкономить, используя упаковку «Тетра пак».

Отрисовываем грузовики.

Заполняем страницу о продукте внутри упаковки соком, молоком и вином.

Рисуем содержимое.

В итоге убираем кукурузу и переверстываем.

Собираем страницу обработки продукта.

Иллюстрация не подходит под описание процесса. Собираем новую страницу с новой схемой.

Упаковка встречает продукт.

Доделываем схему.

Собираем страницу истории из газет разного времени.

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

Рисуем грузовики.

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

Сравниваем упаковки на полке магазина. При клике проигравшая полка исчезает — и становится видно описание значков на упаковке «Тетра пака».

Идея не прижилась. Убираем сравнение упаковок и сразу рассказываем про обозначения.

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

Собираем страницу.

Меняем общую иллюстрацию на три отдельных картинки про способы переработки.

Клиент просит закрыть кузов у грузовика и убрать завод в огне.

Прикидываем процесс переработки упаковки.

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

Клиент присылает новое видение схемы переработки. Меняем иллюстрацию и переверстываем страницу.

Собираем страницу про результаты переработки.

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

Беремся за страницу про жизнь упаковки в доме.

Меняем ракурс холодильника. В итоге эта страница не проходит в финальную версию.

Делаем страницу о переработчиках в мире. Перед запуском решаем ее убрать.

Создаем страницу про контроль качества. Она тоже в финал не прошла.

Рисуем иконки.

Правим тизеры ко всем страницам.

Вносим финальные правки.