Комментарии
Сайт с фокусом на продукции
Кондитерская фабрика «Сладуница»
Сибирикс
Кондитерская
фабрика
«Сладуница»
Сайт с фокусом на продукции
После разработки первого проекта многие заказчики приходят к нам за вторым и третьим. Так было и в этот раз. В 2017 году мы разработали сайт для бренда деревянных пазлов DaVICI, а в конце 2020-го сделали его редизайн. Заказчик пришел к нам за еще одним сайтом для своей группы компаний, в это раз — для кондитерской фабрики.
Сладуница — известный производитель сладостей из Омска и лидер кондитерского производства в Сибири. Продукция фабрики представлена в 65+ регионах России, ближнего и дальнего зарубежья. Кстати, на нашей офисной кухне конфеты «Сладуница» появились задолго до старта проекта. Они одни из самых вкусных.
Когда заказчик пришел к нам, у него уже был промосайт, причем сделанный известной студией и взявший несколько наград в конкурсах. Сайт был клевым и стоил много денег. Но успел устареть и перестал решать бизнес-задачи. Нужен был интернет-магазин кондитерских изделий с акцентом на то, что Сладуница — не просто магазин, а производитель.

Ну и самое любимое — горящие сроки еще до запуска проекта. Сезон для кондитеров начинается осенью. Разработку мы начали в середине июня. Чтобы ускорить релиз, мы оптимизировали объем аналитики, а разработку решили разбить на этапы.
Кожевина Анна
Аккаунт-директор
Заказчики часто просят запустить сайт как можно быстрее. Очевидное решение — запускать проект поэтапно. Первый релиз сделать с минимально-необходимым функционалом, а дальше постепенно развивать проект — классический SCRUM. При таком подходе мы наращиваем функциональность небольшими итерациями и раз в 2−4 недели выпускаем новую версию, постепенно улучшая продукт для пользователей.

Иногда можно дополнительно оптимизировать сроки за счет использования наработок, которые есть у заказчика. Можно упрощать какие-то этапы. Например, на этапе агрегации требований для «Сладуницы» мы по-максимуму использовали материалы маркетинговых исследований заказчика.
При этом было важно запустить сайт не как MVP (минимальный жизнеспособный продукт), а как MLP (минимальный привлекательный продукт). Так что упор был на юзабилити и дизайн страниц, которые шли в работу на каждом этапе.

Как сделать сайт производителя еды более продающим? Очевидно — показать продукцию как можно аппетитнее. Уже с первого блока главной страницы надо дать пользователю возможность перейти в каталог и быстро купить вкусняшку, которую ему захотелось съесть :)
В промоблоке на главной странице — акцент на продукцию. Чтобы показать, что у конфетки внутри — мы придумали анимацию, где по шагам разворачиваем каждую.
Глеб
Дизайнер
На этапе брейншторма у нас появилась идея сделать так называемую «крафтовую» покадровую анимацию разворачивания и сворачивания конфеты. Чтобы посмотреть, как это будет выглядеть вживую, решили сделать пробную версию такой анимации на примере реального продукта.

В общем, я пошел на кухню, взял пару конфет и кухонный нож, попросил у коллеги чистый лист А4, принес лампу на штативе, достал мобильный телефон и начал процесс:

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

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

Потом то же самое было проделано еще с 5-ю конфетами, но это уже совсем другая история: D
лето сочи
Чтобы усилить эффект — проиллюстрировали начинки параллаксом. Их много, и при добавлении новой конфеты их можно легко выбирать из админ-панели. В сайт «зашито» 17 (семнадцать!) вкусов:
Плюс к каждой начинке можно добавить шоколад или использовать шоколад отдельно.

Чтобы согласовать, как будут выглядеть конфеты на сайте, нам потребовалось несколько итераций. Мы хотели сделать акцент на натуральность: в первой версии дизайна показывали текстуру конфет, пористость, раскрошенный шоколад. У заказчика в голове, напротив, была идеально отфотошопленная картинка: «Фотографии должны быть лучше. Без мятых упаковок, а в разрезе — без поломанного шоколада. Именно от этого визуала зависит „съедобность“ конфетки».
лето сочи
Согласовали идеальную картинку для одной из конфет. Подготовили техническое задание на фотосъемку всей продукции. Фотосъемка далась не просто. Как для нас, так и для фотографов. Мы боролись за каждую конфетку и отдельно принимали каждую фотографию. Точнее — писали к ней правки и просили сделать новую, с учетом комментариев. Писали многостраничные инструкции:
лето сочи
Даже рисовали на бумаге: как выставить угол камеры, как поставить на штатив и в какое место нужно класть конфетку.
лето сочи
Готовые фотографии дополнительно обрабатывали, чтобы все фото на сайте были в едином стиле.
лето сочи
До и после обработки
Второй важный момент в дизайне — преемственность. Ее создали за счет фирменного паттерна на разных подложках, морфов и цветового кодирования. Каждая категория продукции обозначена своим цветом. Везде, где для продукта используется подложка, она соответствует цвету категории.
лето сочи
Когда мы рисовали дизайн, у нас была идея: при наведении на карточку товара показывать конфеты в развёрнутом виде. Чтобы ее воплотить, заказчик сфотографировал весь ассортимент конфет в двух состояниях: в фантике и развернутые: разрезанные пополам, чтобы показать начинку. На этапе верстки мы сохранили эти фотографии в формат png и с помощью CSS свойства (filter: drop-shadow ();) сделали тени. За счет этого тени вышли максимально однотипными, а ретушь фотографий получилось значительно упростить.
лето сочи
Дарья
Frontend-разработчик
На этом проекте я особое внимание уделила проработке анимации. Современные технологии дают верстальщику очень богатые возможности в этом плане. Не удивительно, что сегодня web привык к анимации.

Но тут есть очень тонкая грань. Эффекты на сайте — как соль в блюде. Добавишь мало, сайт будет скучным, пресным. Добавишь слишком много… Тоже ничего хорошего.

Анимационные эффекты должны гармонично вписываться в дизайн, улучшая юзабилити и не жертвуя производительностью. Анимация не должна быть раздутой, раздражать и отвлекать пользователя. По-моему, «Сладуница» в этом плане получилась очень хорошей.
На аналитике мы выдели две основные целевые аудитории для сайта: людей, которые покупают конфеты для себя, и менеджеров по закупкам в торговых сетях. Важно было, чтобы сайт именно продавал, а не служил просто витриной. Поэтому в первый этап разработки мы забрали только главную страницу, каталог, корзину и оформление заказа. Все контентные страницы сделали сперва по единому шаблону — типовой текстовой страницы.

Товары должны были как-то появиться на сайте. Заказчик не успел привести в порядок 1С, она находилась в процессе настройки. Сайт надо было запускать без интеграции, а интеграцию с ERP оставить на второй этап.

Вариант ручного ведения каталога через админ-панель откинули как излишне трудоемкий для заказчика (выделенного сотрудника для этой задачи не было). Нам пришлось экстренно подбирать решение, которое автоматически загрузит каталог на сайт, без усилий контент-менеджера. В итоге решили сделать загрузку товаров в каталог из файла с помощью модуля Битрикса «Экспорт/Импорт товаров в Excel».

Для первичной загрузки каталога мы подготовили таблицу в Excel со всеми свойствами всех товаров. Сладости могут быть в разной фасовке (кому-то 200 грамм уже много, а кому-то — мало и пары килограмм) — это тоже учли. Загрузка прошла успешно.
лето сочи
Елена
Руководитель проекта
Уже после запуска проекта мы добавили: скидки, акции, блог, индивидуальные шаблоны для контентных страниц. Делаем интеграцию с ERP. Сейчас сайт уже запущен, скорость публикации новых релизов сократили до раза в 2-3 месяца, чтобы заказчик успевал обрабатывать аналитику и приоритезировать бизнес-задачи с её учетом.

А ещё мне нравится птичка-лоадер, которую мы сделали для сайта 🥰
лето сочи

Готовый проект