Игорь
Истомин
ux/ui дизайнер
Проектирую интерфейсы, которыми пользуются миллионы. 13 лет в дизайне. Веб и мобильные продукты: телеком, личные кабинеты, платежи, корпоративные сайты
Подробнее обо мне
Смотреть проекты
UX/UI
Figma
Нейросети
Tilda
Анимация
Affter Effects
Photoshop
3d-графика
Генерирую визуалы, исследую идеи и ускоряю работу над проектами
Дизайн в работающие сайты с адаптивной вёрсткой и анимацией
Продумываю сценарии и создаю интерфейсы, в которых легко разобраться
Макеты, интерактивные прототипы, системные библиотеки компонентов
Чтобы интерфейс ощущался живым.
Первый экран задаёт настроение
Первый экран знакомит с направлением через название и крупный визуальный образ. Продумал иерархию заголовка и навигации: посетитель видит, какой формат открыт, и может продолжить знакомство с предложением. В видео показана подача направления «Тир».
«Экспедиция»: интерфейсы и 3D
Роль
Единственный дизайнер проекта
Объём
UX/UI, 3D-модели и анимация
Компания
Vitamin Group
Инструменты
Figma, Blender
В Vitamin Group я был единственным дизайнером проекта «Экспедиция». Разработал визуальную концепцию и интерфейсы сайта, смоделировал прицепы в Blender и создал анимацию. Объединил каталог, выбор комплектации и 3D-подачу продукта в одном визуальном языке.
expedition-pricep.ru
Задача
Помочь покупателю выбрать прицеп под свои задачи: разобраться в моделях, рассмотреть конструкцию, подобрать оборудование и перейти к заказу.
Выстроить путь от каталога до выбора комплектации и оформления заказа.
Показать технический продукт наглядно — через интерфейс, 3D-модели и движение.
Мобильная версия
Адаптировал страницы под телефон: перестроил композиции, настроил типографику и сохранил доступ к записи. Проверил, как длинные страницы, формы и анимации работают на небольшом экране
Этапы процедуры в одной сцене
Собрал этапы ухода и отбеливания в анимированную схему. Иконки, подписи и связующие линии последовательно складываются в общую композицию и показывают, из чего состоит подход клиники.
Настроил последовательность появления элементов, чтобы схему можно было прочитать по шагам.
Для нестандартного поведения блоков написал код с помощью нейросетей и встроил его в Тильду.
Каталог под разные задачи
Перейти на сайт
Решение
Разделил модели по назначению: для повседневных перевозок, коммерческих задач, лодок и другой техники. Покупатель начинает выбор со своей задачи, а не с перечня технических индексов.
В карточках сделал акцент на изображении прицепа и его назначении. Единая структура помогает просматривать ассортимент и переходить к подробностям интересующей модели.
Каталог под разные задачи
Перейти на сайт
Решение
Разделил модели по назначению: для повседневных перевозок, коммерческих задач, лодок и другой техники. Покупатель начинает выбор со своей задачи, а не с перечня технических индексов.
В карточках сделал акцент на изображении прицепа и его назначении. Единая структура помогает просматривать ассортимент и переходить к подробностям интересующей модели.
Комплектация
шаг за шагом
Спроектировал конфигуратор: параметры собраны слева, изображение прицепа и стоимость — справа. Выбор каркаса, тента и оборудования остаётся связан с тем, как выглядит итоговая комплектация.
Разбил выбор на последовательные шаги, чтобы не перегружать один экран всеми настройками.
Изображение модели помогает сопоставить опцию с её внешним видом.
Выбор, который
можно увидеть
Связал дизайн конфигуратора с 3D-визуализацией. Подготовил варианты модели с тентом и разными ракурсами: выбранная опция показана на самом прицепе, а не только строкой в списке.
Сохранил на экране выбранные параметры и стоимость, чтобы покупатель не терял контекст.
Интерфейс и 3D-графику разрабатывал вместе — как части одного сценария.
От модели
к корзине
Перейти на сайт
Решение
В карточке прицепа собрал изображение, основные характеристики, стоимость и действие заказа. Технические параметры вынес в отдельные блоки, чтобы их было удобно просматривать рядом с моделью.
Для корзины продумал список выбранных товаров: изображение, название, количество и цена. Дополнительные опции остаются рядом с тем прицепом, к которому относятся.
Детали, важные
для выбора
Разделил информацию о модели на понятные части: характеристики, комплектация, материалы и видео. Покупатель может изучать прицеп постепенно и возвращаться к заказу по ходу просмотра.
Крупная 3D-модель показывает конструкцию, а короткие блоки помогают разобраться в параметрах.
Карточка товара и корзина продолжают один сценарий выбора.
Визуальный язык бренда
Подготовил графику для дополнительных блоков сайта. Оранжевый цвет, крупная типографика и объёмные изображения связывают рекламные сообщения с основным интерфейсом и поддерживают характер «Экспедиции».
Оборудование
и оформление
Перейти на сайт
Решение
Вынес дополнительное оборудование в отдельный раздел: кузова, колёса, опоры и тенты можно рассматривать как самостоятельные товары. Для каждого подготовил визуальную подачу в общей стилистике каталога.
Оформление заказа разделил на этапы: доставка, данные получателя и дальнейшие действия. Форма продолжает покупку, а не заставляет заново разбираться в интерфейсе.
От комплектации
до заказа
Продумал связку каталога, карточки модели, оборудования и корзины. Общие правила оформления и повторяющиеся элементы сохраняют знакомую логику на каждом этапе покупки.
Выбор оборудования дополняет основной товар и не теряется среди остальных разделов.
Последовательная форма делает следующий шаг понятным.
Результат
Создал дизайн сайта «Экспедиция» и 3D-подачу продукта: интерфейсы, модели прицепов и анимацию. В Vitamin Group я отвечал за всю дизайнерскую часть проекта — от общей концепции до деталей экранов и визуальных материалов.