Гиагинский молочный завод
Разработка сайта
проектирование
дизайн
фотосессия
иллюстрации
разработка
анимация интерфейса
2020
1Х золото
1Х серебро
Рейтинг Рунета 2020
Honorable Mention
AWWWARDS
Special Kudos
CSS Design Awards
Лучший сайт в ЮФО
2Х серебро
1Х бронза
Золотой сайт 2020
Клиент
Гиагинский молочный завод — производитель молочной продукции в республике Адыгея. Ключевое направление — производство вытяжного и адыгейского сыра.
Наша задача
Разработать новый сайт, который ярко презентует продукцию, расскажет об истории завода и передаст колорит Адыгеи. При этом важно сохранить преемственность айдентики и дать ей стилистическое развитие.
У завода исключительное право на производство адыгейского сыра — знак НМПТ. Только в Адыгеи производится настоящий адыгейский сыр, чей вкус знают и любят по всей России.
НМПТ гарантирует, что продукт создан по оригинальной рецептуре, с соблюдением традиционных технологий производства.
Это стало ключом для создания визуального языка, передачи настроения и создания аутентичной атмосферы северо-кавказского колорита.
Ключ
Этап 1
Агрегация и формализация функциональных, нефункциональных требований к проекту. Чтобы собрать требования, мы погружаемся в нишу, разбираемся в бизнес-процессах, формируем бриф-лист с вопросами.
Этап 2
Создание текстового контента и формирование идеи. Прежде чем перейти к этапу проектирования, мы готовим текстовый контент. Именно такой подход позволяет создавать осмысленные прототипы, в которых решаются реальные задачи бизнеса и целевой аудитории.
Для подготовки текстового контента мы изучили традиции адыгского народа и создали облако тезисов. Это помогло нам сформировать идеи и визуальный стиль.
Сформулировали ключевую идею:
Этап 3
На основании информационной архитектуры и текстового контента мы переходим к этапу прототипирования. На прототипах мы сразу пытаемся придумать механики и подобрать визуальные образы.
В меню вынесены 3 ключевых пункта
«О нас» закрывает задачу с позиционированием и философией производства.
«Продукция» позволяет ознакомиться
с ассортиментом продукции завода, это важно
как для B2B-, так и для B2C-сегмента.
«Где купить» — утилитарная функция для B2C сегмента. Выводит все точки продаж, где можно приобрести продукцию завода.
Важно, чтобы человек запомнил упаковку. Изучая ассортимент в магазине, он вспомнит элементы фирменного стиля и сделает выбор в нашу пользу. Поэтому на первом экране мы презентуем продукт.
Экран создает связку с презентацией продукта, усиливая ценность для B2C-сегмента.
Экран рассказывает о ключевом УТП продукта — НМПТ. Через УТП мы закрываем задачу с позиционированием завода и отмечаем уникальность продукции.
Новостной блок закрывает задачи PR и рассказывает
о жизни компании.
Переход в раздел «Где купить», в котором человек может быстро найти точку продаж с продукцией. Эта классическая функциональность для FMCG позволяет сократить путь к продукту.
Блок с подпиской на рассылку закрывает задачи маркетинга по сегментации заинтересованной целевой аудитории.
Этап 4
Провели продуктовую фотосессию. Композиционные фотографии использовали в разделе с рецептами и каталоге. Дополнив фотобанк завода, дали новые средства выразительности и улучшили качество контента для социальных сетей.
Этап 5
Подготовка к созданию дизайн-концепции. В рамках разработанной идеи мы собрали мудборд и сайты-референсы.
В визуальную и стилистическую основу мы заложили:
упрощенную геометрию и детализацию в иллюстрациях
крупную выразительную типографику
комбинацию растровых черно-белых изображений и векторных иллюстраций



Этап 6
Создание дизайн-концепции и согласование визуального стиля проекта.
4 драфт-версии
Отсутствует визуальная связь с Адыгеей, стилистика иллюстраций слишком детсткая.
Появилась визуальная связь с заводом в Адыгее. Однако нет связи с продуктом.
Появилась визуальная связь с заводом в Адыгее. Однако нет связи с продуктом.
Горы Адыгеи на фоне, наличие продуктового слайдера, иллюстративная поддержка
Главная страница на основе выбранной концепции
Сетка сайта
Этап 7
Разработка внутренних страниц и создание контента. Одна из задач — показать продукт в упаковке. Проблемой стал сам продукт. Не все сыры получалось вписать в визуальный стиль и мы создали иллюстративную метафору, поверх которой поместили фирменную наклейку.
Продукция
Каждый продукт завода уникален и имеет уникальный набор вкусовых сочетаний и подходит для разных блюд. Мы решили визуализировать это через атрибуты и создали 47 крафтовых иконок, которые помогут человеку сориентироваться при выборе.
Как мы это делаем
О нас
Сохранить оригинальный вкус, важнейшая задача для производства. Только люди могут сохранить традиции и передавать их от поколения к поколению. Поэтому центральной фигурой является человек с его культурным кодом и преданностью делу.
Рецепты
Новости
Этап 8
Подготовка референс-листа для интерфейсных анимаций. В процессе разработки внутренних страниц мы сразу описываем идеи, которые можно визуализировать через интерактивность. Ключевыми критериями выбора для нас стали легкость, плавность и волнообразность, отражающие метафору молока — первичного продукта, с помощью которого создаются сыры.
Меню

Фиксированная на фоне при скролле волна, сделанная в CSS, для поддержки основной концепции
Каталог
Фиксированная на фоне при скролле волна, сделанная в CSS, для поддержки основной концепции
Этап 9
Адаптивные сайты — современный стандарт в современной разработке.
Все наши проекты адаптированы под мобильные устройства.
Награды проекта
1Х золото
1Х серебро
Рейтинг Рунета 2020
Honorable Mention
AWWWARDS
Special Kudos
CSS Design Awards
Лучший сайт в ЮФО
2Х серебро
1Х бронза
Золотой сайт 2020