Кондитерская
фабрика
«Сладуница»
фабрика
«Сладуница»
Сайт с фокусом на продукции
Кондитерская
фабрика
«Сладуница»
Сайт с фокусом на продукции
После разработки первого проекта многие заказчики приходят к нам за вторым и третьим. Так было и в этот раз. В 2017 году мы разработали сайт для бренда деревянных пазлов DaVICI, а в конце 2020-го сделали его редизайн. Заказчик пришел к нам за еще одним сайтом для своей группы компаний, в это раз — для кондитерской фабрики.
Сладуница — известный производитель сладостей из Омска и лидер кондитерского производства в Сибири. Продукция фабрики представлена в 65+ регионах России, ближнего и дальнего зарубежья. Кстати, на нашей офисной кухне конфеты «Сладуница» появились задолго до старта проекта. Они одни из самых вкусных.
Когда заказчик пришел к нам, у него уже был промосайт, причем сделанный известной студией и взявший несколько наград в конкурсах. Сайт был клевым и стоил много денег. Но успел устареть и перестал решать бизнес-задачи. Нужен был интернет-магазин кондитерских изделий с акцентом на то, что Сладуница — не просто магазин, а производитель.
Ну и самое любимое — горящие сроки еще до запуска проекта. Сезон для кондитеров начинается осенью. Разработку мы начали в середине июня. Чтобы ускорить релиз, мы оптимизировали объем аналитики, а разработку решили разбить на этапы.
Ну и самое любимое — горящие сроки еще до запуска проекта. Сезон для кондитеров начинается осенью. Разработку мы начали в середине июня. Чтобы ускорить релиз, мы оптимизировали объем аналитики, а разработку решили разбить на этапы.
Кожевина Анна
Аккаунт-директор
Заказчики часто просят запустить сайт как можно быстрее. Очевидное решение — запускать проект поэтапно. Первый релиз сделать с минимально-необходимым функционалом, а дальше постепенно развивать проект — классический SCRUM. При таком подходе мы наращиваем функциональность небольшими итерациями и раз в 2−4 недели выпускаем новую версию, постепенно улучшая продукт для пользователей.
Иногда можно дополнительно оптимизировать сроки за счет использования наработок, которые есть у заказчика. Можно упрощать какие-то этапы. Например, на этапе агрегации требований для «Сладуницы» мы по-максимуму использовали материалы маркетинговых исследований заказчика.
Иногда можно дополнительно оптимизировать сроки за счет использования наработок, которые есть у заказчика. Можно упрощать какие-то этапы. Например, на этапе агрегации требований для «Сладуницы» мы по-максимуму использовали материалы маркетинговых исследований заказчика.
При этом было важно запустить сайт не как MVP (минимальный жизнеспособный продукт), а как MLP (минимальный привлекательный продукт). Так что упор был на юзабилити и дизайн страниц, которые шли в работу на каждом этапе.
Как сделать сайт производителя еды более продающим? Очевидно — показать продукцию как можно аппетитнее. Уже с первого блока главной страницы надо дать пользователю возможность перейти в каталог и быстро купить вкусняшку, которую ему захотелось съесть :)
Как сделать сайт производителя еды более продающим? Очевидно — показать продукцию как можно аппетитнее. Уже с первого блока главной страницы надо дать пользователю возможность перейти в каталог и быстро купить вкусняшку, которую ему захотелось съесть :)
В промоблоке на главной странице — акцент на продукцию. Чтобы показать, что у конфетки внутри — мы придумали анимацию, где по шагам разворачиваем каждую.
Глеб
Дизайнер
На этапе брейншторма у нас появилась идея сделать так называемую «крафтовую» покадровую анимацию разворачивания и сворачивания конфеты. Чтобы посмотреть, как это будет выглядеть вживую, решили сделать пробную версию такой анимации на примере реального продукта.
В общем, я пошел на кухню, взял пару конфет и кухонный нож, попросил у коллеги чистый лист А4, принес лампу на штативе, достал мобильный телефон и начал процесс:
Все эти фотографии скинул на компьютер, отделил изображения конфет от фона, покадрово анимировал разворачивание и наложил его на интерфейс дизайна главной страницы. Получилось круто!
Потом то же самое было проделано еще с 5-ю конфетами, но это уже совсем другая история: D
В общем, я пошел на кухню, взял пару конфет и кухонный нож, попросил у коллеги чистый лист А4, принес лампу на штативе, достал мобильный телефон и начал процесс:
- освободил соседний стол, положил на него лист, отметил на нем карандашом прямоугольник, где должна лежать конфета, включил лампу, положил конфету, сделал первое фото;
- надорвал упаковку конфеты по краям, сделал второе фото;
- вытащил конфету из упаковки — сделал третье;
- разрезал конфету пополам — сделал четвертое;
- выдвинул половинки конфет начинкой в сторону камеры и сделал пятое.
Все эти фотографии скинул на компьютер, отделил изображения конфет от фона, покадрово анимировал разворачивание и наложил его на интерфейс дизайна главной страницы. Получилось круто!
Потом то же самое было проделано еще с 5-ю конфетами, но это уже совсем другая история: D
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild3564-6439-4438-b261-336364646362__-__empty________.jpg)
Чтобы усилить эффект — проиллюстрировали начинки параллаксом. Их много, и при добавлении новой конфеты их можно легко выбирать из админ-панели. В сайт «зашито» 17 (семнадцать!) вкусов:
Плюс к каждой начинке можно добавить шоколад или использовать шоколад отдельно.
Чтобы согласовать, как будут выглядеть конфеты на сайте, нам потребовалось несколько итераций. Мы хотели сделать акцент на натуральность: в первой версии дизайна показывали текстуру конфет, пористость, раскрошенный шоколад. У заказчика в голове, напротив, была идеально отфотошопленная картинка: «Фотографии должны быть лучше. Без мятых упаковок, а в разрезе — без поломанного шоколада. Именно от этого визуала зависит „съедобность“ конфетки».
Чтобы согласовать, как будут выглядеть конфеты на сайте, нам потребовалось несколько итераций. Мы хотели сделать акцент на натуральность: в первой версии дизайна показывали текстуру конфет, пористость, раскрошенный шоколад. У заказчика в голове, напротив, была идеально отфотошопленная картинка: «Фотографии должны быть лучше. Без мятых упаковок, а в разрезе — без поломанного шоколада. Именно от этого визуала зависит „съедобность“ конфетки».
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild6633-6532-4530-b232-616131323165__-__empty___.png)
Согласовали идеальную картинку для одной из конфет. Подготовили техническое задание на фотосъемку всей продукции. Фотосъемка далась не просто. Как для нас, так и для фотографов. Мы боролись за каждую конфетку и отдельно принимали каждую фотографию. Точнее — писали к ней правки и просили сделать новую, с учетом комментариев. Писали многостраничные инструкции:
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild3063-3664-4432-b832-366638396432__-__empty___.png)
Даже рисовали на бумаге: как выставить угол камеры, как поставить на штатив и в какое место нужно класть конфетку.
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild6361-3838-4631-b865-656530396337__-__empty_____.png)
Готовые фотографии дополнительно обрабатывали, чтобы все фото на сайте были в едином стиле.
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild3664-3865-4366-b766-383232656637__-__empty__photo.png)
До и после обработки
Второй важный момент в дизайне — преемственность. Ее создали за счет фирменного паттерна на разных подложках, морфов и цветового кодирования. Каждая категория продукции обозначена своим цветом. Везде, где для продукта используется подложка, она соответствует цвету категории.
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild6333-6532-4165-b834-643664646531__-__empty__photo.png)
Когда мы рисовали дизайн, у нас была идея: при наведении на карточку товара показывать конфеты в развёрнутом виде. Чтобы ее воплотить, заказчик сфотографировал весь ассортимент конфет в двух состояниях: в фантике и развернутые: разрезанные пополам, чтобы показать начинку. На этапе верстки мы сохранили эти фотографии в формат png и с помощью CSS свойства (filter: drop-shadow ();) сделали тени. За счет этого тени вышли максимально однотипными, а ретушь фотографий получилось значительно упростить.
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild3065-3533-4635-b733-316665326334__-__empty_______2___png_____.png)
Дарья
Frontend-разработчик
На этом проекте я особое внимание уделила проработке анимации. Современные технологии дают верстальщику очень богатые возможности в этом плане. Не удивительно, что сегодня web привык к анимации.
Но тут есть очень тонкая грань. Эффекты на сайте — как соль в блюде. Добавишь мало, сайт будет скучным, пресным. Добавишь слишком много… Тоже ничего хорошего.
Анимационные эффекты должны гармонично вписываться в дизайн, улучшая юзабилити и не жертвуя производительностью. Анимация не должна быть раздутой, раздражать и отвлекать пользователя. По-моему, «Сладуница» в этом плане получилась очень хорошей.
Но тут есть очень тонкая грань. Эффекты на сайте — как соль в блюде. Добавишь мало, сайт будет скучным, пресным. Добавишь слишком много… Тоже ничего хорошего.
Анимационные эффекты должны гармонично вписываться в дизайн, улучшая юзабилити и не жертвуя производительностью. Анимация не должна быть раздутой, раздражать и отвлекать пользователя. По-моему, «Сладуница» в этом плане получилась очень хорошей.
На аналитике мы выдели две основные целевые аудитории для сайта: людей, которые покупают конфеты для себя, и менеджеров по закупкам в торговых сетях. Важно было, чтобы сайт именно продавал, а не служил просто витриной. Поэтому в первый этап разработки мы забрали только главную страницу, каталог, корзину и оформление заказа. Все контентные страницы сделали сперва по единому шаблону — типовой текстовой страницы.
Товары должны были как-то появиться на сайте. Заказчик не успел привести в порядок 1С, она находилась в процессе настройки. Сайт надо было запускать без интеграции, а интеграцию с ERP оставить на второй этап.
Вариант ручного ведения каталога через админ-панель откинули как излишне трудоемкий для заказчика (выделенного сотрудника для этой задачи не было). Нам пришлось экстренно подбирать решение, которое автоматически загрузит каталог на сайт, без усилий контент-менеджера. В итоге решили сделать загрузку товаров в каталог из файла с помощью модуля Битрикса «Экспорт/Импорт товаров в Excel».
Для первичной загрузки каталога мы подготовили таблицу в Excel со всеми свойствами всех товаров. Сладости могут быть в разной фасовке (кому-то 200 грамм уже много, а кому-то — мало и пары килограмм) — это тоже учли. Загрузка прошла успешно.
Товары должны были как-то появиться на сайте. Заказчик не успел привести в порядок 1С, она находилась в процессе настройки. Сайт надо было запускать без интеграции, а интеграцию с ERP оставить на второй этап.
Вариант ручного ведения каталога через админ-панель откинули как излишне трудоемкий для заказчика (выделенного сотрудника для этой задачи не было). Нам пришлось экстренно подбирать решение, которое автоматически загрузит каталог на сайт, без усилий контент-менеджера. В итоге решили сделать загрузку товаров в каталог из файла с помощью модуля Битрикса «Экспорт/Импорт товаров в Excel».
Для первичной загрузки каталога мы подготовили таблицу в Excel со всеми свойствами всех товаров. Сладости могут быть в разной фасовке (кому-то 200 грамм уже много, а кому-то — мало и пары килограмм) — это тоже учли. Загрузка прошла успешно.
![лето сочи](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1637834398/tild3563-3233-4430-a162-363363333966__-__empty__2.png)
Елена
Руководитель проекта
Уже после запуска проекта мы добавили: скидки, акции, блог, индивидуальные шаблоны для контентных страниц. Делаем интеграцию с ERP. Сейчас сайт уже запущен, скорость публикации новых релизов сократили до раза в 2-3 месяца, чтобы заказчик успевал обрабатывать аналитику и приоритезировать бизнес-задачи с её учетом.
А ещё мне нравится птичка-лоадер, которую мы сделали для сайта 🥰
А ещё мне нравится птичка-лоадер, которую мы сделали для сайта 🥰