{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Евгений Смирнов — дизайнер интерфейсов: заметки с тегом производство окон и дверей", "_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\/proizvodstvo-okon-i-dverey\/", "feed_url": "https:\/\/yevgeniysmirnov.ru\/tags\/proizvodstvo-okon-i-dverey\/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": "2", "url": "https:\/\/yevgeniysmirnov.ru\/all\/abex-windows\/", "title": "Сайт производителя противоураганных окон и дверей из Флориды", "content_html": "

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

      Задачи<\/h2>\n
        \n
      1. Cтруктурированно подать информацию об услугах и продуктах компании, чтобы повысить доверие клиентов.<\/li>\n
      2. Обновить визуал, чтобы он шёл в ногу с технологиями, которые применяются в продукции.<\/li>\n<\/ol>\n

        О компании<\/h2>\n
        \n\"\"\n<\/div>\n

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

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

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

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

        Услуги<\/h2>\n

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

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

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

        Направления продукции<\/h2>\n
        \n\"\"\n<\/div>\n

        Каталог<\/h2>\n

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

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

        Страница продукта<\/h2>\n
        \n\"\"\n<\/div>\n

        Модуль предпросмотра<\/h2>\n

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

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

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

        Сетка<\/h2>\n

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

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

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

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

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

        Дизайн сделал в середине 2024.<\/p>\n

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

        Электропочта<\/a> • Телеграм<\/a><\/h2>\n", "date_published": "2026-02-14T14:02:42+05:00", "date_modified": "2026-05-12T11:39:00+05:00", "tags": [ "вёрстка", "портфолио", "производство окон и дверей", "редизайн", "сайт", "типографика", "эксперимент" ], "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg", "_date_published_rfc2822": "Sat, 14 Feb 2026 14:02:42 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "2", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-1@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-2@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Color-background@2x.png", "https:\/\/yevgeniysmirnov.ru\/pictures\/Services@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Products@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Catalog@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/ProductsDetails@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Preview-module@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/LayoutSystem@2x.png.jpg", "https:\/\/yevgeniysmirnov.ru\/pictures\/Layout-System2@2x.png.jpg" ] } } ], "_e2_version": 4171, "_e2_ua_string": "Aegea 11.4 (v4171e)" }