Кейс Simple.ru: как мы онлайн-дизайн-конструктор разрабатывали

Михаил Богунов

Менеджер проектов, EMAILMATRIX

Очень важно слышать своих потребителей и предлагать им релевантный инструмент для решения проблем. Одному из наших клиентов в этом помог онлайн-дизайн-конструктор. Про него и пойдёт речь.

О клиенте и задаче

В октябре 2017 года к нам обратилась компания Simple — один из крупнейших импортёров и дистрибьюторов вина на российском рынке. Она предоставляла услугу по брендированию этикеток на бутылках: клиент мог разработать свою этикетку вместе с дизайнером. Но была проблема: компании не всегда удавалось попасть под потребности клиента. В связи с этим коллеги из Simple заказали у нас разработку онлайн-дизайн-конструктора, который позволил бы клиентам самим нарисовать этикетку.

Проект должен был решить следующие задачи:

1. Дать клиентам возможность попробовать себя в роли дизайнера и реализовать свои фантазии самостоятельно. Это помогло бы оптимизировать работу, т. к. клиент приходил бы уже с полноценным макетом этикетки, готовым для печати.
2. Прокачать имидж компании: нестандартный полезный проект дополнительно продвинул бы компанию на рынке.

Разработка онлайн-дизайн-конструктора

Мы создали конструктор, в котором пользователь может визуализировать свою идею. Шаг за шагом он разрабатывает этикетку либо на основе готовых макетов, либо руководствуясь исключительно своей фантазией. Конструктор позволяет создать полноценный макет этикетки, готовый для печати, и увидеть с помощью 3D-модели, как она будет смотреться на бутылке.

Создание макета этикетки в конструкторе происходит в пять этапов.

• 1. Выбор типа напитка

  На этом этапе пользователь выбирает напиток и соответствующую ему форму бутылки. На выбор пять вариантов: две бутылки с вином, виски, коньяк, игристое.

  

• 2. Выбор типа этикетки

  На этом этапе можно выбрать вид этикетки — цельную или составную.

  

• 3. Дизайн этикетки

  Основной этап. Здесь пользователь создаёт этикетку с нуля или выбирает и дорабатывает один из готовых макетов. Мы предоставили клиенту площадку для реализации любых творческих идей. Он может:

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

  Техническая часть:

  Перед нами стояла задача дать пользователю возможность подготовить пригодный для печати макет. Для этого нужно было предусмотреть автоматизированную предпечатную подготовку. Поэтому конструктор работает на HTML5 Canvas — это было единственным подходящим решением для нашей задачи. А чтобы при печати изображение оставалось качественным, большая часть заготовок и объектов хранятся в векторном формате (svg).

  Если пользователь загрузит растровое изображение, конструктор проследит, чтобы его качество при заданном размере было оптимальным для печати. В противном случае пользователь увидит предупреждение:

  Растровое изображение представляет из себя сетку точек разных цветов.
  При увеличении такое изображение сильно теряет в качестве.

  

  Отдельно стоит упомянуть работу с текстом. Обычный веб-подход с подключением шрифта годится для создания макета. Но при попытке открыть получившийся макет на другом устройстве шрифт будет изменён на стандартный либо же вы получите разночтения в рендеринге. То же самое произойдёт и при обработке данных о макете на стороне сервера. Всё это может совершенно сломать наш дизайн-макет.

  Рендеринг (отрисовка) — преобразование математического описания или кода в графическое изображение.

  Чтобы избежать этого, конструктор преобразует написанный текст в специальные векторные объекты — кривые. Так текст отображается одинаково на любом устройстве или сервере.

  Ещё одна интересная особенность — возможность указать тип нанесения элементов изображения на этикетку: конгрев, УФ-лакировка, тиснение фольгой. Для каждого из типов нанесения конструктор формирует свой макет. Каждый из них содержит только те элементы, которые необходимо нанести выбранным способом. Помимо этого конструктор формирует общий макет для цифровой печати.

• 3.1. Дизайн этикетки. Предпросмотр

  На этом этапе пользователь видит итоговую этикетку на 3D-модели бутылки.

  

  Техническая часть:

  Чтобы модель смотрелась реалистичнее, при разработке конструктора нам нужно было правильно прописать параметры материалов: шероховатости, отражения, цвета и т. д. Но тогда мы заметили, что свет, падающий на этикетку, сильно искажал цвета: изображение по центру становилось более ярким. Из-за этого белый цвет и светло-серый сливались, а ближе к краям появлялись тени. Элементы этикетки сливались с фоном и плохо читались. Поэтому мы сделали так, чтобы её цвета отображались без учёта света. Сама же бутылка и остальные декоративные элементы (пробка, жидкость, фольга) отображаются с учётом всех источников света, падения теней, окружения и т. д.

• 4. Выбор сорта напитка и калькулятор стоимости

  На этом этапе пользователь:

  • выбирает сорт напитка, если на первом этапе выбрано вино или игристое;
  • выставляет желаемую цену напитка и количество необходимых брендированных бутылок;
  • рассчитывает стоимость всего заказа.
  

  Пример расчёта стоимости заказа с бутылками вина

• 5. Подтверждение

  На последнем этапе пользователь должен оставить свои контакты, чтобы оформить заявку на брендирование. После её оформления он увидит ссылку на pdf-файл, который будет содержать общее описание заказа и итоговое изображение этикетки.

  

  Финальный экран с формой заявки

  Техническая часть:

  Когда клиент оформит заказ, конструктор формирует финальные pdf-файлы для клиента и менеджера. Менеджер получает автоматическое письмо со ссылкой на этот файл, в котором прописаны все вводные:

  • контакты пользователя;
  • тип напитка;
  • объём партии и стоимость напитка;
  • подготовленные макеты этикетки, разделённые по типу нанесения.

Итоги реализации

Онлайн-дизайн-конструктор стал площадкой, которая позволяет клиенту самостоятельно реализовать свои идеи и фантазии. Он оптимизировал работу Simple, ведь теперь клиенты приходят уже с собственными наработками и макетами для печати.

Благодаря конструктору брендирование этикеток на бутылках стало более удобным. Это привлекло внимание к услуге и сделало её более популярной. Конструктор помог прокачать имидж компании, закрепить отношения с текущими клиентами и привлечь новых.

Слушайте своих клиентов и упрощайте их взаимодействие с вашим брендом. А если вам нужна помощь с разработкой спецпроектов, обращайтесь к нам. Будем рады помочь.