«Печать нового поколения». Приложение для студии печати на одежде, которое я создаю вместе с админ-панелью. В одном продукте соединяю выбор вещи, мобильный конструктор и расчёт стоимости.
В разработке
Проект в разработке. Страница будет обновляться по мере его развития.
У студии уже были рабочие процессы и старая CRM, а приложения ещё не было. На встрече с основателем разобрали, как устроена работа, какие есть сложности и что хочется изменить. Я предложил решение: приложение для подготовки заказа и админ-панель для работы студии.
Я разработчик цифровых продуктов. В PNG отвечаю за весь путь от задачи бизнеса до реализации: предложил решение, сам создал первые логические макеты в Figma и начал поэтапно собирать приложение и админ-панель. По ходу работы развиваю сценарии, логику и дизайн.
Проверяю продукт со стороны пользователя: понятность действий, переходы, анимации и детали интерфейса. ИИ использую как один из инструментов, который ускоряет реализацию.
Мои ранние прототипы в Figma: каркас, фирменный концепт и конструктор
В основе приложения — путь человека, который хочет напечатать свою идею на одежде. Он выбирает основу, собирает макет и видит расчёт стоимости в том же приложении.
В каталоге можно выбрать модель, цвет и размер: футболку, толстовку, лонгслив или другую основу для печати. Предусмотрен и вариант со своей вещью. Выбранная модель становится основой макета в конструкторе.
Конструктор — главная возможность PNG App. Вокруг него строится весь путь: выбрать вещь, подготовить изображение, собрать свой макет, увидеть результат и рассчитать стоимость.
В конструктор можно добавить изображение, текст или графику. Элементы размещаются отдельными слоями: их можно двигать, поворачивать, масштабировать и дублировать. Отмена и повтор действий помогают пробовать разные варианты.
Меню добавления соединяет тренды и свои изображения с редактором. Можно выбрать готовую идею или добавить фото, кадрировать его, применить стиль и настроить цвет, яркость и контраст перед размещением на вещи.
Для каждой стороны вещи создаётся свой макет. Можно переключаться между передом, спиной и рукавами. Размер принта показан в сантиметрах, а границы области нанесения помогают проверить размещение.
После работы в редакторе собирается брендированное превью: вещь с принтами показана с разных сторон, с обозначением мест нанесения и фирменным оформлением PNG. Превью можно сохранить или поделиться им.
В производственный пакет планирую включить это превью и исходный файл изображения. Печатник получит наглядный результат размещения принта и оригинал для работы с печатью.
Брендированное превью макета
В печати много идей приходит из Instagram, других соцсетей и повседневной жизни: подарки близким, любимые фотографии, надписи и визуальные приёмы. Я учёл это в приложении и собрал популярные идеи в готовые шаблоны.
Для старта есть ПАПА / PAPA / DAD, «Фото и отчество» и «Полароид». Пользователь подставляет свои фото и текст — и получает личный принт без необходимости собирать всё с нуля. Дальше можно продолжить работу в конструкторе, сохранить макет, переименовать и открыть его позже.
Стоимость складывается из выбранной вещи, печати на каждой стороне и тиража. Для печати важен размер самого макета: приложение учитывает его ширину и высоту в сантиметрах и подбирает подходящий формат.
Когда пользователь меняет масштаб принта в конструкторе, меняются его размеры на вещи. Приложение пересчитывает формат печати и стоимость. Так можно подобрать размещение и размер, сразу видя, как это влияет на расчёт.
Готовый вариант можно добавить в корзину и проверить состав заказа. В корзине доступны количество, комментарий и возвращение к правкам макета.
В работе над конструктором важно то, что происходит между большими экранами: как выбирается объект, где появляются инструменты, что меняется при переключении стороны и как вернуться к предыдущему действию.
Поэтому я проверяю сценарии целиком и дорабатываю поведение интерфейса вместе с визуалом. Размеры элементов, расположение действий, переходы и анимации — часть этой работы.
Параллельно с приложением создаю админ-панель. В ней собираю обзор бизнеса, работу с заказами, производство и аналитику. Это вторая часть PNG: приложение помогает человеку подготовить заказ, а админ-панель — студии организовать дальнейшую работу.
Сейчас развиваю интерфейс и рабочие сценарии. Дальше — связать панель с приложением, подготовить рабочее место печатника и интеграцию с Bitrix.
Выберите период, чтобы увидеть, как развивался проект.
Октябрь
Нынешний интерфейс
Новый дизайн стал основным. Продолжил работу над макетами и сценарием подготовки заказа. Логику и внешний вид дорабатываю вместе, сохраняя единый путь внутри приложения.
Развиваю PNG как связанный продукт для человека, который готовит заказ, и студии, которая воплощает его в печати.
- Приложение для подготовки заказа. Выбрать вещь, собрать свой макет, увидеть превью и рассчитать стоимость — в одном понятном сценарии.
- Админ-панель для студии. Работать с заказами, организовывать производство и видеть показатели бизнеса в одном месте.
- Производство. Отдельная система, в которую будут поступать заказы. На планшете у каждого сотрудника появится задача с вещью, макетом и параметрами печати. Выполнив работу, он отметит готовность и передаст заказ на следующий этап. Следующий сотрудник заранее увидит, что к нему поступает, — от подготовки вещи и печати до упаковки и выдачи.
- Путь от идеи до печати. Приложение, админ-панель и производство объединятся в один процесс. Подготовленный в приложении заказ с параметрами вещи, брендированным превью и исходными изображениями поступит в студию и пройдёт все этапы до готовой вещи и выдачи клиенту.