Кейс для «Печатника»
Печать 360°
Упаковал круговую печать как отдельное направление. Посетитель может рассмотреть рисунок на стекле со всех сторон, примерить свой дизайн и оценить стоимость тиража.
Задача и моя роль
Как показать печать по окружности через экран?
На одном снимке видно лишь часть рисунка. А заказчику корпоративных подарков нужно представить весь орнамент, понять, как он выглядит на стекле, и прикинуть бюджет.
Я сформулировал предложение, спроектировал путь пользователя, собрал визуальную систему и разработал адаптивный лендинг. В основе — один понятный сценарий: посмотреть примеры, примерить свой рисунок, рассчитать тираж.
- Концепция и структура
- Веб-дизайн
- 3D и взаимодействия
- Разработка и публикация
Веб-дизайн в действии
Попробуйте интерфейс
Здесь работают те же блоки, что на опубликованном сайте. Выберите экран и посмотрите, какую задачу он решает.
Первый экран знакомит с продуктом
Наведите курсор на миниатюру или коснитесь её: главный кадр меняется на месте. Гость сразу видит, как по-разному одна форма работает с фирменным цветом и орнаментом.
Выбор цвета через движение
Наведите курсор на соседний шар, нажмите стрелку или проведите пальцем вбок. Активный цвет выходит на передний план. Его можно сразу перенести в 3D-примерку.
Фото, развёртка и объём в одном блоке
Смените пример под фотографией: вместе с кадром меняются плоский рисунок и 3D-модель. Так видно, где рисунок уходит за изгиб шара.
Свой рисунок можно проверить сразу
Поверните модель и сравните отражения на глянце и мате. Загрузите PNG или JPEG, чтобы проверить композицию, границы печати и масштаб. Макет остаётся в браузере.
Тираж превращается в конкретный запрос
Измените количество наборов: калькулятор выберет тариф по общему числу шаров. Можно проверить и текст заявки, который покупатель увидит перед отправкой.
Визуальное решение
Фактура стекла задаёт тон
Для витрины я выбрал светлый фон и крупные предметные кадры. Контрастный синий связывает интерфейс с орнаментом «Печатника».
В 3D я отдельно проработал стекло, рельеф колпачка и зону печати. Вращение показывает, как рисунок огибает шар, а свет подчёркивает разницу между глянцем и матом.
Дизайнер может скачать шаблон, а закупщик — сверить цвет основы с фото и оценить стоимость тиража.
Опубликованный проект
Попробуйте весь сценарий
Выберите шар, загрузите рисунок и посмотрите, как меняется стоимость при разном тираже.
Из портфолио
Похожие задачи
Три проекта на стыке мерча, веб-дизайна и продаж: показать продукт в движении, объяснить производство и дать клиенту самому рассчитать нанесение.
Мерч в момент
Видео, анимация при прокрутке и галерея показывают, как работает персонализация мерча на мероприятиях.
Смотреть кейс ↗
КРАСНО
Сайт студии связывает технологии нанесения, готовые работы и каталог мерча.
Смотреть кейс ↗
POP Gifts
Каталог помогает выбрать корпоративный мерч под бюджет и рассчитать товар с нанесением.
Смотреть кейс ↗