Чистая Линия

Разработка сайта

проектирование
дизайн
иллюстрации
разработка
анимация интерфейса

2021

клиент

«Чистая Линия» — № 1 по производству мороженого в России. Помимо мороженого под торговой маркой производится молочная и кондитерская продукция.

Экскурсии на производство мороженого, интернет-магазин, смотровая площадка в башне «Федерация. Восток», магазин сувенирной продукции, музей мороженого, AR-квесты — все это и есть часть философии по созданию семейного продукта.
«Чистая Линия» — целый мир добрых эмоций и развлечений для детей и взрослых.

Задача

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

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

Агрегация требований

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

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

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

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

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

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

Новости

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

Футер

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

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

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

Награды

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

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

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

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

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

Главное меню

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

Этап 1.

Собрать, все что есть

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

Решили начать с продукции. Собрали упаковки и постарались найти что-то общее.

Пакет

Логотип

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

Визитка

Листовка

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

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

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

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

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

Техника исполнения должна быть узнаваемой, масштабируемой и примитивной

☞

Не должны выдавать индивидуалистский художественный крафт

☞

Должны передавать «семейность» бренда через стиль

☞

Должны сохранить советскую этикетку из рекламных роликов

☞

Должны сохранить фирменные цвета бренда

☞

Нам нужно было сформировать ограничения, чтобы двигаться дальше.
Вот, что у нас получилось:

Этап 2.

Стайлборд

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

Этап 3.

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

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

Этап 4.

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

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

Этап 5.

Использование стиля в других коммуникациях

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

Таргетированная реклама, баннеры

Обложка группы Вконтакте

Дизайн

Концепция 1

Концепция 2

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

Мороженое «Чистая Линия» производится из натурального молока и мы решили отразить это в дизайне. Для этого мы создали межэкранную перетяжку с разливающимся молоком в связке с мороженым.

☞

Было важно передать чистоту и натуральность продукта. Для этого мы использовали базу эллипсоида для форм и поддерживающей графики.

☞

☞

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

☞

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

☞

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

☞

Мы сильно сфокусировались на продукте и немного забыли о бренде. Именно поэтому, в финальной версии, на втором экране, можно увидеть образы производственной площадки с элементами фирменного стиля.

Финальный, согласованный вариант, который вы можете видеть на сайте

Промотирующие слайды
с точкой входа в Каталог

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

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

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

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

Страница продукта

Каталог, мороженое

Верстка

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

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

Адаптивность

Все наши проекты адаптируются под мобильные устройства.

Не забываем про поддержку и развитие проекта

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

Новый сезон 21/22 с ХК «Динамо» Москва

Молочная академия на FORMULA 1

Молочная академия «Чистая Линия», страница для ТЦ Москвы и МО

Молочная академия «Чистая Линия», страница для парков Москвы и МО

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

Cеребро

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

Special Kudos

CSS Design Awards

2X cеребро

Tagline Awards 20-21

российские

международные