{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Евгений Смирнов — дизайнер интерфейсов: заметки с тегом b2b", "_rss_description": "Проектирую мобильные и веб-приложения и сайты. Создаю интерактивные прототипы, чтобы протестировать идею до разработки и презентовать её заказчикам или инвесторам.", "_rss_language": "ru", "_itunes_email": "smirnov.evgeniy789@gmail.com", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic-square@2x.jpg?1764698559", "_itunes_explicit": "no", "home_page_url": "https:\/\/yevgeniysmirnov.ru\/tags\/b2b\/", "feed_url": "https:\/\/yevgeniysmirnov.ru\/tags\/b2b\/json\/", "icon": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559", "authors": [ { "name": "Евгений Смирнов", "url": "https:\/\/yevgeniysmirnov.ru\/", "avatar": "https:\/\/yevgeniysmirnov.ru\/pictures\/userpic\/userpic@2x.jpg?1764698559" } ], "items": [ { "id": "4", "url": "https:\/\/yevgeniysmirnov.ru\/all\/veka-ecosystem\/", "title": "VEKA Еcosystem — Объединил в единый сервис каталог, калькулятор окон и форму заявки, чтобы покупатели могли выбрать окна и заказать их в одном месте", "content_html": "
\n\"\"\n<\/div>\n

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

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

    Клиент<\/h2>\n

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

    Задача<\/h2>\n

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

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

    Решение<\/h2>\n

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

    Калькулятор как самостоятельный раздел приложения<\/h2>\n
    \n\"\"\n<\/div>\n

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

    \n\"\"\n<\/div>\n

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

    \n\"\"\n<\/div>\n

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

    \n\"\"\n<\/div>\n

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

    \n\"\"\n<\/div>\n

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

    \n\"\"\n<\/div>\n

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

    Проблемы:<\/p>\n

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

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

      Основы конструкций:<\/p>\n

      \n\"\"\n<\/div>\n

      Створки:<\/p>\n

      \n\"\"\n<\/div>\n

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

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

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

      \n\"\"\n<\/div>\n

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

      Связь созданного окна в калькуляторе с формой заявки<\/h2>\n

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

      \n\"\"\n<\/div>\n

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

      \n\"\"\n<\/div>\n

      Шаг 3 — уточнения<\/b><\/p>\n

      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n

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

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

      \n\"\"\n<\/div>\n

      Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:<\/p>\n

      \n\"\"\n<\/div>\n

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

      \n\"\"\n<\/div>\n

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

      Например, профилем и его ламинацией:<\/p>\n

      \n\"\"\n<\/div>\n

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

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

      \n\"\"\n<\/div>\n

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

      \n\"\"\n<\/div>\n

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

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

      \n\"\"\n<\/div>\n

      Или создать новое окно:<\/b><\/p>\n

      \n\"\"\n<\/div>\n

      Вывод<\/h2>\n

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

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

      Что было самым сложным<\/h2>\n

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

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

      Что сейчас происходит с продуктом<\/h2>\n

      Приложение выпущено в 2023 году. После выпуска я завершил участие в проекте.<\/p>\n

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

      Евгений Смирнов<\/b>
      \nДизайнер<\/p>\n

      Евгений Гребенщиков<\/b>
      \nАрт-директор<\/p>\n

      IceRock Development<\/b>
      \nКоманда разработки<\/p>\n

      Электропочта<\/a> • Телеграм<\/a><\/h2>\n", "date_published": "2026-05-12T11:32:50+05:00", "date_modified": "2026-06-03T11:25:34+05:00", "tags": [ "b2b", "b2c", "iPadOS", "планшет", "портфолио", "приложение", "производство окон и дверей" ], "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/1-_..._-1.1.1.2.jpg", "_date_published_rfc2822": "Tue, 12 May 2026 11:32:50 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "4", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/yevgeniysmirnov.ru\/pictures\/1-_..._-1.1.1.2.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/1,...,1.1.1.2.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Kalkulyator,-spisok-1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Cover.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Novoe-okno1.2.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Nastroennoe-okno.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Modalnoe-pole-vvoda1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Pole-vvoda.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/modalnoe-okno-right.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/modalnoe-okno-center.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Base-template1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Stvorka-1.1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Nastroennoe-okno-koncept-1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-1.2.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-2.4.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-3.2.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka-otpravlena-1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Koncpet.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Devushka.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Muzhchina.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Katalog-Kalkulyator.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Stranica-resheniya.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Urovni-vlozhennsti.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Katalog-Zayavka-shag-2.1.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Dobavit-konstrukciyu-vruchnuyu.jpg" ] } }, { "id": "1", "url": "https:\/\/yevgeniysmirnov.ru\/all\/flippingbook\/", "title": "Интерфейс карманного помощника продавца: задизайнил B2B-приложение, которым пользуются 50 000 клиентов по всему миру", "content_html": "
      \n\"\"\n<\/div>\n

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

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

        Клиент<\/h2>\n

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

        Задача<\/h2>\n

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

        Решение<\/h2>\n

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

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

        Как выстроил процесс<\/h2>\n
        \n\"\"\n
        Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения<\/div>\n<\/div>\n

        Работа строилась спринтами<\/b><\/p>\n

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

          Сначала адаптировал навигационные элементы<\/h2>\n

          Верхняя навигационная панель<\/b><\/p>\n

            \n
          1. Увеличил высоту.<\/li>\n
          2. Поменял серую заливку на белую.<\/li>\n
          3. Убрал разделитель.<\/li>\n<\/ol>\n

            Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:<\/p>\n

            \n\"\"\n<\/div>\n

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

            \n\"\"\n<\/div>\n

            Нижняя навигационная панель<\/b><\/p>\n

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

              Впоследствии обновил навигационные панели по гайдлайнам Material YOU:<\/p>\n

              \n\"\"\n<\/div>\n

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