Разработка сервиса для создания алмазной мозаики по фото для бренда «Алмазный ряд»

Главное о кейсе

Разработали сервис, в котором пользователь за считанные секунды может создает алмазную мозаику по своему фото.

————
This project included developing an online service able to generate diamond puzzle painting patterns form uploaded images or photographs.

Как проект изменил жизнь пользователей

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

————
The pattern is generated online within seconds. Users have the flexibility to edit it, use the website to mark which parts of the puzzle are completed, or receive a PDF instruction manual via email.

Бизнес-задача и ее решение

Создать онлайн-генератор схем для алмазной мозаики. Основные пожелания заказчика — не более 20% одного цвета в итоговой схеме и возможность создания интерактивной инструкции. Команда Red Collar разработала frontend и backend-части сайта.

————
The objective was to create an online pattern generator for diamond puzzle paintings. The primary requirement from the client were to ensure that no more than 20% of a single color appears in the final pattern. Another requirement was to provide them with the capability to create an interactive instruction guide. The Red Collar team developed both the frontend and backend of the website.

Крафт (мастерство), реализация, технические детали

Алгоритм преобразования растрового изображения в схему команда Red Collar разработала с нуля — на рынке нет решений, подобных этому, и мы не можем рассказывать его детали в соответствии с NDA.

Если коротко: алгоритм «прогоняет» картинку по нескольким этапам и выдает мозаику в одном из трех стилей, который выбрал пользователь: ч/б, винтаже или поп-арте.

Также мы написали интерактивную инструкцию и функции редактирования.

Стек: Typescript, React, PHP.

————
The algorithm for transforming a raster image into a pattern was developed entirely from scratch by the Red Collar team. Additionally, we implemented an interactive instruction guide and editing functions.

The frontend was developed using pure JavaScript with the React library and TypeScript. The backend was written in PHP.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

В отличие от конкурентов, на сайте «Алмазного ряда» генерация схемы для мозаики происходит прямо на фронтенде. Так пользователь получает изображение за считанные секунды, значок загрузки даже не успевает появиться. На сайтах конкурентов процесс может занимать до 10 минут.

Решение сэкономило время на разработку, а теперь экономит и время пользователей.

————
Unlike competitors, on the "Diamond Row" website, the majority of pattern generation occurs on the frontend. This decision not only saved development time but also significantly accelerated the generation of patterns from photographs. This process now takes fractions of a second, whereas competitors may have taken several minutes for the same task

Прочая информация о кейсе

Отдельно отметим, что команда Red Collar отвечала только за разработку, дизайн создавался на стороне клиента. Изображения ниже демонстрируют не визуал, а процесс, функционирование которого мы обеспечили.

————
It should be noted separately that the Red Collar team was responsible only for development, while the design was created on the client's side. The images below demonstrate not the visual aspect, but the process, the functioning of which we ensured.

Скриншоты