Корпоративный сайт и каталог производителя мороженого

Год

2021

icecream-chl.ru

Чистая Линия

Направления

Retail

•

E-commerce

•

Экспертиза

Предпроектные исследования

•

UX/UI-дизайн

•

Иллюстрации

•

Награды

Рейтинг Рунета

×1

Tagline Awards

×2

CSS Design Awards

×1

Промышленность

•

Интеграция 1С-Bitrix

•

Разработать корпоративный сайт, объединив все величины торговой марки: производственные процессы, продукцию и экосистему «Мир Чистой Линии». Сайт должен информировать целевую аудиторию о специальных проектах и рекламных активностях в оффлайне.

Задача

Любой наш проект начинается со сбора требований. Первым шагом мы декомпозируем BRD (business requirements document), на его базе создаем адресный бриф-лист с вопросами.

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

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

Формализовав контент, мы приступили к созданию интерфейса

Прототипирование — это не только выстраивание повествования, но и распределение веса и иерархии.

Награды

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

Мир Чистой Линии

Задача экрана — показать разнообразие направлений деятельности компании. Чистая Линия — это не только вкусное мороженое.

Новости

Новостной блок рассказывает о новых проектах и анонсирует продукты компании.

Футер

Доступ к полноценной структуре сайта.

Главное меню

Основной навигационный блок сайта с фиксацией при скролле к левой части экрана. С помощью размера шрифта и отступов визуально разграничили смысловые блоки.

Промотирующий слайдер

Дает возможность крупно и ярко демонстрировать продукты и анонсировать события.

Качество и история

Задача экрана — кратко обозначить, что компания с историей и не использует в производстве химические добавки и прочее. Также есть возможность перейти на страницы «Миссия» и «Производство».

Мороженое «Чистая Линия» на прилавках с 1991 года и потребитель быстро считывает и узнает бренд по упаковке в магазине. Однако в цифровом мире бренду не хватало распространенности и единства. Поэтому развитие фирменного стиля в вебе — типовая задача для FMCG.

Развитие фирменного стиля на сайте

Упаковка мороженого

Фирменный паттерн

Листовка

Визитка

Стакан для напитков

Логотип

Пакет

Конечно, упаковка это не все. Нужно было учесть и другие медиа-материалы: реклама на ТВ, наружная реклама, социальные сети и т. д.

Нереально вкусные экскурсии! Видео с Youtube-канала «Чистой Линии»

Что самое главное в жизни человека? Видео с Youtube-канала «Чистой Линии»

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

Стайлборд

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

Форма представления

Согласовали с клиентом стилистические референсы и продолжили создание уже в Иллюстраторе. В итоге мы нарисовали порядка 30 иллюстраций.

Поиск стиля внутри стайлборда

Согласовали с клиентом стилистические референсы и продолжили создание уже в Иллюстраторе. В итоге мы нарисовали порядка 30 иллюстраций.

Поиск стиля внутри стайлборда

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

Дизайн

Концепция 1

Концепция 2

Финальный и согласованный вариант

Производство шоколада

Каталог, фильтр по видам и вкусам

Молочная академия «Чистая Линия»

На первом экране — слайдер. Внутри слайдера — линейки продукции. Еще на этапе дизайна идея с «летающими мороженками» показалась нам старомодной и избитой. Поэтому решили сделать анимацию последовательного разворачивания из центра.

Анимация интерфейса

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

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

Поддержка и развитие проекта