Делать сайт для кофейной компании — огромный риск вляпаться в штампы: напихать кофейных зёрен в иконки, а на фон добавить нарочито небрежные капли. Но когда заказчик и студия открыты для экспериментов, получается флагманский проект.
Результат Процесс
Не оно, а он — новый сайт «Славкофе»
Сибирикс
СВЕЖИЙ КЕЙС

Не оно, а он — новый сайт «Славкофе»

Делать сайт для кофейной компании — огромный риск вляпаться в штампы: напихать кофейных зёрен в иконки, а на фон добавить нарочито небрежные капли. Но когда заказчик и студия открыты для экспериментов, вместо шаблонного сайта получается флагманский проект.
«Славкофе» за 25 лет работы сделал так, что теперь в любом городе России можно купить качественный кофе. И цикорий. И ещё немного какао и сухих сливок. Кофе и цикорий «Славкофе» частично закупает у крупных международных партнёров, а часть производит самостоятельно, причём сумасшедшими объёмами — по 5 549 760 порции в сутки. Если всё это заварить в маленьких кофейных чашках, а потом твердой рукой вылить, получится ароматный кофейно-цикорийный бассейн с 5 плавательными дорожками. Вот так всё серьёзно.
Задачи
Заказчик пришёл к нам с тёплым и ламповым кофейным сайтом, где фон кофейного цвета с пятнами от кофе перекликался с рассыпанным кофе-порошком в футере и с иконками в форме кофейных зёрен... Нужно больше кофе! Так думали в 2009 — когда создавали этот сайт. Но прошло 7 лет, и он стал выглядеть уныло на фоне конкурентов с параллаксами, анимацией и Дартом Вейдером вместо кофейных зёрен.

Нужно было решать проблему и сделать для «Славкофе» стильно-модно-молодёжно, не опускаясь до хипстерских оленей. И найти ту гармонию, когда сайт привлекает и рядовых покупателей, и серьёзных бизнес-партнёров.
Дизайн
О том, как сайт будет выглядеть, думали с самого начала. Дизайнера привлекли уже на этапе прототипа, который поэтому получился непривычно детализированным и даже анимированным.
Главную страницу решили посвятить флагманскому продукту «Славкофе» — Wollinger 3D. И показать реальную, но немного упрощённую схему его производства — чтобы объяснить посетителям сайта, что за чудо технологий этот сублимированный кофе.
Накануне старта проекта прошли базовый интенсив по 3D моделированию. Было решено использовать полученные знания на реальном проекте.

Таким образом показали процесс производства сублимированного кофе с использованием разработанных 3D моделей и визуализации.

Начало положено — дальше больше ;)

Алексей
Дизайнер
Из-за того, что некоторые этапы производства оказались незрелищными и скучными, мы кое-что изменили. И, если на сайт зайдут работяги, которые точно знают, что в таких штуках кофе не делается, предупреждаем сразу: мы в курсе. Мы эти штуки сами придумали.
Бочки придумывали и утверждали с заказчиком — чтобы не натридэшить чего-нибудь не того, и показать процесс максимально упрощенно :) Например, сделали скетч девайса для сушки, чтобы не ошибиться с размерами и пропорциями. На скетче, кстати, все-таки ошиблись, на дизайне — все поменяли.

Ирина
Менеджер проекта
Идея с историей создания продукта понравилась заказчику, и уже на этапе прототипирования он решил повторить её с цикорием. Во время работы над этой страничкой мы узнали, как выглядит цикорий в промежуточном состоянии между теми голубыми цветочками, которые печатают на упаковках, и коричневым порошком внутри. Оказалось, что сначала как хрен, а потом — как что-то, за что и арестовать могут, и кепочку 228 подарить.
Чтобы показать историю создания кофе, мы накрутили много-много (но в пределах веб-приличий) параллакс-эффектов и анимации. И ещё больше — 3D моделей.
Разработка
На новом сайте «Славкофе» анимации столько же, сколько кофе — на старом. Везде что-то шевелится и ждёт, когда посетитель проскролит вниз, чтобы выскочить из-за угла.
Славкофе для меня — проект нового уровня с совершенно невероятной анимацией. Главная страница рассказывает увлекательную историю о том, как кофейное зерно проходит путь от созревания на ветке до упаковки на полках магазинов. Его обжаривают, перемалывают, замораживают, пропитывают эфирными маслами — с ума сойти! На экране постоянно что-то происходит: появляются и исчезают объекты, надписи, что-то замерзает, выпаривается... В общем, целое представление. И реализовать все детали с сохранением оптимальной производительности было нелёгкой задачей. Но мы справились. И в итоге получился клёвый проект. Один из тех, которые я с гордостью показываю друзьям и родным.

Дарья
Разработчик
Кроме праздника на главной странице, есть приятные детали и на внутренних. У каждого продукта «Славкофе» есть своя страничка, где чашечку кофе или цикория можно изучить и виртуально потискать, наводя курсор на характеристики.
Внимание на кружку
У каждого типа продуктов есть своя подложка, которую заказчик может сочетать с любым цветом фона — полная свобода для того, чтобы сломать сайт творчества.
Помимо главной страницы, на сайте немного сложных элементов, поэтому разработка внутренних страниц прошла довольно быстро. Использовали уже привычный History API для фильтраций по продуктам и новостям.

Главная прелесть в разработке сайта кофе — это то, что параллельно можно пить кофе.

Андрей
Разработчик
Нам повезло с заказчиком — он был открыт для идей. Даже для тех, которых мы сами немного боялись. Поэтому сайт получился сочным, живым и без кофейных штампов.
Уже несколько лет проповедуем светлую мысль, что в любое время в студии должен быть как минимум один флагманский проект. На котором мы должны перепрыгнуть самих себя, даже если это будет за наш счет. Многое должно совпасть, чтобы проект получил почти безграничные ресурсы и зелёный свет. Хочу сказать огромное спасибо и заказчику и команде, что не побоялись экспериментировать. Enjoy!

Владимир
Руководитель студии
Готовый проект