GruzOnline — сервис для поиска грузов и машин без посредников

На проекте

1. Сделал дизайн Android- и веб-приложения.
2. Сгенерировал логотип, доработал его вручную и согласовал с клиентом.
3. После запуска МВП встроил в пользовательские сценарии:
   • калькулятор выгоды перевозки;
   • подбор подходящих грузов и машин после создания объявления;
   • AI-помощника для поиска и создания объявлений;
   • виджет оценки привлекательности груза относительно рынка.
4. Заложил визуальную консистентность с помощью семантических переменных, компонентов и шрифтовых стилей.

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

Начал с карты экранов, которая помогла оценить объём МВП, выстроить взаимосвязь функций и продать проект.

Затем согласовал визуальное направление и приступил к проектированию интерфейсов.

Список объявлений

Объявления — основное содержимое приложения, поэтому им отведён главный экран:

При прокрутке вниз поиск и плавающая кнопка создания объявления скрываются, а при прокрутке вверх появляются обратно:

К макету приложил прототип с поведением элементов при прокрутке, но во время разработки поле поиска без согласования перенесли в верхнюю панель. Из-за этого нарушилась иерархия страницы, а поиск стал занимать место при прокрутке:

Договорился с разработчиками обсуждать спорные решения до их реализации. Начал следить за техническими обсуждениями в чате проекта, чтобы лучше понимать ограничения и статус разработки.

Без детальной аналитики препродакшн-версия карточки ожидаемо получилась далёкой от реальности:

По мере уточнения требований разделил карточку на секции: груз, маршрут и контакты. Из-за этого она визуально распалась на две части, а маршрут сместился во вторую очередь считывания:

В продакшн-версии вернул маршрут наверх, сделал карточку визуально цельной и добавил уточнённые свойства грузов и маршрутов:

Карточку спроектировал так, чтобы пользователь мог принять решение о сотрудничестве без перехода на страницу груза или машины. Например, составной маршрут можно посмотреть прямо в списке:

Как и контакты:

При необходимости можно перейти в профиль автора объявления и убедиться в его надёжности:

В веб-приложении вся информация о грузе, маршруте и контактах собрана в карточке объявления, поэтому отдельная страница не требуется:

Поиск объявлений

Грузы можно найти по названию, компании, которая разместила объявление, или пункту маршрута:

Для поиска также доступны фильтры:

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

Создание объявления

Из-за большого количества полей и отсутствия взаимовлияния между ними в мобильном приложении сделал форму пошаговой:

В веб-приложении поля расположены на одном экране и сгруппированы по смыслу:

Перед запуском МВП сгенерировал логотип и доработал его вручную

Логотип адаптируется под ширину экрана:

После запуска МВП начал встраивать функции, которые помогают быстрее находить грузы и машины

Подходящие объявления

После создания объявления о грузе приложение подбирает подходящие машины, а после создания объявления о машине — подходящие грузы:

Калькулятор выгоды

Позволяет рассчитать примерную прибыль от перевозки груза:

Выгодность груза относительно рынка

AI-помощник для поиска объявлений и их создания

Помощник рассчитан на использование водителями во время движения, поэтому основной точкой входа стал виджет, размеры и оформление которого соответствуют системным виджетам:

Помощника также можно вызвать из приложения, нажав кнопку «Штурман» в верхней панели:

По умолчанию общение с помощником происходит голосом. Он озвучивает свой ответ и автоматически начинает запись реплики пользователя, которую можно остановить и написать запрос текстом:

По мере общения помощник уточняет параметры, чтобы подобрать объявления:

Если пользователь вводит запрос, который нейросеть не распознаёт как параметр объявления, помощник подсказывает, как его скорректировать:

На страте для технического упрощения выход из режима поиска или создания объявления происходит по кнопке. Помощник подтверждает действие сообщением и озвучивает его:

Функционал помощника частично запущен в продакшн, а показанные экраны — лишь его оболочка. Основная работа команды происходит вне макетов: анализ сценариев, настройка нейросети, написание промптов, составление текстов и тестирование.

Что было самым сложным

Потребность постоянно изобретать решения на фоне тяжёлого эмоционального состояния.

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

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

Что сейчас происходит с продуктом

Приложения были опубликованы в конце 2025 и постепенно обрастают функционалом и пользователями.

На 22.07.26 мобильное приложение скачали уже 6 000 человек, средняя оценка в сторах — ★4.5.

Продолжаю поддерживать и развивать дизайн продукта в 2026.

Евгений Смирнов
Дизайнер

IceRock Development
Команда разработки

Электропочта • Телеграм

Евгений Смирнов
Выступающий

Планетарий
Сообщество творческих ребят, которые делают своё

Электропочта • Телеграм

Панда Пицца — сайт для заказа доставки пиццы, закусок, десертов и напитков.

На проекте

1. Описал путь оформления заказа и предложил, как его улучшить.
2. Собрал карту переходов нового пути, чтобы оценить масштаб работ и связать новые функции — бонусы, сторисы с акциями, отмену и оценивание заказа — с существующими.
3. Задал визуальное направление, чтобы интерфейс сайта подружился с приложением, и продукты выглядели как из одной линейки.
4. Погрузил в проект дизайнера, распланировал его работу и взял на себя арт-дирекшн.

Задача

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

Клиенту понравился результат, и он доверил мне обновление дизайна сайта. Нужно было повысить конверсию заказа, привести сайт к единому стилю с приложением и упростить поддержку дизайна.

Главная

Повысил акцент на товарах:

• Уменьшил высоту шапки, убрал заливку и навёл порядок в вёрстке.
• Уменьшил поля по краям, чтобы увеличить карточки товаров.

Вместо карусели баннеров сделал сторисы с акциями.

Новый дизайн первый в карусели:

Мобильная версия
Информацию о том, что меню и цены могут отличаться в зависимости от адреса доставки и пиццерии, разместил на странице вместо плавающего тоста:

Прокрутка меню
Фиксирую только навигацию и корзину, чтобы отдать максимум вертикального пространства товарам:

Мобильная версия

Карточка товара
Исправил тональность цены, чтобы карточка считывалась актуальной и активной.

Использовал облегчённый основной цвет вместо серого для кнопки перехода на страницу товара:

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

Выделил подзаголовки размером и жирностью вместо низкоконтрастного жёлтого.

Добавил QR-код для скачивания приложения:

Страница товара

Увеличил фото товара и добавил выбор дополнительных ингредиентов:

Была идея сделать страницу вместо модального окна, чтобы дать больше места информации о товаре и элементам управления, а также уменьшить вложенность модальных окон:

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

В мобильной версии открывается полноэкранное модальное окно

Адрес доставки и самовывоза

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

Доставка

Объединил выбор адреса доставки и пиццерии для самовывоза в одном окне, чтобы избежать двойной вложенности модальных окон.

Для добавления товара в корзину достаточно указать город, улицу и дом. Детали адреса запрашиваются в форме заказа:

При вводе адреса под полем появляются подсказки:

Если адрес не входит в зону доставки, подсвечиваю поле ошибкой после его расфокуса вместо кричащего уведомления:

Самовывоз

После указания адреса товар автоматически добавляется в корзину без необходимости повторно кликать на кнопку «В корзину»:

Мобильная версия выбора адреса доставки

Мобильная версия выбора пиццерии для самовывоза

Корзина

Сделал отдельной страницей, а не модальным окном:

При изменении ширины окна, элементы знают, как им перестроиться:

Была идея разместить корзину сбоку от меню:

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

Списание бонусов

Если пользователь авторизован, в шапке появляется баланс бонусов, которые он может списать:

Авторизация

Для оформления заказа пользователь авторизуется по номеру телефона.

Исправил низкую контрастность акцентного жёлтого и сделал тексты понятнее:

Код подтверждения
Сделал очевиднее кнопку возврата к шагу ввода телефона и автоматическую проверку кода после ввода последней цифры:

Форма заказа

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

Визуально облегчил форму:

• Разделил группы полей пространством вместо подложек.
• Поля сделал серыми подложками вместо обводки:

Было бы хорошо сохранить подписи слева от полей, как в старой форме, но:

• полей мало,
• они стоят рядом с названиями групп,
• содержимое подсказывает, что это за поле.

Поэтому оставил подписи только у полей с похожими данными — квартира, подъезд, этаж. Если расположить подписи слева, они будут без необходимости выделять эти поля на фоне остальных.

Уменьшил высоту сводки заказа и зафиксировал её при прокрутке:

Вместо общего сообщения об ошибке внизу страницы подсвечиваю красным сами поля:

Если ресторан закрыт, новый сайт предлагает сделать отложенный заказ. Вместо кнопки оплаты показывается кнопка «Указать время доставки»:

Сохранённые адреса

После оформления заказа адрес сохраняется и при следующем заказе компактнее отображается в форме:

Можно добавить несколько адресов:

Или отредактировать текущий:

Отслеживание заказа

После оплаты перенаправляем пользователя на экран заказа:

Сделал так, что на экран заказа теперь можно вернуться с главной страницы, а не искать его в истории браузера:

Добавил оценку заказа для сбора статистики и обратной связи от пользователей:

Отмена заказа
Вместо звонка в поддержку на новом сайте заказ можно отменить кнопкой:

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

Когда заказ передали курьеру, отменить его не получится. Кнопка «Отменить заказ...» меняется на информационное сообщение:

Что было самым сложным

Направлять подопечного дизайнера и в сжатые сроки отдавать результат.

Как я с этим справился
Погрузил дизайнера в проект голосом и оперативно отвечал на вопросы. Днём давал работать в тишине, вечером делал ревью и сообщал статус проджект-менеджеру. Взял на себя интерактивный прототип и визуальное направление.

Результат

Сайт запустили в срок, и люди начали заказывать еду через него.

Работая в формате аутсорса, я не имел доступа к бизнес-метрикам проекта и не мог оценить влияние нового дизайна.

Что сейчас происходит с продуктом

Я занимался дизайном сайта и поддерживал его в ходе разработки с начала до середины 2025.

В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагался whitebox-сайт.

Евгений Смирнов
Арт-директор

Марина Ткаченко
Дизайнер

IceRock Development
Команда разработки

Электропочта • Телеграм

Панда Пицца — приложение для заказа доставки пиццы, закусок, десертов и напитков.

На проекте

1. Сделал дизайн iOS-приложения с базовыми функциями: меню, оформление заказа, отслеживание статуса доставки и оценка её качества.
2. Адаптировал приложение под Android по гайдлайнам Google Material You.
3. Встроил в пользовательские сценарии промо-функции: бонусную систему, сторисы для акций и функцию рекомендации приложения друзьям.
4. Адаптировал интерфейс под новый брендинг, чтобы визуально выделить приложение среди конкурентов.

Задача

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

Чтобы уложиться в сроки и сохранить привычный для пользователей сценарий заказа еды, клиент попросил ориентироваться на приложение Додо Пиццы. Я взял его как сценарный референс и скорректировал под рамки МВП и бизнес-логику Панда Пиццы.

Доставка и самовывоз

При первом входе спрашиваем, как пользователь хочет получить заказ, чтобы показать актуальные меню и цены. Они зависят от пиццерии, обслуживающей адрес доставки или выбранной для самовывоза:

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

Если пользователь нажал «Настроить позже», он сможет вызвать системную модалку без перехода в настройки — через кнопку «Определить местоположение» на карте:

Обрезаем адрес слева, а не справа. Так в строке остаются улица и дом — часть адреса, по которой пользователь понимает, куда доставят еду:

Когда что-то идёт не так, приложение объясняет, что произошло и что делать дальше:

Самовывоз
При включённой геолокации центрируем карту относительно местоположения пользователя и показываем ближайшие пиццерии:

Меню

После выбора того, как получить заказ, пользователь попадает в меню:

Виджет адреса показывает, может ли пиццерия принять заказ:

Корзина

Изначально для ввода промокода хотел использовать модальную шторку:

При обсуждении макетов с разработчиком выяснил:

• Клавиатура сворачивается позже шторки, из-за чего конструкция распадается и анимация выглядит дёрганой.
• Чтобы подстроить высоту шторки под клавиатуру и содержимое, пришлось бы менять системное поведение.

Заменил шторку на модальное окно. При его закрытии клавиатура скрывается одновременно с ним:

Оформление заказа

При оплате заказа пользователь запускает цепочку взаимодействий между приложением, бэком и платёжной системой, но ему достаточно знать, что платёж прошёл:

Если банк отклонил платёж, запросил подтверждение или бэк долго получает данные заказа, приложение объяснит, что происходит и что делать дальше:

На проде выяснилось, что бэк может несколько минут возвращать данные заказа. Чтобы медленная система ощущалась работающей, троббер сменяется пояснением и кнопкой «Проверить статус».

Приложение само проверяет статус через заданные интервалы, но кнопка даёт пользователю возможность убедиться, что система работает:

Отслеживание заказа

Бэк может вернуть данные заказа без номера, который нужен для обращения в поддержку. Сделал так, что экран заказа открывается сразу, а номер подгружается фоном:

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

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

Оценивание заказа

Текст на странице и плейсхолдер поля меняются в зависимости от оценки. Люди любят давать советы и заодно описывают, что пошло не так:

Адаптация под Android

Клиенту понравился дизайн iOS-приложения, и в процессе разработки он также заказал версию для Android.

Интерфейс адаптировал по гайдлайнам Google Material You, чтобы сделать привычные для Android навигационные паттерны и поведение элементов управления:

После запуска МВП начал встраивать промо-функции

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

Разместил сторисы на видном месте рядом с меню, потому что они связаны с выбором товаров:

Бонусы
Для оформления заказа пользователь авторизуется по номеру телефона.

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

На главной добавил баланс бонусов, чтобы напомнить о возможности их списать и подтолкнуть заказать больше:

За скачивание приложения дают 1000 бонусов, поэтому добавил в корзину предложение авторизоваться:

После авторизации пользователь может списать бонусы:

Рекомендация друзьям

Если пользователь оценил заказ на 4—5 звёзд, на странице оценки появляется блок «Посоветуете нас?». При ответе «Да» предлагаем поделиться ссылкой на скачивание приложения:

Модальное окно — компромиссное решение. Я бы заменил его на блок, который появляется прямо на странице и продолжает сценарий.

Ребрендинг

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

Когда брендинг обновили во второй раз, адаптацию интерфейса сразу доверили мне. К тому моменту я настроил компоненты и привязал к ним семантические переменные, поэтому адаптация прошла быстро:

Результат

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

Отзыв о работе

«Мне очень нравится результат. Вы большие молодцы. Сделали ровно то, что нужно, ничего лишнего. Всё выглядит аккуратно и современно».
Руководитель проекта со стороны клиента

Что сейчас происходит с продуктом

Я занимался дизайном приложения и поддерживал его в ходе разработки с начала 2024 до середины 2025.

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

В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагалось whitebox-приложение.

Пользователям понравилось расширение функционала, но интерфейс заметно изменился:

«Новый дизайн у приложения стал интуитивно не понятным, старый мне нравился больше, анимации, цвет и так далее, жаль что поменяли дизайн приложения».
Отзыв из App Store

Евгений Смирнов
Дизайнер

IceRock Development
Команда разработки

Электропочта • Телеграм

Кампус — приложение с расписанием пар, лентой «Подслушано» и анонимными отзывами на преподавателей. Работает на Android и iOS.

Бизнес построил стратегию монетизации: увеличить количество пользователей, повысить их вовлечённость и продавать контекстуальную рекламу внутри приложения.

Мои задачи в рамках стратегии

• Визуально обновить Android-приложение, чтобы сохранить текущую аудиторию и создать основу для привлечения новой.
• Сделать ленту «Подслушано» со сторисами, чтобы повысить вовлечённость пользователей.
• Встроить рекламные блоки внутрь приложения.

Результаты бизнес-стратегии и улучшений Android- и iOS-приложения

• Раньше пользователи заходили в приложение в среднем 32 раза в месяц на 35 секунд, а стали заходить 81 раз на 39 секунд.
• Количество пользователей увеличилось с 247 000 в 2021 году до 750 000 в 2023 году.
• 244 000 активных пользователей в пиковые месяца.

Итерационно вернул Android-приложение «из прошлого века»

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

Расписание занятий

Страница занятия

Переходы к вложенным страницам сделал полноэкранными:

Избранные расписания

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

К примеру, если нужно встретиться с друзьями из другой группы или передать работу преподавателю, а его нет на кафедре:

Настройка избранных расписаний
По умолчанию избранные расписания отображаются в порядке добавления. Порядок можно изменить в настройках:

Отзывы о препродавателях

Студенты анонимно оставляют отзывы, которые помогают другим составить первое впечатление о преподавателе до пары или экзамена. Если кто-то напишет ложь, его задизлайкуют.

Страница преподавателя

Написание отзыва

Оформление

В приложении были нейтральные светлая и тёмная темы, в которых можно менять основной цвет.

В первой итерации визуального обновления сделал цветные темы, в которых палитра строилась от основного цвета. Пользователям это не зашло, особенно в тёмной теме:

• «После обновы пропала тёмная тема, вернее она осталась но это скорее голубой в темных тонах».
• «Добавьте тогда уж чёрную тему».

Поэтому вернул темы в нейтральные тона:

Я допустил ошибку, забрав у пользователей привычное оформление. Вместо этого стоило оставить нейтральные темы и добавить цветную как эксперимент.

Из-за потери времени, сложности разработки и среднего приоритета задачи мы вернулись к варианту, в котором меняется только основной цвет:

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

Лента «Подслушано»

Место, где студенты вуза делятся трешовыми историями, шутят, обсуждают моральные ценности, популяцию кенгуру и ищут вторую половинку.

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

Добавили пост дня, который выбирался среди всех вузов по количеству лайков за предыдущий день:

Закреплённая кнопка «Предложить пост» закрывала посты и создавала визуальный шум, когда появлялась или исчезала при смене направления прокрутки:

Когда появилась строка сторисов, перенёс в неё пост дня и кнопку «Предложить пост»:

К истории «Пост дня» прикрутили нейронку, которая генерировала контекстную картинку. Нейронка делала такие же трешовые картинки, как и сами посты, поэтому студенты ловили «ха-ха»:

Эту сторис для кейса сгенерировал ChatGPT в 2026 году без дополнительной настройки промпта. Получилось уже не так трешово.

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

Вывод

Я подготовил Android-приложение к привлечению новой аудитории и маркетинговой активности: обновил существующий интерфейс и добавил ленту «Подслушано» со сторисами как основу для рекламных форматов.

Заложенная мной основа помогла начать реализовывать бизнес-стратегию. Текущая продуктовая команда продолжает развивать её в новых сценариях, рекламных форматах и механиках вовлечения.

Что было самым сложным

Впервые столкнулся с обратной связью от полумиллиона пользователей, на которых раскатили обновление.

Как я с этим справился
Вместе с ЛПР собрали проблемы из отзывов пользователей, обсудили их и я внёс корректировки в дизайн.

Что сейчас происходит с продуктом

Я занимался дизайном приложения и поддерживал его в ходе разработки с середины 2022 до середины 2023.

В 2024 продукт зарабатывал и инвестировал всю прибыль в развитие.

На 2025:

• Количество пользователей iOS- и Android-приложения превысило 1 000 000.
• В среднем пользователи заходят в приложение 109 раз в месяц.
• В пиковые месяцы приложение набирало 350 000 активных пользователей.

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

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

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

На проекте

1. Собрал схему связи сервисов между собой и согласовал её с аналитиками.
2. Продумал навигационную модель интерфейса, взяв за основу линейно-параллельную навигацию каталога.
3. Вместе с Backend-разработчиком унифицировали визуальное отображение окна, чем упростили создание его вариаций в админке и ускорили отрисовку моделей в приложении.
4. Инициировал внедрение брендированных иллюстраций, чтобы усилить визуальную идентичность продукта и упростить передачу состояний интерфейса.
5. Обсуждал реализацию интерфейса с разработчиками и находил альтернативу спорным решениям.

Клиент

VEKA Rus — дочерняя компания концерна VEKA AG — мирового лидера в производстве оконных конструкций с годовым оборотом 1,5 млрд. €.

Задача

Бизнес решил объединить приложения «Каталог VEKA», «Замерщик окон 2.0», «VEKA Конфигуратор AR», «VEKA Калькулятор» и административную панель в единый сервис. Это должно сократить время создания, обработки и выполнения заявок от клиентов.

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

Решение

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

Калькулятор как самостоятельный раздел приложения

Эргономика элементов управления
Человек меняет параметры окна и комбинирует их в произвольном порядке, поэтому окно настраивается на одном экране, а не пошаговой формой:

Поля ввода
В горизонтальной ориентации клавиатура занимает половину экрана, поэтому поля ввода планировал открывать в модально-диалоговом окне, чтобы не прокручивать форму:

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

Модальное окно
Расположил модальное окно с выбором ламинации в правой части экрана, чтобы палец после нажатия на поле мог сразу взаимодействовать с ним без дополнительного движения к центру экрана:

Идея пришла не сразу. Чтобы реализовать её, пришлось бы менять расположение модальных окон в уже готовом дизайне, поэтому в финальной версии модальное окно осталось по центру:

Оптимизировали визуальное отображение окна
Раньше дизайнер под каждую комбинацию створок рисовал отдельную 3D-модель, а админ вручную назначал нужную картинку для каждого набора условий.

Проблемы:

1. Тяжёлые картинки долго рендерились.
2. Нагружалось хранилище сервера.
3. Админ мог ошибиться при выборе нужной картинки из множества вариантов.

Вместе с Backend-разработчиком пришли к системе из основ конструкций и набора створок, которые админ может комбинировать с помощью сдвигов по координатам.

Основы конструкций:

Створки:

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

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

Сейчас я бы улучшил интерфейс
Снизил визуальный шум, увеличил изображение окна и разделил кнопки иерархией:

А ещё лучше — подумал, как превратить калькулятор в интерактивный лендинг, который совмещает рассказ о продукте с его настройкой.

Связь созданного окна в калькуляторе с формой заявки

Шаг 1 — контактные данные
После нажатия на кнопку «Рассчитать стоимость» открывается форма заявки. Если пользователь авторизован, контактные данные заполняются автоматически:

Шаг 2 — окна для расчёта
Отображается окно, которое пользователь только что создал в калькуляторе. Можно скорректировать размеры, профиль и цвет фурнитуры, добавить москитные сетки и монтаж:

Шаг 3 — уточнения

Брендированные иллюстрации
На страницах брендбука нашёл форменные «наряды» сотрудников. Появилась идея создать иллюстрации, которые передают ценности бренда, усиливают идентичность продукта и помогают объяснять состояния системы на человеческом языке.

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

Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:

Иллюстратор спросила, делать персонажей в полный рост или по пояс. Я выбрал второе, потому что действие на иллюстрациях происходит в верхней части тела. Смысловая часть увеличилась в размере и стала быстрее распознаваться:

С каждой страницы продукта в каталоге можно перейти в калькулятор с предзаполненными параметрами окна

Например, профилем и его ламинацией:

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

Например, можно переключаться между детальными страницами продуктов одной категории, чтобы сравнить их:

Или перескочить в другой раздел каталога. Например, выбрать дверь после просмотра окон:

С каждой страницы продукта в каталоге можно оформить заявку на расчёт стоимости и изготовление

На втором шаге заявки можно выбрать окна для расчёта, которые были созданы в калькуляторе:

Или создать новое окно:

Вывод

Удалось ли спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях?

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

Что было самым сложным

Сохранить паттерны навигации, которые сложились в существующих сервисах.

Как я с этим справился
Разобрался, как устроены существующие сервисы и как они будут связаны между собой. После этого придерживался правила: навигация должна быть последовательной и обратимой.

Что сейчас происходит с продуктом

Приложение выпущено в 2023. После выпуска я завершил участие в проекте.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

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

На проекте

1. Проводил ревью iOS-версии дизайна и формировал предложения по адаптации интерфейса под Android и улучшению кастомных элементов.
2. Корректировал свои предложения с учётом ограничений разработки.
3. Согласовывал результаты ревью с арт-директором, дизайнером клиента и самим клиентом.
4. Дизайнил интерфейс Android-приложения для телефона и планшета.

Клиент

FlippingBook предоставляет ИТ-решения для работы с флипбуками компаниям из Fortune 500. Флипбуки — электронные каталоги и презентации с эффектом перелистывания страниц и интеграцией звука, видео, ссылок и корзины покупок.

Задача

Увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков.

Решение

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

Интерфейс адаптировал по гайдлайнам Google Material Design 2, а позднее обновил по Material You. Такой подход обеспечил современный внешний вид, привычное и предсказуемое поведение элементов, сократил бюджет на разработку и поддержку.

Как выстроил процесс

Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения

Работа строилась спринтами

1. Изучал техническое задание.
2. Получал от дизайнера клиента iOS-макеты. Отсматривал их и отмечал, какие элементы будут адаптированы и улучшены.
3. Сначала обсуждал предложения с арт-директором и дизайнером клиента, некоторые отсеивали или искали им замену, которая устроит обе стороны: обновились требования, недопонял макет, попал в ограничения разработки — рабочий процесс. Затем предложения аргументировал клиенту.
4. После согласования собирал макеты Android-приложения.

Сначала адаптировал навигационные элементы

Верхняя навигационная панель

1. Увеличил высоту.
2. Поменял серую заливку на белую.
3. Убрал разделитель.

Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:

Когда страница прокручивается, появляется тень, отделяющая панель от содержимого:

Нижняя навигационная панель

1. Сравнял по размеру с верхней, чтобы элементы навигации имели общий признак и проще распознавались.
2. Повысил контраст между активным и неактивным разделами.
3. Облегчил цвет заливки и вместо разделителя добавил тень для изоляции от содержания.

Впоследствии обновил навигационные панели по гайдлайнам Material YOU:

Переходы к вложенным страницам сделал полноэкранными
Следующая страница появляется над текущей, двигаясь справа налево. Предыдущая появляется из-под текущей, которая сдвигается слева направо:

Переключатель содержимого секции
Сделал во всю ширину экрана, потому что он меняет содержимое секции, а не значение параметра внутри неё:

На планшете ограничил ширину сегментов переключателя, чтобы сохранить его целостность и обозначить область нажатия сегмента:

Панель инструментов
На странице флипбука, в панели инструментов увеличил область нажатия кнопок-иконок, поменял серую заливку на белую, чтобы сохранить общий признак с навигационными панелями:

После навигации занялся адаптацией элементов управления

Поиск
Вместо появления строки поиска внутри верхней панели навигации, панель становится полем ввода. Переход получается линейным, высота панели остаётся прежней:

Меню действий с флипбуком
Удалил «flipbook» из названия пунктов, чтобы действия считывались лучше. Так можно, потому что меню открывается при нажатии на три точки у карточки флипбука, и действия контекстуально относятся к нему:

Добавил иконки пунктам «создание публичной ссылки» и «Удаление», чтобы выделить их как ключевые и опасные действия

Впоследствии обновил меню по гайдлайнам Material YOU:

Затемнение без размытия
Экран ожидания открытия флипбука в iOS сделан с размытием фона. Выяснил у Android-разработчиков, что на реализацию размытия уйдет много времени, а результат будет отличаться от дизайна. Оставил затемнение с использованием фирменного цвета:

Небольшие элементы тоже влияют на целостность восприятия интерфейса, сделал их привычными

Троббер

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

Диалоговое окно
Вместо барабана сделал список радиокнопок:

Тумблер

Когда приложение уже выглядело и вело себя как андроидное, улучшал кастомные элементы

Разделитель
Ссылки сгруппированы по дате создания и разделяются отцентрованной линией, но из-за одинакового стиля разделителей список сливается в единую массу.

Сделал разделитель во всю ширину для разделения дат. Разделитель, прижатый к правому краю и с отступом от левого края, разделяет ссылки, вложенные в дату:

В результатах поиска флипбуков использовал тот же принцип: первый элемент в иерархии — папка, а второй — флипбуки, вложенные в неё:

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

При прокрутке вниз кнопка уезжает под верхнюю панель, чтобы освободить вертикальное пространство для содержания, а при прокрутке вверх — появляется обратно:

Для смартфонов с диагональю 5,5-5,7 дюймов предложил показывать шит сортировки сверху вниз. Кнопка перехода к нему расположена вверху экрана, поэтому после нажатия палец остаётся сверху и сразу может взаимодействовать с настройками:

Идея интересная, но финально реализовали универсальное поведение для всех смартфонов.

Вывод

Удалось ли увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков?

Да. Приложением начали пользоваться клиенты веб-версии продукта. За год их число выросло до 10 000, а ещё через год — до 50 000. Андроид-приложение следует принципам платформы, сохраняя привычную пользователям рутину и освобождая их сознание для осмысленных задач.

Что было самым сложным

Двойное согласование: сначала с дизайнером клиента, затем с самим клиентом. Аргументация отнимала много времени и сил, а часть идей в первых спринтах отсекалась одним словом: «Нет».

Как я с этим справился
Изменил подход к аргументации. Для дизайнера: с опорой на гайдлайны, ограничения разработки, реальные примеры и опыт с других проектов. Для клиента: улучшения для пользователя → какую пользу они принесут бизнесу.

В сложных ситуациях, чтобы ускорить согласование, просил помощи у арт-директора. С высоты своего опыта ему проще давался живой диалог с клиентом.

Отзыв о работе

«Мы сотрудничаем с IceRock Dev уже больше 2 лет. Процесс продолжается, впереди еще много целей. Отзыв о совместной работе могу оставить самый положительный. ... »
Алексей Родионов, руководитель проекта со стороны клиента

Что сейчас происходит с продуктом

Количество клиентов компании FlippingBook растет, а вместе с ним — и количество пользователей приложения.

Я завершил своё участие в проекте и с интересом наблюдаю за улучшениями и изменениями, которые органично развивают мой дизайн.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

Сделал дизайн-концепт и продумал взаимодействия с содержанием.

Задача

Объединить выразительную верстку с читаемостью и продуманными взаимодействиями.

Посадочная каталога

Размер карточек меняется в зависимости от важности содержания: крупные — новости, средние — публикации, малые — товары.

Изменение размеров создаёт ощущение глубины, побуждая продолжать прокрутку.

Принцип работы горизонтальной прокрутки

Контейнер прокручивается в сторону движения курсора на пройденное мышкой расстояние.

Когда курсор попадает в область контейнера прокрутки, запускается отслеживание его координат. Точка входа по X фиксируется в переменную mouse_x_start и становится точкой отсчёта. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в mouse_x_present.

В ответ на изменение положения курсора `Content Container` прокручивается с помощью «scroll to» по формуле:

round(
max( /* Округляет число для плавной прокрутки */
0,
min( /* Задаёт границу прокрутки вправо равную максимально возможному значению прокрутки */
`Content`.width - `Content Container`.width,
scroll_offset_start
+ (
mouse_x_present
- mouse_x_start
)
* 2 /* Дистанция, пройденная курсором, с множителем для ускорения прокрутки */
)
)
)

Прокрутка за пределами экрана

Не смотря на то, что курсор упёрся в границу экрана, мышь продолжает движение, а следовательно продолжается и прокрутка контента.

После движения, например вправо, при возврате мыши с отрывом от стола на 1—2 мм сенсор перестаёт считывать её положение. Курсор остаётся зафиксированным у границы, а следующее движение в ту же сторону продолжает прокрутку без рывков.

Зафиксированный у края курсор легко повести в обратную сторону для изменения направления прокрутки.

Для прокрутки также можно использовать тачпад или мышку с боковым колесом.

Категория с группировкой по тегам

Огранчиение горизонтальной прокрутки при быстром вериткальном движении курсора

Пользователь может вести курсор до нужной секции по вертикали, а затем диагональным движением начать её прокрутку.

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

Точка входа по X и Y фиксируются в переменные mouse_x_start и mouse_y_start. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в переменные mouse_x_present и mouse_y_present.

Для включений горизонтальной прокрутки проверются условия:

№1

abs(
  mouse_x_present - mouse_x_start
)
> 16 px /* Смещение курсора по X в диапазоне 0–16 px считается случайным, чтобы избежать дёргания контейнера */

№2

abs(
  mouse_x_present - mouse_x_start
) /* Путь, пройденный курсором по горизонтали */
≥
abs(
  mouse_y_present - mouse_y_start
) /* Путь, пройденный курсором по вертикали */

Навигация между тегами

Поиск

Если результатов поиска > 10, они группируются по тегам, как на страницах News, Publisher и Shop:

Если результатов поиска ≤ 10, они отображаются в одной горизонтальной строке:

Детальная страница

Галерея с вертикальной прокруткой

Модуль просмотра подстраивается под соотношения 21:9, 2:1, 16:9, 4:3, 1:1, 3:4:

Экспрессивная вёрстка

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

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

Макеты оживлял в ProtoPie. Зондируя идею, учёл краевые сценарии и отсеял плохие решения до разработки. И да, использовал ИИ — процесс похож на вайбкодинг, но код провалидировать я не могу, а вот логику внутри ProtoPie — могу.

Дизайн сделал в начале 2025.

© Изображения и текстовые материалы, использованные в концепте, принадлежат Slanted Publishers и взяты с https://www.slanted.de/.

© Семейство шрифтов: Pragmatica Next by Paratype https://www.paratype.ru/.

Электропочта • Телеграм

Обновил дизайн страниц «О компании», «Услуги», «Каталог» и «Детали продукта». Новые страницы структурированно подают информацию и масштабируются без участия дизайнера.

Задачи

1. Cтруктурированно подать информацию об услугах и продуктах компании, чтобы повысить доверие клиентов.
2. Обновить визуал, чтобы он шёл в ногу с технологиями, которые применяются в продукции.

О компании

Пункты навигации сгруппированы и дополнены описанием, которое раскравает экспертизу компании и спектр её услуг.

Для фона используется близкий к бетону оттенок, который передаёт ощущение устойчивости и надёжности.

Услуги

Страницы устроены единообразно, чтобы сайт был «стабильным»: одинаково работал как на уровне иерархии информации, так и на уровне взаимодействия с интерфейсом.

При этом построение адаптируется под разную информацию и её объём, вовлекая в просмотр за счёт ритмических соотношений элементов.

Направления продукции

Каталог

Сетка позволяет добавлять новые категории по мере расширения ассортимента без привлечения дизайнера.

Страница продукта

Модуль предпросмотра

Панорамные изображения 21:9 и 2:1 фиксируются по высоте и выходят за пределы модуля по ширине, благодаря чему основной объект остаётся по центру, крупным и читаемым.

Форматы 1:1 и 4:3 фиксируются по высоте и ширине, чтобы сохранить детали верхней части изображения.

Сетка

В основе сетки — фотография выполненной работы компании, а именно её левая часть, где окна уходят в перспективу и имеют разную визуальную ширину. Изменяющиеся по ширине колонки формируют горизонтальный ритм, который создаёт ощущение движения в глубину.

Сетка адаптируется под разную информацию и её объём за счёт дополнительных направляющих линий и трёх размеров шрифта: 32 px — для навигации, 96 — заголовков, 24 — основного текста.

Страницы выглядят целостно и масштабируются без участия дизайнера.

Дизайн сделал в середине 2024.

© Большинство изображений и текстовых материалов в концепте принадлежат Abex Windows и взяты с https://abexwindows.com/. Остальные сгенерированы с помощью ИИ.

Электропочта • Телеграм