Сайт ГК «ПИР»
Вкусные фотографии и много фактов в проекте для крупнейшего российского сырного дистрибьютора
Группа компаний «ПИР» — российский торгово-производственный холдинг с широким ассортиментным портфелем молочной продукции (более 500 товарных позиций). Группа компаний на рынке больше 17 лет и занимает лидирующие позиции в сегменте упаковки и нарезки сыра. ГК «ПИР» требовался имиджевый сайт-визитка, который бы отражал преимущества холдинга, рассказывал о различных направлениях его деятельности, о ведущих брендах в портфеле и о ключевых партнёрах.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild6638-3438-4034-b835-616665333436__-__empty__main_mock.png)
Задачи
- 1Разработать дизайн, поддерживающий образ надёжного партнёра и производителя.
- 2Рассказать о преимуществах, ключевых фактах компании и сделать акцент на миссии.
- 3Отразить разные направления деятельности: производство фасованных сыров, упаковывание и дистрибьюцию.
- 4Рассказать о ведущих брендах.
- 5Выгодно показать список компаний-партнёров.
- 6Сделать удобный адаптив.
Аналитика
Целевые персоны, под которых создавался сайт, — бизнес-партнеры, инвесторы и финансовые организации. Среди партнёров по бизнесу чаще всего с компанией контактируют руководители отделов по закупкам в крупных сетевых супермаркетах, начальники производственных отделов или управляющие в сфере HoReCa.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3662-3931-4532-b761-356337306465__-__empty__photo.png)
Для каждой группы важна репутация компании, ассортиментный портфель и другие преимущества, поэтому на прототипе есть блоки о продукте, компании, её истории, принципах, направлениях деятельности, брендах и партнёрах.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild6138-6134-4463-a436-613939393936__-__empty__proto.png)
Дизайн
Для проекта было важно поддержать строгий и презентабельный образ группы компаний, поэтому на референсах есть примеры с чётким, структурированным расположением блоков, минимумом цветовых пятен и обилием цифр-фактоидов. Фактоиды добавляют информативности и говорят сами за себя, не требуя большого количества «продающего» текста.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3938-3361-4432-a235-333763393461__-__empty__visbrief1.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3564-3437-4163-b331-336434653561__-__empty__visbrief2.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild6361-3133-4462-a537-316266363261__-__empty__visbrief3.png)
Опираясь на мудборд, мы создали чистый дизайн, опирающийся на вкусные фото и интересные элементы вроде фактоидов и иконок:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild6338-3565-4634-b463-666633316465__-__empty__main-1-min.png)
Фишку сайта придумали не сразу: первый вариант, который обсуждался на брейншторме, не зашел, после арт-директор задал направление, предложив вариант с логотипом. Страница сразу стала как-то просторнее и свежее. Много времени ушло на инфографику и подбор вкусных сырных фоток, но итоговый результат порадовал.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3963-6362-4963-b161-646332303131__-__empty__luba-morozevskaya.png)
Любовь
Дизайнер
Вариант с тянущимися друг к другу руками, который отсеялся на брейншторме. Тогда же отказались от идеи деления экрана на 2 части.
На 404-ю страницу прокрался помидор, намекающий на то, что что-то пошло не так:)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild6438-3738-4664-b931-623636356566__-__empty__404_copy.png)
Разработка
Интересности этого проекта спрятались на этапе разработки: это и подложки, скользящие из блока в блок, и счётчики, и движущиеся объекты, и перемешивающиеся логотипы партнёров.
Большой логотип слева, который кочует с экрана на экран, — это svg-фигура, которая работает как маска для картинки под ней при скроллировании с одного блока на другой.
Большой логотип слева, который кочует с экрана на экран, — это svg-фигура, которая работает как маска для картинки под ней при скроллировании с одного блока на другой.
У каждой цифр-фактоидов настроена анимация для всплывающих иконок и текста.
В блоке «Факты о компании» есть фишка — счётчик с количеством довольных семей:
Принципы группы компаний мы отразили в специальном блоке:
Хотя это и простая анимация, она отражает ценности компании: маленькие молоковозы "наматывают" километры пикселей, показывая, что работа никогда не останавливается, а продукция всегда доставляется свежей.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3533-3133-4935-b961-316438363436__-__empty__fecc07d32c69b092262d.png)
Андрей
Разработчик
Для отображения партнёров изначально планировалось разместить логотипы, которые бы переворачивались и менялись. Но в итоге заказчик решил оформить этот блок более строго: имена компаний-партнёров написаны на цветных плашках, которые сменяются рандомно:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3537-3965-4334-a636-363437613566__-__empty__partners.png)
Как выглядел блок о партнёрах на этапе дизайна
Как выглядит блок о партнёрах на сайте
Красивый и легкий сайт-презентация группы компаний. Пожалуй, самым непростым делом было отладить адаптивность блоков, так как контента много, он весь важен, и при этом должен поэкранно умещаться на любом устройстве.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3931-3061-4338-a438-313934303365__-__empty__dina.jpg)
Дина
Руководитель проекта
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1707300104/tild3030-3237-4462-a365-326464633139__-__empty__adapt.png)