{
    "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\/",
    "feed_url": "https:\/\/yevgeniysmirnov.ru\/rss\/",
    "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": "9",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/gruz-online\/",
            "title": "Сделал дизайн логистического сервиса и продолжаю развивать его после запуска",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cover-1.1.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">GruzOnline — сервис для поиска грузов и машин без посредников<\/p>\n<h2>На проекте<\/h2>\n<ol start=\"1\">\n<li>Сделал дизайн Android- и веб-приложения.<\/li>\n<li>Сгенерировал логотип, доработал его вручную и согласовал с клиентом.<\/li>\n<li>После запуска МВП встроил в пользовательские сценарии:\n<ul>\n  <li>калькулятор выгоды перевозки;<\/li>\n  <li>подбор подходящих грузов и машин после создания объявления;<\/li>\n  <li>AI-помощника для поиска и создания объявлений;<\/li>\n  <li>виджет оценки привлекательности груза относительно рынка.<\/li>\n<\/ul>\n<\/li>\n<li>Заложил визуальную консистентность с помощью семантических переменных, компонентов и шрифтовых стилей.<\/li>\n<\/ol>\n<p class=\"lead\">Приложение нужно было спроектировать так, чтобы на старте оно закрывало минимальные потребности пользователей, а в дальнейшем расширялось новым функционалом.<\/p>\n<p class=\"lead\">Начал с карты экранов, которая помогла оценить объём МВП, выстроить взаимосвязь функций и продать проект.<\/p>\n<p class=\"lead\">Затем согласовал визуальное направление и приступил к проектированию интерфейсов.<\/p>\n<h2>Список объявлений<\/h2>\n<p>Объявления — основное содержимое приложения, поэтому им отведён главный экран:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-List-1.1@2x.jpg\" width=\"1280\" height=\"936\" alt=\"\" \/>\n<\/div>\n<p>При прокрутке вниз поиск и плавающая кнопка создания объявления скрываются, а при прокрутке вверх появляются обратно:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/elements-behavior-while-scrolling.mov#t=0.001\" width=\"1920\" height=\"1408\" controls alt=\"\" \/>\n\n<\/div>\n<p>К макету приложил прототип с поведением элементов при прокрутке, но во время разработки поле поиска без согласования перенесли в верхнюю панель. Из-за этого нарушилась иерархия страницы, а поиск стал занимать место при прокрутке:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/Cargo-List-Develop-Decision-1.mov#t=0.001\" width=\"2128\" height=\"1552\" controls alt=\"\" \/>\n\n<\/div>\n<p class=\"loud\">Договорился с разработчиками обсуждать спорные решения до их реализации. Начал следить за техническими обсуждениями в чате проекта, чтобы лучше понимать ограничения и статус разработки.<\/p>\n<p>Без детальной аналитики препродакшн-версия карточки ожидаемо получилась далёкой от реальности:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Preprod-1@2x.jpg\" width=\"1280\" height=\"260\" alt=\"\" \/>\n<\/div>\n<p>По мере уточнения требований разделил карточку на секции: груз, маршрут и контакты. Из-за этого она визуально распалась на две части, а маршрут сместился во вторую очередь считывания:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-ver-1.1@2x.jpg\" width=\"1280\" height=\"558\" alt=\"\" \/>\n<\/div>\n<p>В продакшн-версии вернул маршрут наверх, сделал карточку визуально цельной и добавил уточнённые свойства грузов и маршрутов:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-ver-2.2@2x.jpg\" width=\"1280\" height=\"691\" alt=\"\" \/>\n<\/div>\n<p>Карточку спроектировал так, чтобы пользователь мог принять решение о сотрудничестве без перехода на страницу груза или машины. Например, составной маршрут можно посмотреть прямо в списке:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Route@2x.jpg\" width=\"1280\" height=\"870\" alt=\"\" \/>\n<\/div>\n<p>Как и контакты:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Contacts-1.1@2x.jpg\" width=\"1280\" height=\"406\" alt=\"\" \/>\n<\/div>\n<p>При необходимости можно перейти в профиль автора объявления и убедиться в его надёжности:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Company-Public-Profile-1.1@2x.jpg\" width=\"1280\" height=\"936\" alt=\"\" \/>\n<\/div>\n<p>В веб-приложении вся информация о грузе, маршруте и контактах собрана в карточке объявления, поэтому отдельная страница не требуется:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/web-list.jpg\" width=\"2560\" height=\"1672\" alt=\"\" \/>\n<\/div>\n<h2>Поиск объявлений<\/h2>\n<p>Грузы можно найти по названию, компании, которая разместила объявление, или пункту маршрута:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/search-prod.mov#t=0.001\" width=\"2128\" height=\"1552\" controls alt=\"\" \/>\n\n<\/div>\n<p>Для поиска также доступны фильтры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Filters@2x.jpg\" width=\"1109\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>В веб-приложении поиск работает как один из фильтров, поэтому его можно применять одновременно с остальными:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/web-search-1.mov#t=0.001\" width=\"1920\" height=\"1252\" controls alt=\"\" \/>\n\n<\/div>\n<h2>Создание объявления<\/h2>\n<p>Из-за большого количества полей и отсутствия взаимовлияния между ними в мобильном приложении сделал форму пошаговой:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/creating-ads.mov#t=0.001\" width=\"2128\" height=\"1552\" controls alt=\"\" \/>\n\n<\/div>\n<p>В веб-приложении поля расположены на одном экране и сгруппированы по смыслу:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/web-creating-ads-1.mov#t=0.001\" width=\"1920\" height=\"1252\" controls alt=\"\" \/>\n\n<\/div>\n<p class=\"lead\">Перед запуском МВП сгенерировал логотип и доработал его вручную<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Logo-Usage-Mobile-App-1.1@2x.jpg\" width=\"1280\" height=\"888\" alt=\"\" \/>\n<\/div>\n<p>Логотип адаптируется под ширину экрана:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Logo-Usage-Web-App.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">После запуска МВП начал встраивать функции, которые помогают быстрее находить грузы и машины<\/p>\n<h2>Подходящие объявления<\/h2>\n<p>После создания объявления о грузе приложение подбирает подходящие машины, а после создания объявления о машине — подходящие грузы:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/podhodyaschie-mashiny-web.mov#t=0.001\" width=\"1920\" height=\"1236\" controls alt=\"\" \/>\n\n<\/div>\n<h2>Калькулятор выгоды<\/h2>\n<p>Позволяет рассчитать примерную прибыль от перевозки груза:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/kalkulyator-vygody.mov#t=0.001\" width=\"1920\" height=\"1236\" controls alt=\"\" \/>\n\n<\/div>\n<h2>Выгодность груза относительно рынка<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/vidzhet-analitiki-1@2x.jpg\" width=\"1280\" height=\"936\" alt=\"\" \/>\n<\/div>\n<h2>AI-помощник для поиска объявлений и их создания<\/h2>\n<p>Помощник рассчитан на использование водителями во время движения, поэтому основной точкой входа стал виджет, размеры и оформление которого соответствуют системным виджетам:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ai-bot-widget@2x.jpg\" width=\"1280\" height=\"936\" alt=\"\" \/>\n<\/div>\n<p>Помощника также можно вызвать из приложения, нажав кнопку «Штурман» в верхней панели:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/in-app-entrance-1@2x.jpg\" width=\"1280\" height=\"936\" alt=\"\" \/>\n<\/div>\n<p>По умолчанию общение с помощником происходит голосом. Он озвучивает свой ответ и автоматически начинает запись реплики пользователя, которую можно остановить и написать запрос текстом:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-start@2x.jpg\" width=\"1124\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>По мере общения помощник уточняет параметры, чтобы подобрать объявления:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-searched@2x.jpg\" width=\"1280\" height=\"704\" alt=\"\" \/>\n<\/div>\n<p>Если пользователь вводит запрос, который нейросеть не распознаёт как параметр объявления, помощник подсказывает, как его скорректировать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-vague-answer@2x.jpg\" width=\"1280\" height=\"704\" alt=\"\" \/>\n<\/div>\n<p>На страте для технического упрощения выход из режима поиска или создания объявления происходит по кнопке. Помощник подтверждает действие сообщением и озвучивает его:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-modal-exit@2x.jpg\" width=\"1280\" height=\"704\" alt=\"\" \/>\n<\/div>\n<p>Функционал помощника частично запущен в продакшн, а показанные экраны — лишь его оболочка. Основная работа команды происходит вне макетов: анализ сценариев, настройка нейросети, написание промптов, составление текстов и тестирование.<\/p>\n<h2>Что было самым сложным<\/h2>\n<p>Потребность постоянно изобретать решения на фоне тяжёлого эмоционального состояния.<\/p>\n<p><b>Как я с этим справился<\/b><br \/>\nПереиспользовал найденные решения. Это создавало рутину, которая помогала двигать проект вперёд.<\/p>\n<p>Проектировал больше, чем требовалось для МВП. Позже использовал эти наработки при создании новых функций, благодаря чему быстрее доводил их до прода.<\/p>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p class=\"loud\">Приложения были опубликованы в конце 2025 и постепенно обрастают функционалом и пользователями.<\/p>\n<p>На 22.07.26 мобильное приложение скачали уже 6 000 человек, средняя оценка в сторах — ★4.5.<\/p>\n<p>Продолжаю поддерживать и развивать дизайн продукта в 2026.<\/p>\n<p><b>Евгений Смирнов<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-07-22T18:55:31+05:00",
            "date_modified": "2026-07-22T19:13:44+05:00",
            "tags": [
                "b2b",
                "b2c",
                "веб-приложение",
                "грузоперевозки",
                "логистика",
                "мобильное приложение",
                "портфолио"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-List-Scroll@2x.jpg",
            "_date_published_rfc2822": "Wed, 22 Jul 2026 18:55:31 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "9",
            "_rss_enclosures": [
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/elements-behavior-while-scrolling.mov",
                    "type": "video\/quicktime",
                    "length": 6034965
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/Cargo-List-Develop-Decision-1.mov",
                    "type": "video\/quicktime",
                    "length": 6404475
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/search-prod.mov",
                    "type": "video\/quicktime",
                    "length": 2142590
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/web-search-1.mov",
                    "type": "video\/quicktime",
                    "length": 14669307
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/creating-ads.mov",
                    "type": "video\/quicktime",
                    "length": 28420119
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/web-creating-ads-1.mov",
                    "type": "video\/quicktime",
                    "length": 26235985
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/podhodyaschie-mashiny-web.mov",
                    "type": "video\/quicktime",
                    "length": 16339390
                },
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/kalkulyator-vygody.mov",
                    "type": "video\/quicktime",
                    "length": 14262907
                }
            ],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-List-Scroll@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-List-Develop-Decision-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/search@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cover-1.1.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-List-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Preprod-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-ver-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-ver-2.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Route@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cargo-Card-Contacts-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Company-Public-Profile-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/web-list.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Filters@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Logo-Usage-Mobile-App-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Logo-Usage-Web-App.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/vidzhet-analitiki-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ai-bot-widget@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/in-app-entrance-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-start@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-searched@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-vague-answer@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ai-assistant-modal-exit@2x.jpg"
                ]
            }
        },
        {
            "id": "11",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/kak-sobrat-portfolio\/",
            "title": "В прямом эфире Планетария рассказал, как собрать портфолио",
            "content_html": "<div class=\"e2-text-video\">\n<video src=\"https:\/\/yevgeniysmirnov.ru\/video\/Zhenya-Smirnov-sub.mp4#t=0.001\" width=\"1920\" height=\"1080\" controls alt=\"\" \/>\n\n<\/div>\n<p><b>Евгений Смирнов<\/b><br \/>\nВыступающий<\/p>\n<p><a href=\"https:\/\/intuition.team\/ru\/planetarium\"><b>Планетарий<\/b><\/a><br \/>\nСообщество творческих ребят, которые делают своё<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-07-15T00:37:37+05:00",
            "date_modified": "2026-07-15T17:22:48+05:00",
            "tags": [
                "выступление",
                "портфолио",
                "презентация"
            ],
            "_date_published_rfc2822": "Wed, 15 Jul 2026 00:37:37 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "11",
            "_rss_enclosures": [
                {
                    "url": "https:\/\/yevgeniysmirnov.ru\/video\/Zhenya-Smirnov-sub.mp4",
                    "type": "video\/mp4",
                    "length": 27030388
                }
            ],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "8",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/panda-pizza-website\/",
            "title": "Обновил дизайн сайта, чтобы повысить конверсию оформления заказа и привести интерфейс к единому стилю с мобильным приложением",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Thumbnail@2x.jpg\" width=\"1280\" height=\"720\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">Панда Пицца — сайт для заказа доставки пиццы, закусок, десертов и напитков.<\/p>\n<h2>На проекте<\/h2>\n<ol start=\"1\">\n<li>Описал путь оформления заказа и предложил, как его улучшить.<\/li>\n<li>Собрал карту переходов нового пути, чтобы оценить масштаб работ и связать новые функции — бонусы, сторисы с акциями, отмену и оценивание заказа — с существующими.<\/li>\n<li>Задал визуальное направление, чтобы интерфейс сайта подружился с приложением, и продукты выглядели как из одной линейки.<\/li>\n<li>Погрузил в проект дизайнера, распланировал его работу и взял на себя арт-дирекшн.<\/li>\n<\/ol>\n<h2>Задача<\/h2>\n<p>Для Панды Пиццы я <a href=\"https:\/\/yevgeniysmirnov.ru\/all\/panda-pizza-mobile-app\/\">делал дизайн мобильного приложения<\/a>, которое помогло повысить узнаваемость бренда и увеличить продажи.<\/p>\n<p>Клиенту понравился результат, и он доверил мне обновление дизайна сайта. Нужно было повысить конверсию заказа, привести сайт к единому стилю с приложением и упростить поддержку дизайна.<\/p>\n<h2>Главная<\/h2>\n<p>Повысил акцент на товарах:<\/p>\n<ul>\n<li>Уменьшил высоту шапки, убрал заливку и навёл порядок в вёрстке.<\/li>\n<li>Уменьшил поля по краям, чтобы увеличить карточки товаров.<\/li>\n<\/ul>\n<p>Вместо карусели баннеров сделал сторисы с акциями.<\/p>\n<p>Новый дизайн первый в карусели:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Мобильная версия<\/b><br \/>\nИнформацию о том, что меню и цены могут отличаться в зависимости от адреса доставки и пиццерии, разместил на странице вместо плавающего тоста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New@2x-1.jpg\" width=\"2560\" height=\"1371\" alt=\"\" \/>\n<\/div>\n<p><b>Прокрутка меню<\/b><br \/>\nФиксирую только навигацию и корзину, чтобы отдать максимум вертикального пространства товарам:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New_Scroll@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old_Scroll@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Мобильная версия<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New_Scroll_Mobile@2x.jpg\" width=\"1280\" height=\"685\" alt=\"\" \/>\n<\/div>\n<p><b>Карточка товара<\/b><br \/>\nИсправил тональность цены, чтобы карточка считывалась актуальной и активной.<\/p>\n<p>Использовал облегчённый основной цвет вместо серого для кнопки перехода на страницу товара:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Card@2x.jpg\" width=\"1280\" height=\"720\" alt=\"\" \/>\n<\/div>\n<p><b>Футер<\/b><br \/>\nСовместил условия доставки с футером и увеличил размеры элементов, чтобы подсветить важную информацию.<\/p>\n<p>Выделил подзаголовки размером и жирностью вместо низкоконтрастного жёлтого.<\/p>\n<p>Добавил QR-код для скачивания приложения:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home_New_Footer@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old_Footer@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>Страница товара<\/h2>\n<p>Увеличил фото товара и добавил выбор дополнительных ингредиентов:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details-Modal-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home_Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Была идея сделать страницу вместо модального окна, чтобы дать больше места информации о товаре и элементам управления, а также уменьшить вложенность модальных окон:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details-Page-New-Screen-1@2x.jpg\" width=\"1280\" height=\"718\" alt=\"\" \/>\n<\/div>\n<p>Но в продакшен пошла версия с модальным окном. Согласующие стороны опасались, что переход к отдельной странице будет ощущаться тяжелее и разорвёт визуальную связь с меню.<\/p>\n<p><b>В мобильной версии открывается полноэкранное модальное окно<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details-New-Mobile@2x.jpg\" width=\"1280\" height=\"685\" alt=\"\" \/>\n<\/div>\n<h2>Адрес доставки и самовывоза<\/h2>\n<p>Чтобы добавить товар в корзину по актуальной цене, нам нужно узнать адрес доставки и определить пиццерию, которая его обслуживает.<\/p>\n<p><b>Доставка<\/b><\/p>\n<p>Объединил выбор адреса доставки и пиццерии для самовывоза в одном окне, чтобы избежать двойной вложенности модальных окон.<\/p>\n<p>Для добавления товара в корзину достаточно указать город, улицу и дом. Детали адреса запрашиваются в форме заказа:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Hints-1-New-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Old-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Old-2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>При вводе адреса под полем появляются подсказки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New-Hints@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<p>Если адрес не входит в зону доставки, подсвечиваю поле ошибкой после его расфокуса вместо кричащего уведомления:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New-Error@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Error-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Самовывоз<\/b><\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-New1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>После указания адреса товар автоматически добавляется в корзину без необходимости повторно кликать на кнопку «В корзину»:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Notification-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Notification-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Мобильная версия выбора адреса доставки<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Mobile-New-1.1@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p><b>Мобильная версия выбора пиццерии для самовывоза<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-Mobile-New@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<h2>Корзина<\/h2>\n<p>Сделал отдельной страницей, а не модальным окном:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>При изменении ширины окна, элементы знают, как им перестроиться:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-compact-New@2x.jpg\" width=\"1280\" height=\"661\" alt=\"\" \/>\n<\/div>\n<p>Была идея разместить корзину сбоку от меню:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-sheme-1@2x.jpg\" width=\"1280\" height=\"718\" alt=\"\" \/>\n<\/div>\n<p>Но времени на проработку немодального поведения при узком окне не было, поэтому везде сделали единообразно — отдельной страницей.<\/p>\n<h2>Списание бонусов<\/h2>\n<p>Если пользователь авторизован, в шапке появляется баланс бонусов, которые он может списать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-Bonus@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<h2>Авторизация<\/h2>\n<p>Для оформления заказа пользователь авторизуется по номеру телефона.<\/p>\n<p>Исправил низкую контрастность акцентного жёлтого и сделал тексты понятнее:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Login-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Login-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Код подтверждения<\/b><br \/>\nСделал очевиднее кнопку возврата к шагу ввода телефона и автоматическую проверку кода после ввода последней цифры:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Secure-code-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Secure-code-old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>Форма заказа<\/h2>\n<p>После авторизации пользователь попадает на форму заказа, где уточняет адрес, время доставки и способ оплаты.<\/p>\n<p>Визуально облегчил форму:<\/p>\n<ul>\n<li>Разделил группы полей пространством вместо подложек.<\/li>\n<li>Поля сделал серыми подложками вместо обводки:<\/li>\n<\/ul>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.7827298050139\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-New-1.3@2x.jpg\" width=\"1280\" height=\"718\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Old-1.3@2x.jpg\" width=\"1280\" height=\"718\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Было бы хорошо сохранить подписи слева от полей, как в старой форме, но:<\/p>\n<ul>\n<li>полей мало,<\/li>\n<li>они стоят рядом с названиями групп,<\/li>\n<li>содержимое подсказывает, что это за поле.<\/li>\n<\/ul>\n<p>Поэтому оставил подписи только у полей с похожими данными — квартира, подъезд, этаж. Если расположить подписи слева, они будут без необходимости выделять эти поля на фоне остальных.<\/p>\n<p>Уменьшил высоту сводки заказа и зафиксировал её при прокрутке:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Scroll-New1.1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Scroll-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Вместо общего сообщения об ошибке внизу страницы подсвечиваю красным сами поля:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Error-New1.2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Error-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Если ресторан закрыт, новый сайт предлагает сделать отложенный заказ. Вместо кнопки оплаты показывается кнопка «Указать время доставки»:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Early-New1.2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Early-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>Сохранённые адреса<\/h2>\n<p>После оформления заказа адрес сохраняется и при следующем заказе компактнее отображается в форме:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-New-1.2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Можно добавить несколько адресов:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-New-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Или отредактировать текущий:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Edit-Saved-Address-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old-2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>Отслеживание заказа<\/h2>\n<p>После оплаты перенаправляем пользователя на экран заказа:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.5647921760391\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-accepted-New-1@2x.jpg\" width=\"1280\" height=\"818\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-accepted-Old@2x.jpg\" width=\"1280\" height=\"818\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Сделал так, что на экран заказа теперь можно вернуться с главной страницы, а не искать его в истории браузера:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Order-Preview-New-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<p>Добавил оценку заказа для сбора статистики и обратной связи от пользователей:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Deliveried-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-1-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-2-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-3-New@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p><b>Отмена заказа<\/b><br \/>\nВместо звонка в поддержку на новом сайте заказ можно отменить кнопкой:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-modal-1.1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-canceld@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Если заказ начали готовить, то при отмене деньги не вернутся, о чём сайт кратко и ясно предупреждает:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.6819973718791\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-modal-2@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-canceld-1@2x.jpg\" width=\"1280\" height=\"761\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Когда заказ передали курьеру, отменить его не получится. Кнопка «Отменить заказ...» меняется на информационное сообщение:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-noti-1@2x.jpg\" width=\"1280\" height=\"818\" alt=\"\" \/>\n<\/div>\n<h2>Что было самым сложным<\/h2>\n<p>Направлять подопечного дизайнера и в сжатые сроки отдавать результат.<\/p>\n<p><b>Как я с этим справился<\/b><br \/>\nПогрузил дизайнера в проект голосом и оперативно отвечал на вопросы. Днём давал работать в тишине, вечером делал ревью и сообщал статус проджект-менеджеру. Взял на себя интерактивный прототип и визуальное направление.<\/p>\n<h2>Результат<\/h2>\n<p class=\"loud\">Сайт запустили в срок, и люди начали заказывать еду через него.<\/p>\n<p>Работая в формате аутсорса, я не имел доступа к бизнес-метрикам проекта и не мог оценить влияние нового дизайна.<\/p>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p>Я занимался дизайном сайта и поддерживал его в ходе разработки с начала до середины 2025.<\/p>\n<p>В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагался whitebox-сайт.<\/p>\n<p><b>Евгений Смирнов<\/b><br \/>\nАрт-директор<\/p>\n<p><b>Марина Ткаченко<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-06-23T00:03:12+05:00",
            "date_modified": "2026-06-23T00:02:34+05:00",
            "tags": [
                "b2c",
                "доставка еды",
                "портфолио",
                "сайт"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New@2x.jpg",
            "_date_published_rfc2822": "Tue, 23 Jun 2026 00:03:12 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "8",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Order-Preview-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-noti@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Org-New1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Thumbnail@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New@2x-1.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New_Scroll@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old_Scroll@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-New_Scroll_Mobile@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Card@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home_New_Footer@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Old_Footer@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details-Modal-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home_Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details-Page-New-Screen-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details-New-Mobile@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Hints-1-New-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Old-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Old-2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New-Hints@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-New-Error@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Error-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-New1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Notification-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Notification-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Delivery-Modal-Mobile-New-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Pick-Up-Modal-Mobile-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-compact-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-sheme-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cart-Bonus@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Login-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Login-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Secure-code-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Secure-code-old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-New-1.3@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Old-1.3@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Scroll-New1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Scroll-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Error-New1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Error-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Early-New1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Early-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-New-1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-New-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Edit-Saved-Address-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-Form-Saved-Address-Modal-Old-2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-accepted-New-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-accepted-Old@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Home-Order-Preview-New-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Deliveried-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-1-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-2-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-page-Estimate-3-New@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-modal-1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-canceld@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-modal-2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-canceld-1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Order-cancel-noti-1@2x.jpg"
                ]
            }
        },
        {
            "id": "7",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/panda-pizza-mobile-app\/",
            "title": "Помог повысить узнаваемость бренда и увеличить продажи через UX, промо-функции и адаптацию брендинга",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">Панда Пицца — приложение для заказа доставки пиццы, закусок, десертов и напитков.<\/p>\n<h2>На проекте<\/h2>\n<ol start=\"1\">\n<li>Сделал дизайн iOS-приложения с базовыми функциями: меню, оформление заказа, отслеживание статуса доставки и оценка её качества.<\/li>\n<li>Адаптировал приложение под Android по гайдлайнам Google Material You.<\/li>\n<li>Встроил в пользовательские сценарии промо-функции: бонусную систему, сторисы для акций и функцию рекомендации приложения друзьям.<\/li>\n<li>Адаптировал интерфейс под новый брендинг, чтобы визуально выделить приложение среди конкурентов.<\/li>\n<\/ol>\n<h2>Задача<\/h2>\n<p>Бизнес ресторанов обратился за мобильным приложением, чтобы увеличить продажи и повысить узнаваемость бренда. Приложение нужно было задизайнить, разработать и связать с инфраструктурой клиента за 5 месяцев.<\/p>\n<p>Чтобы уложиться в сроки и сохранить привычный для пользователей сценарий заказа еды, клиент попросил ориентироваться на приложение Додо Пиццы. Я взял его как сценарный референс и скорректировал под рамки МВП и бизнес-логику Панда Пиццы.<\/p>\n<h2>Доставка и самовывоз<\/h2>\n<p>При первом входе спрашиваем, как пользователь хочет получить заказ, чтобы показать актуальные меню и цены. Они зависят от пиццерии, обслуживающей адрес доставки или выбранной для самовывоза:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/pervyi_vhod_2.2@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<p><b>Доставка<\/b><br \/>\nПеред системным запросом геолокации показываем экран, который объясняет, зачем приложению доступ к местоположению.<\/p>\n<p>Если пользователь нажал «Настроить позже», он сможет вызвать системную модалку без перехода в настройки — через кнопку «Определить местоположение» на карте:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/dostavka1.4@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>Обрезаем адрес слева, а не справа. Так в строке остаются улица и дом — часть адреса, по которой пользователь понимает, куда доставят еду:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/otobrazhenie-adresa-1.5@2x.jpg\" width=\"1280\" height=\"242\" alt=\"\" \/>\n<\/div>\n<p>Когда что-то идёт не так, приложение объясняет, что произошло и что делать дальше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/dostavka_sostoyaniya@2x.jpg\" width=\"1280\" height=\"685\" alt=\"\" \/>\n<\/div>\n<p><b>Самовывоз<\/b><br \/>\nПри включённой геолокации центрируем карту относительно местоположения пользователя и показываем ближайшие пиццерии:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/samovyvoz1.2@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<h2>Меню<\/h2>\n<p>После выбора того, как получить заказ, пользователь попадает в меню:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Menyu1.2@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<p>Виджет адреса показывает, может ли пиццерия принять заказ:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/vidzhet_dostavki_sostoyaniya3.2@2x.jpg\" width=\"1280\" height=\"208\" alt=\"\" \/>\n<\/div>\n<h2>Корзина<\/h2>\n<p>Изначально для ввода промокода хотел использовать модальную шторку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina2.2@2x.jpg\" width=\"1280\" height=\"860\" alt=\"\" \/>\n<\/div>\n<p>При обсуждении макетов с разработчиком выяснил:<\/p>\n<ul>\n<li>Клавиатура сворачивается позже шторки, из-за чего конструкция распадается и анимация выглядит дёрганой.<\/li>\n<li>Чтобы подстроить высоту шторки под клавиатуру и содержимое, пришлось бы менять системное поведение.<\/li>\n<\/ul>\n<p>Заменил шторку на модальное окно. При его закрытии клавиатура скрывается одновременно с ним:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina1.1@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<h2>Оформление заказа<\/h2>\n<p>При оплате заказа пользователь запускает цепочку взаимодействий между приложением, бэком и платёжной системой, но ему достаточно знать, что платёж прошёл:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/oplata_proshla@2x.jpg\" width=\"1280\" height=\"685\" alt=\"\" \/>\n<\/div>\n<p>Если банк отклонил платёж, запросил подтверждение или бэк долго получает данные заказа, приложение объяснит, что происходит и что делать дальше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Oplata-zakaza1.1@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>На проде выяснилось, что бэк может несколько минут возвращать данные заказа. Чтобы медленная система ощущалась работающей, троббер сменяется пояснением и кнопкой «Проверить статус».<\/p>\n<p>Приложение само проверяет статус через заданные интервалы, но кнопка даёт пользователю возможность убедиться, что система работает:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Obrabotka_zakaza@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<h2>Отслеживание заказа<\/h2>\n<p>Бэк может вернуть данные заказа без номера, который нужен для обращения в поддержку. Сделал так, что экран заказа открывается сразу, а номер подгружается фоном:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Nomer-zakaza1@2x.jpg\" width=\"1280\" height=\"860\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Приложение само обновляет данные, но пользователь может вручную запросить номер, если он нужен срочно.<\/div>\n<\/div>\n<p>Заказ может быть отменён без участия пользователя. В таком случае приложение говорит: заказ отменён, деньги вернутся, бонусы уже вернулись. Если остались вопросы, можно позвонить в поддержку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/zakaz-otmenen1.2@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<h2>Оценивание заказа<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ocenka-zakaza1.2@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<p>Текст на странице и плейсхолдер поля меняются в зависимости от оценки. Люди любят давать советы и заодно описывают, что пошло не так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/variacii-ocenki1@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<h2>Адаптация под Android<\/h2>\n<p>Клиенту понравился дизайн iOS-приложения, и в процессе разработки он также заказал версию для Android.<\/p>\n<p>Интерфейс адаптировал по гайдлайнам Google Material You, чтобы сделать привычные для Android навигационные паттерны и поведение элементов управления:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.3689839572193\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Android1.2@2x.jpg\" width=\"1280\" height=\"935\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Android-2@2x.jpg\" width=\"1280\" height=\"935\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Android-3.1@2x.jpg\" width=\"1280\" height=\"935\" alt=\"\" \/>\n<\/div>\n<\/div>\n<h2>После запуска МВП начал встраивать промо-функции<\/h2>\n<p><b>Сторисы<\/b><br \/>\nСторисы рассказывают об акциях, промокодах и скидках, побуждая пользователя сделать заказ или добавить к нему дополнительные позиции.<\/p>\n<p>Разместил сторисы на видном месте рядом с меню, потому что они связаны с выбором товаров:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/storisy1.1@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<p><b>Бонусы<\/b><br \/>\nДля оформления заказа пользователь авторизуется по номеру телефона.<\/p>\n<p>В смете и на экране статуса доставки показывается, сколько бонусов начислится за заказ:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Avtorizaciya@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>На главной добавил баланс бонусов, чтобы напомнить о возможности их списать и подтолкнуть заказать больше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Glavnaya-bonusy1.2@2x.jpg\" width=\"1280\" height=\"685\" alt=\"\" \/>\n<\/div>\n<p>За скачивание приложения дают 1000 бонусов, поэтому добавил в корзину предложение авторизоваться:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/korzina_avtorizaciya@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<p>После авторизации пользователь может списать бонусы:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina_bonusy2@2x.jpg\" width=\"1155\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p><b>Рекомендация друзьям<\/b><\/p>\n<p>Если пользователь оценил заказ на 4—5 звёзд, на странице оценки появляется блок «Посоветуете нас?». При ответе «Да» предлагаем поделиться ссылкой на скачивание приложения:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Rekomendaciya-druzyam2@2x.jpg\" width=\"1195\" height=\"1280\" alt=\"\" \/>\n<\/div>\n<p>Модальное окно — компромиссное решение. Я бы заменил его на блок, который появляется прямо на странице и продолжает сценарий.<\/p>\n<h2>Ребрендинг<\/h2>\n<p>Новый брендинг делала студия-подрядчик. Она же перенесла его в приложение, а я отсматривал результат. Нашёл нарушения контраста и семантики цветов, обсудил их с клиентом и исправил:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1280\" data-ratio=\"1.3361169102296\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/brending_glavnaya1.4@2x.jpg\" width=\"1280\" height=\"958\" alt=\"\" \/>\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/brending_prokrutka-glavnoi1@2x.jpg\" width=\"1280\" height=\"958\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Когда брендинг обновили во второй раз, адаптацию интерфейса сразу доверили мне. К тому моменту я настроил компоненты и привязал к ним семантические переменные, поэтому адаптация прошла быстро:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/brending_peremennye1@2x.jpg\" width=\"1280\" height=\"908\" alt=\"\" \/>\n<\/div>\n<h2>Результат<\/h2>\n<p class=\"loud\">МВП запустили в срок. Люди начали заказывать еду через приложение, а я развивал дизайн по мере добавления новых функций.<\/p>\n<h2>Отзыв о работе<\/h2>\n<blockquote>\n<p>«Мне очень нравится результат. Вы большие молодцы. <b>Сделали ровно то, что нужно, ничего лишнего<\/b>. Всё выглядит аккуратно и современно».<br \/>\n<i>Руководитель проекта со стороны клиента<\/i><\/p>\n<\/blockquote>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p>Я занимался дизайном приложения и поддерживал его в ходе разработки с начала 2024 до середины 2025.<\/p>\n<p>В начале 2025 <a href=\"https:\/\/yevgeniysmirnov.ru\/all\/panda-pizza-website\/\">обновил дизайн сайта<\/a>, чтобы повысить конверсию оформления заказа и привести интерфейс к единому стилю с мобильным приложением.<\/p>\n<p>В конце 2025 бизнес перешёл на готовое инфраструктурное решение, к которому прилагалось whitebox-приложение.<\/p>\n<p>Пользователям понравилось расширение функционала, но интерфейс заметно изменился:<\/p>\n<blockquote>\n<p>«Новый дизайн у приложения стал интуитивно не понятным, старый мне нравился больше, анимации, цвет и так далее, жаль что поменяли дизайн приложения».<br \/>\n<i>Отзыв из App Store<\/i><\/p>\n<\/blockquote>\n<p><b>Евгений Смирнов<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-06-13T14:49:46+05:00",
            "date_modified": "2026-06-23T12:19:54+05:00",
            "tags": [
                "android",
                "b2c",
                "iOS",
                "доставка еды",
                "мобильное приложение",
                "портфолио"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka.jpg",
            "_date_published_rfc2822": "Sat, 13 Jun 2026 14:49:46 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "7",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/pervyi_vhod_2.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/dostavka1.4@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/otobrazhenie-adresa-1.5@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/dostavka_sostoyaniya@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/samovyvoz1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Menyu1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/vidzhet_dostavki_sostoyaniya3.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina2.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/oplata_proshla@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Oplata-zakaza1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Obrabotka_zakaza@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Nomer-zakaza1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/zakaz-otmenen1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/ocenka-zakaza1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/variacii-ocenki1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Android1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Android-2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Android-3.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/storisy1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Avtorizaciya@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Glavnaya-bonusy1.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/korzina_avtorizaciya@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Korzina_bonusy2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Rekomendaciya-druzyam2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/brending_glavnaya1.4@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/brending_prokrutka-glavnoi1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/brending_peremennye1@2x.jpg"
                ]
            }
        },
        {
            "id": "6",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/campus\/",
            "title": "Сделал дизайн ленты «Подслушано» и встроил в неё сторисы, чем помог в 2,5 раза увеличить вовлечённость пользователей и подготовить приложение к монетизации",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka5.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">Кампус — приложение с расписанием пар, лентой «Подслушано» и анонимными отзывами на преподавателей. Работает на Android и iOS.<\/p>\n<p>Бизнес построил стратегию монетизации: увеличить количество пользователей, повысить их вовлечённость и продавать контекстуальную рекламу внутри приложения.<\/p>\n<h2>Мои задачи в рамках стратегии<\/h2>\n<ul>\n<li>Визуально обновить Android-приложение, чтобы сохранить текущую аудиторию и создать основу для привлечения новой.<\/li>\n<li>Сделать ленту «Подслушано» со сторисами, чтобы повысить вовлечённость пользователей.<\/li>\n<li>Встроить рекламные блоки внутрь приложения.<\/li>\n<\/ul>\n<h2>Результаты бизнес-стратегии и улучшений Android- и iOS-приложения<\/h2>\n<ul>\n<li>Раньше пользователи заходили в приложение в среднем 32 раза в месяц на 35 секунд, а стали заходить 81 раз на 39 секунд.<\/li>\n<li>Количество пользователей увеличилось с 247 000 в 2021 году до 750 000 в 2023 году.<\/li>\n<li>244 000 активных пользователей в пиковые месяца.<\/li>\n<\/ul>\n<h2>Итерационно вернул Android-приложение «из прошлого века»<\/h2>\n<p>Прежде чем добавлять ленту, сторисы, рекламу и привлекать новую аудиторию, я доработал существующий функционал и привёл в порядок нативную навигацию, компоновку экранов, цвета, типографику и иконки.<\/p>\n<h2>Расписание занятий<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Raspisanie3.1@2x.jpg\" width=\"1280\" height=\"995\" alt=\"\" \/>\n<\/div>\n<h2>Страница занятия<\/h2>\n<p>Переходы к вложенным страницам сделал полноэкранными:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Zanyatie2@2x.jpg\" width=\"1280\" height=\"995\" alt=\"\" \/>\n<\/div>\n<h2>Избранные расписания<\/h2>\n<p>Перенёс переключение между избранными расписаниями из настроек на главный экран и добавил в выпадающее меню поиск расписания другой группы или преподавателя.<\/p>\n<p>К примеру, если нужно встретиться с друзьями из другой группы или передать работу преподавателю, а его нет на кафедре:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Izbrannye_Raspisaniya1.jpg\" width=\"1757\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p><b>Настройка избранных расписаний<\/b><br \/>\nПо умолчанию избранные расписания отображаются в порядке добавления. Порядок можно изменить в настройках:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Izbrannye_Raspisaniya_Redaktirovanie2@2x.jpg\" width=\"1280\" height=\"901\" alt=\"\" \/>\n<\/div>\n<h2>Отзывы о препродавателях<\/h2>\n<p>Студенты анонимно оставляют отзывы, которые помогают другим составить первое впечатление о преподавателе до пары или экзамена. Если кто-то напишет ложь, его задизлайкуют.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Otzyvy@2x.jpg\" width=\"1280\" height=\"995\" alt=\"\" \/>\n<\/div>\n<p><b>Страница преподавателя<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Stranica_Prepodavatelya@2x.jpg\" width=\"1280\" height=\"995\" alt=\"\" \/>\n<\/div>\n<p><b>Написание отзыва<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver0.1@2x.jpg\" width=\"1280\" height=\"1100\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver1.1@2x.jpg\" width=\"1280\" height=\"1100\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver2.2@2x.jpg\" width=\"1280\" height=\"900\" alt=\"\" \/>\n<\/div>\n<h2>Оформление<\/h2>\n<p>В приложении были нейтральные светлая и тёмная темы, в которых можно менять основной цвет.<\/p>\n<p>В первой итерации визуального обновления сделал цветные темы, в которых палитра строилась от основного цвета. Пользователям это не зашло, особенно в тёмной теме:<\/p>\n<ul>\n<li>«После обновы пропала тёмная тема, вернее она осталась но это скорее голубой в темных тонах».<\/li>\n<li>«Добавьте тогда уж чёрную тему».<\/li>\n<\/ul>\n<p>Поэтому вернул темы в нейтральные тона:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Temnaya_tema@2x.jpg\" width=\"1280\" height=\"1010\" alt=\"\" \/>\n<\/div>\n<p>Я допустил ошибку, забрав у пользователей привычное оформление. Вместо этого стоило оставить нейтральные темы и добавить цветную как эксперимент.<\/p>\n<p>Из-за потери времени, сложности разработки и среднего приоритета задачи мы вернулись к варианту, в котором меняется только основной цвет:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cvetnye_temy@2x.jpg\" width=\"1280\" height=\"716\" alt=\"\" \/>\n<\/div>\n<h2>После визуального обновления я приступил к социальным функциям, которые должны были повысить вовлечённость пользователей.<\/h2>\n<h2>Лента «Подслушано»<\/h2>\n<p>Место, где студенты вуза делятся трешовыми историями, шутят, обсуждают моральные ценности, популяцию кенгуру и ищут вторую половинку.<\/p>\n<p>Первая версия ленты была списком постов без комментариев. Пользователи отвечали друг другу новыми постами, поэтому лента выглядела живой:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_Ver1@2x.jpg\" width=\"1280\" height=\"946\" alt=\"\" \/>\n<\/div>\n<p>Добавили пост дня, который выбирался среди всех вузов по количеству лайков за предыдущий день:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_Ver1.1@2x.jpg\" width=\"1280\" height=\"946\" alt=\"\" \/>\n<\/div>\n<p>Закреплённая кнопка «Предложить пост» закрывала посты и создавала визуальный шум, когда появлялась или исчезала при смене направления прокрутки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_variacii_knopki@2x.jpg\" width=\"1280\" height=\"946\" alt=\"\" \/>\n<\/div>\n<p>Когда появилась строка сторисов, перенёс в неё пост дня и кнопку «Предложить пост»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_so-storisami3@2x.jpg\" width=\"1280\" height=\"946\" alt=\"\" \/>\n<\/div>\n<p>К истории «Пост дня» прикрутили нейронку, которая генерировала контекстную картинку. Нейронка делала такие же трешовые картинки, как и сами посты, поэтому студенты ловили «ха-ха»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/post_dnya1@2x-1.jpg\" width=\"2560\" height=\"1763\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Эту сторис для кейса сгенерировал ChatGPT в 2026 году без дополнительной настройки промпта. Получилось уже не так трешово.<\/div>\n<\/div>\n<p class=\"loud\">Сторисы открыли дорогу к новым форматам взаимодействия с пользователями: подборкам смешных постов, голосованиям за лучшего преподавателя, предложениям стажировок и вакансий, рекламе курсов для подготовки к сессии.<\/p>\n<h2>Вывод<\/h2>\n<p>Я подготовил Android-приложение к привлечению новой аудитории и маркетинговой активности: обновил существующий интерфейс и добавил ленту «Подслушано» со сторисами как основу для рекламных форматов.<\/p>\n<p>Заложенная мной основа помогла начать реализовывать бизнес-стратегию. Текущая продуктовая команда продолжает развивать её в новых сценариях, рекламных форматах и механиках вовлечения.<\/p>\n<h2>Что было самым сложным<\/h2>\n<p>Впервые столкнулся с обратной связью от полумиллиона пользователей, на которых раскатили обновление.<\/p>\n<p><b>Как я с этим справился<\/b><br \/>\nВместе с ЛПР собрали проблемы из отзывов пользователей, обсудили их и я внёс корректировки в дизайн.<\/p>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p>Я занимался дизайном приложения и поддерживал его в ходе разработки с середины 2022 до середины 2023.<\/p>\n<p>В 2024 продукт зарабатывал и инвестировал всю прибыль в развитие.<\/p>\n<p>На 2025:<\/p>\n<ul>\n<li>Количество пользователей iOS- и Android-приложения превысило 1 000 000.<\/li>\n<li>В среднем пользователи заходят в приложение 109 раз в месяц.<\/li>\n<li>В пиковые месяцы приложение набирало 350 000 активных пользователей.<\/li>\n<\/ul>\n<p class=\"foot\">Посты и отзывы, показанные в кейсе, отражают частные субъективные мнения пользователей. Разработчики приложения не присоединяются к мнению их авторов.<\/p>\n<p><b>Евгений Смирнов<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/eugeny-entw\/\"><b>Евгений Гребенщиков<\/b><\/a><br \/>\nАрт-директор<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-05-22T10:12:41+05:00",
            "date_modified": "2026-06-22T17:06:29+05:00",
            "tags": [
                "android",
                "b2c",
                "мобильное приложение",
                "образование",
                "портфолио"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Raspisanie3@2x.jpg",
            "_date_published_rfc2822": "Fri, 22 May 2026 10:12:41 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Raspisanie3@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka5.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Raspisanie3.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Zanyatie2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Izbrannye_Raspisaniya1.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Izbrannye_Raspisaniya_Redaktirovanie2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Otzyvy@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Stranica_Prepodavatelya@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver0.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Napisani_otzyva_ver2.2@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Temnaya_tema@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Cvetnye_temy@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_Ver1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_Ver1.1@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_variacii_knopki@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Lenta_so-storisami3@2x.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/post_dnya1@2x-1.jpg"
                ]
            }
        },
        {
            "id": "4",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/veka-ecosystem\/",
            "title": "VEKA Еcosystem — Объединил в единый сервис каталог, калькулятор окон и форму заявки, чтобы покупатели могли выбрать окна и заказать их в одном месте",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Cover.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">В приложении пользователи выбирают оконные профили и фурнитуру, взаимодействуют с их интерактивными 3D-моделями и отправляют заявку на расчёт стоимости, замер и изготовление окон. К заявке можно приложить черновик окна, созданный в калькуляторе.<\/p>\n<h2>На проекте<\/h2>\n<ol start=\"1\">\n<li>Собрал схему связи сервисов между собой и согласовал её с аналитиками.<\/li>\n<li>Продумал навигационную модель интерфейса, взяв за основу линейно-параллельную навигацию каталога.<\/li>\n<li>Вместе с Backend-разработчиком унифицировали визуальное отображение окна, чем упростили создание его вариаций в админке и ускорили отрисовку моделей в приложении.<\/li>\n<li>Инициировал внедрение брендированных иллюстраций, чтобы усилить визуальную идентичность продукта и упростить передачу состояний интерфейса.<\/li>\n<li>Обсуждал реализацию интерфейса с разработчиками и находил альтернативу спорным решениям.<\/li>\n<\/ol>\n<h2>Клиент<\/h2>\n<p><a href=\"https:\/\/www.veka.ru\/\">VEKA Rus<\/a> — дочерняя компания концерна VEKA AG — мирового лидера в производстве оконных конструкций с годовым оборотом 1,5 млрд. €.<\/p>\n<h2>Задача<\/h2>\n<p>Бизнес решил объединить приложения «Каталог VEKA», «Замерщик окон 2.0», «VEKA Конфигуратор AR», «VEKA Калькулятор» и административную панель в единый сервис. Это должно сократить время создания, обработки и выполнения заявок от клиентов.<\/p>\n<p>Моей задачей было спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях.<\/p>\n<h2>Решение<\/h2>\n<p>Спроектировал интерфейс с бесшовной навигацией и двусторонней связью между каталогом, калькулятором и формой заявки.<\/p>\n<h2>Калькулятор как самостоятельный раздел приложения<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Novoe-okno1.2.jpg\" width=\"1532\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p><b>Эргономика элементов управления<\/b><br \/>\nЧеловек меняет параметры окна и комбинирует их в произвольном порядке, поэтому окно настраивается на одном экране, а не пошаговой формой:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Nastroennoe-okno.jpg\" width=\"2560\" height=\"2155\" alt=\"\" \/>\n<\/div>\n<p><b>Поля ввода<\/b><br \/>\nВ горизонтальной ориентации клавиатура занимает половину экрана, поэтому поля ввода планировал открывать в модально-диалоговом окне, чтобы не прокручивать форму:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Modalnoe-pole-vvoda1.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p>Во время обсуждения с разработчиками выяснилось, что реализовать стабильное поведение модального окна над клавиатурой не получится. Поэтому остановились на варианте с прокруткой формы при фокусе на поле ввода:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Pole-vvoda.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p><b>Модальное окно<\/b><br \/>\nРасположил модальное окно с выбором ламинации в правой части экрана, чтобы палец после нажатия на поле мог сразу взаимодействовать с ним без дополнительного движения к центру экрана:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/modalnoe-okno-right.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p>Идея пришла не сразу. Чтобы реализовать её, пришлось бы менять расположение модальных окон в уже готовом дизайне, поэтому в финальной версии модальное окно осталось по центру:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/modalnoe-okno-center.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p><b>Оптимизировали визуальное отображение окна<\/b><br \/>\nРаньше дизайнер под каждую комбинацию створок рисовал отдельную 3D-модель, а админ вручную назначал нужную картинку для каждого набора условий.<\/p>\n<p>Проблемы:<\/p>\n<ol start=\"1\">\n<li>Тяжёлые картинки долго рендерились.<\/li>\n<li>Нагружалось хранилище сервера.<\/li>\n<li>Админ мог ошибиться при выборе нужной картинки из множества вариантов.<\/li>\n<\/ol>\n<p>Вместе с Backend-разработчиком пришли к системе из основ конструкций и набора створок, которые админ может комбинировать с помощью сдвигов по координатам.<\/p>\n<p>Основы конструкций:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Base-template1.jpg\" width=\"2560\" height=\"458\" alt=\"\" \/>\n<\/div>\n<p>Створки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Stvorka-1.1.jpg\" width=\"2560\" height=\"1575\" alt=\"\" \/>\n<\/div>\n<p>Красивые модели окон остались в каталоге. В калькуляторе важнее быстро различать конструкцию окна, поэтому визуально упростил модели.<\/p>\n<p class=\"loud\">Вместо сотни картинок получился конструктор из лёгких джепегов которые быстро рендерятся в приложении.<\/p>\n<p><b>Сейчас я бы улучшил интерфейс<\/b><br \/>\nСнизил визуальный шум, увеличил изображение окна и разделил кнопки иерархией:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Nastroennoe-okno-koncept-1.jpg\" width=\"2560\" height=\"2376\" alt=\"\" \/>\n<\/div>\n<p>А ещё лучше — подумал, как превратить калькулятор в интерактивный лендинг, который совмещает рассказ о продукте с его настройкой.<\/p>\n<h2>Связь созданного окна в калькуляторе с формой заявки<\/h2>\n<p><b>Шаг 1 — контактные данные<\/b><br \/>\nПосле нажатия на кнопку «Рассчитать стоимость» открывается форма заявки. Если пользователь авторизован, контактные данные заполняются автоматически:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-1.2.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p><b>Шаг 2 — окна для расчёта<\/b><br \/>\nОтображается окно, которое пользователь только что создал в калькуляторе. Можно скорректировать размеры, профиль и цвет фурнитуры, добавить москитные сетки и монтаж:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-2.4.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p><b>Шаг 3 — уточнения<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka,-shag-3.2.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Zayavka-otpravlena-1.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p><b>Брендированные иллюстрации<\/b><br \/>\nНа страницах брендбука нашёл форменные «наряды» сотрудников. Появилась идея создать иллюстрации, которые передают ценности бренда, усиливают идентичность продукта и помогают объяснять состояния системы на человеческом языке.<\/p>\n<p>Подготовил презентацию для клиента о том, зачем бренду и интерфейсу нужны иллюстрации, и отрисовал концепты:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Koncpet.jpg\" width=\"2560\" height=\"663\" alt=\"\" \/>\n<\/div>\n<p>Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Devushka.jpg\" width=\"2560\" height=\"896\" alt=\"\" \/>\n<\/div>\n<p>Иллюстратор спросила, делать персонажей в полный рост или по пояс. Я выбрал второе, потому что действие на иллюстрациях происходит в верхней части тела. Смысловая часть увеличилась в размере и стала быстрее распознаваться:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Muzhchina.jpg\" width=\"2560\" height=\"983\" alt=\"\" \/>\n<\/div>\n<h2>С каждой страницы продукта в каталоге можно перейти в калькулятор с предзаполненными параметрами окна<\/h2>\n<p>Например, профилем и его ламинацией:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Katalog-Kalkulyator.jpg\" width=\"2303\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p>Добавил хлебные крошки с выпадающими списками, которые позволяют переключаться между разделами каталога и страницами продуктов внутри текущей категории.<\/p>\n<p>Например, можно переключаться между детальными страницами продуктов одной категории, чтобы сравнить их:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Stranica-resheniya.jpg\" width=\"2560\" height=\"1413\" alt=\"\" \/>\n<\/div>\n<p>Или перескочить в другой раздел каталога. Например, выбрать дверь после просмотра окон:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Urovni-vlozhennsti.jpg\" width=\"2560\" height=\"1104\" alt=\"\" \/>\n<\/div>\n<h2>С каждой страницы продукта в каталоге можно оформить заявку на расчёт стоимости и изготовление<\/h2>\n<p>На втором шаге заявки можно выбрать окна для расчёта, которые были созданы в калькуляторе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Katalog-Zayavka-shag-2.1.jpg\" width=\"1532\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p><b>Или создать новое окно:<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Dobavit-konstrukciyu-vruchnuyu.jpg\" width=\"2303\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Вывод<\/h2>\n<p>Удалось ли спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях?<\/p>\n<p class=\"loud\">Да. Я объединил каталог, калькулятор окон и форму заявки в единую систему с бесшовными переходами между сценариями выбора, настройки и оформления окон. Покупатели могут в одном месте принять решение о покупке окон.<\/p>\n<h2>Что было самым сложным<\/h2>\n<p>Сохранить паттерны навигации, которые сложились в существующих сервисах.<\/p>\n<p><b>Как я с этим справился<\/b><br \/>\nРазобрался, как устроены существующие сервисы и как они будут связаны между собой. После этого придерживался правила: навигация должна быть последовательной и обратимой.<\/p>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p>Приложение выпущено в 2023. После выпуска я завершил участие в проекте.<\/p>\n<p>Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.<\/p>\n<p><b>Евгений Смирнов<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/eugeny-entw\/\"><b>Евгений Гребенщиков<\/b><\/a><br \/>\nАрт-директор<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-05-12T11:32:50+05:00",
            "date_modified": "2026-06-22T17:06:41+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": true,
                "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": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka-1.2.png.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p class=\"lead\">Приложение FlippingBook позволяет менеджерам продаж брать с собой маркетинговые и коммерческие материалы для презентации товаров и услуг, делиться ими и отслеживать статистику их просмотра.<\/p>\n<h2>На проекте<\/h2>\n<ol start=\"1\">\n<li>Проводил ревью iOS-версии дизайна и формировал предложения по адаптации интерфейса под Android и улучшению кастомных элементов.<\/li>\n<li>Корректировал свои предложения с учётом ограничений разработки.<\/li>\n<li>Согласовывал результаты ревью с арт-директором, дизайнером клиента и самим клиентом.<\/li>\n<li>Дизайнил интерфейс Android-приложения для телефона и планшета.<\/li>\n<\/ol>\n<h2>Клиент<\/h2>\n<p><a href=\"https:\/\/flippingbook.com\/\">FlippingBook<\/a> предоставляет ИТ-решения для работы с флипбуками компаниям из Fortune 500. Флипбуки — электронные каталоги и презентации с эффектом перелистывания страниц и интеграцией звука, видео, ссылок и корзины покупок.<\/p>\n<h2>Задача<\/h2>\n<p>Увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков.<\/p>\n<h2>Решение<\/h2>\n<p>Приложение, которое позволяет управлять материалами без привязки к офису: делиться ссылками, отслеживать статистику взаимодействий, получать уведомления об открытиях и загружать для офлайн-просмотра.<\/p>\n<p>Интерфейс адаптировал по гайдлайнам Google Material Design 2, а позднее обновил по Material You. Такой подход обеспечил современный внешний вид, привычное и предсказуемое поведение элементов, сократил бюджет на разработку и поддержку.<\/p>\n<h2>Как выстроил процесс<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Process_@2x.png.jpg\" width=\"2560\" height=\"1348\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения<\/div>\n<\/div>\n<p><b>Работа строилась спринтами<\/b><\/p>\n<ol start=\"1\">\n<li>Изучал техническое задание.<\/li>\n<li>Получал от дизайнера клиента iOS-макеты. Отсматривал их и отмечал, какие элементы будут адаптированы и улучшены.<\/li>\n<li>Сначала обсуждал предложения с арт-директором и дизайнером клиента, некоторые отсеивали или искали им замену, которая устроит обе стороны: обновились требования, недопонял макет, попал в ограничения разработки — рабочий процесс. Затем предложения аргументировал клиенту.<\/li>\n<li>После согласования собирал макеты Android-приложения.<\/li>\n<\/ol>\n<h2>Сначала адаптировал навигационные элементы<\/h2>\n<p><b>Верхняя навигационная панель<\/b><\/p>\n<ol start=\"1\">\n<li>Увеличил высоту.<\/li>\n<li>Поменял серую заливку на белую.<\/li>\n<li>Убрал разделитель.<\/li>\n<\/ol>\n<p>Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/TopAppBar1.12x.png.jpg\" width=\"2560\" height=\"1185\" alt=\"\" \/>\n<\/div>\n<p>Когда страница прокручивается, появляется тень, отделяющая панель от содержимого:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/TopAppBar_OnScroll1.12x.png.jpg\" width=\"2560\" height=\"1185\" alt=\"\" \/>\n<\/div>\n<p><b>Нижняя навигационная панель<\/b><\/p>\n<ol start=\"1\">\n<li>Сравнял по размеру с верхней, чтобы элементы навигации имели общий признак и проще распознавались.<\/li>\n<li>Повысил контраст между активным и неактивным разделами.<\/li>\n<li>Облегчил цвет заливки и вместо разделителя добавил тень для изоляции от содержания.<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/BottomNavBar1.12x.png.jpg\" width=\"2560\" height=\"1185\" alt=\"\" \/>\n<\/div>\n<p>Впоследствии обновил навигационные панели по гайдлайнам Material YOU:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Panels-MYou-1.4@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p><b>Переходы к вложенным страницам сделал полноэкранными<\/b><br \/>\nСледующая страница появляется над текущей, двигаясь справа налево. Предыдущая появляется из-под текущей, которая сдвигается слева направо:<\/p>\n<div style=\"position: relative; padding-top: 68.23%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/s7s8ua1j6L25dhdBm74JqT\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p><b>Переключатель содержимого секции<\/b><br \/>\nСделал во всю ширину экрана, потому что он меняет содержимое секции, а не значение параметра внутри неё:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Graph1.1@2x.png.jpg\" width=\"2560\" height=\"1319\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Links1.1@2x.png.jpg\" width=\"2560\" height=\"1504\" alt=\"\" \/>\n<\/div>\n<p>На планшете ограничил ширину сегментов переключателя, чтобы сохранить его целостность и обозначить область нажатия сегмента:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Tablet_Tabs1@2x.png.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p><b>Панель инструментов<\/b><br \/>\nНа странице флипбука, в панели инструментов увеличил область нажатия кнопок-иконок, поменял серую заливку на белую, чтобы сохранить общий признак с навигационными панелями:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Toolbar1.1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<h2>После навигации занялся адаптацией элементов управления<\/h2>\n<p><b>Поиск<\/b><br \/>\nВместо появления строки поиска внутри верхней панели навигации, панель становится полем ввода. Переход получается линейным, высота панели остаётся прежней:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/search@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p><b>Меню действий с флипбуком<\/b><br \/>\nУдалил «flipbook» из названия пунктов, чтобы действия считывались лучше. Так можно, потому что меню открывается при нажатии на три точки у карточки флипбука, и действия контекстуально относятся к нему:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_1.1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p>Добавил иконки пунктам «создание публичной ссылки» и «Удаление», чтобы выделить их как ключевые и опасные действия<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_2.1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p>Впоследствии обновил меню по гайдлайнам Material YOU:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_3@2x.png\" width=\"1920\" height=\"1310\" alt=\"\" \/>\n<\/div>\n<p><b>Затемнение без размытия<\/b><br \/>\nЭкран ожидания открытия флипбука в iOS сделан с размытием фона. Выяснил у Android-разработчиков, что на реализацию размытия уйдет много времени, а результат будет отличаться от дизайна. Оставил затемнение с использованием фирменного цвета:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Overlay_Loader_@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<h2>Небольшие элементы тоже влияют на целостность восприятия интерфейса, сделал их привычными<\/h2>\n<p><b>Троббер<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Trobber@2x.png.jpg\" width=\"2560\" height=\"1185\" alt=\"\" \/>\n<\/div>\n<p><b>Выбор одного значения из множества<\/b><br \/>\nЗаменил галочку на радиокнопки и сразу показал два варианта порядка сортировки вместо кнопки, которая вызывает всплывающее окно для выбора:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/SortingMenu_Android1.2@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p><b>Диалоговое окно<\/b><br \/>\nВместо барабана сделал список радиокнопок:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Dialog1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p><b>Тумблер<\/b><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Swtich1@2x.png.jpg\" width=\"2560\" height=\"491\" alt=\"\" \/>\n<\/div>\n<h2>Когда приложение уже выглядело и вело себя как андроидное, улучшал кастомные элементы<\/h2>\n<p><b>Разделитель<\/b><br \/>\nСсылки сгруппированы по дате создания и разделяются отцентрованной линией, но из-за одинакового стиля разделителей список сливается в единую массу.<\/p>\n<p>Сделал разделитель во всю ширину для разделения дат. Разделитель, прижатый к правому краю и с отступом от левого края, разделяет ссылки, вложенные в дату:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/DividersList1.1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p>В результатах поиска флипбуков использовал тот же принцип: первый элемент в иерархии — папка, а второй — флипбуки, вложенные в неё:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Dividers-Search-1.1@2x.png.jpg\" width=\"2560\" height=\"1747\" alt=\"\" \/>\n<\/div>\n<p><b>Настройка сортировки<\/b><br \/>\nПереместил кнопку сортировки в верхнюю часть экрана и сравнял по акцентности с поиском, чтобы логически их связать — обе функции помогают ориентироваться в списке.<\/p>\n<p>При прокрутке вниз кнопка уезжает под верхнюю панель, чтобы освободить вертикальное пространство для содержания, а при прокрутке вверх — появляется обратно:<\/p>\n<div style=\"position: relative; padding-top: 68.23%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/s23RyZqRQ4snc9eLFSpV3s\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p>Для смартфонов с диагональю 5,5-5,7 дюймов предложил показывать шит сортировки сверху вниз. Кнопка перехода к нему расположена вверху экрана, поэтому после нажатия палец остаётся сверху и сразу может взаимодействовать с настройками:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/TopSortingMenu1@2x.png.jpg\" width=\"2560\" height=\"1619\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Идея интересная, но финально реализовали универсальное поведение для всех смартфонов.<\/div>\n<\/div>\n<h2>Вывод<\/h2>\n<p>Удалось ли увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков?<\/p>\n<p class=\"loud\">Да. Приложением начали пользоваться клиенты веб-версии продукта. За год их число выросло до 10 000, а ещё через год — до 50 000. Андроид-приложение следует принципам платформы, сохраняя привычную пользователям рутину и освобождая их сознание для осмысленных задач.<\/p>\n<h2>Что было самым сложным<\/h2>\n<p>Двойное согласование: сначала с дизайнером клиента, затем с самим клиентом. Аргументация отнимала много времени и сил, а часть идей в первых спринтах отсекалась одним словом: «Нет».<\/p>\n<p><b>Как я с этим справился<\/b><br \/>\nИзменил подход к аргументации. Для дизайнера: с опорой на гайдлайны, ограничения разработки, реальные примеры и опыт с других проектов. Для клиента: улучшения для пользователя → какую пользу они принесут бизнесу.<\/p>\n<p>В сложных ситуациях, чтобы ускорить согласование, просил помощи у арт-директора. С высоты своего опыта ему проще давался живой диалог с клиентом.<\/p>\n<h2>Отзыв о работе<\/h2>\n<blockquote>\n<p>«Мы сотрудничаем с IceRock Dev уже больше 2 лет. Процесс продолжается, впереди еще много целей. <b>Отзыв о совместной работе могу оставить самый положительный<\/b>. ... »<br \/>\n<i>Алексей Родионов, руководитель проекта со стороны клиента<\/i><\/p>\n<\/blockquote>\n<h2>Что сейчас происходит с продуктом<\/h2>\n<p>Количество клиентов компании FlippingBook растет, а вместе с ним — и количество пользователей приложения.<\/p>\n<p>Я завершил своё участие в проекте и с интересом наблюдаю за улучшениями и изменениями, которые органично развивают мой дизайн.<\/p>\n<p>Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.<\/p>\n<p><b>Евгений Смирнов<\/b><br \/>\nДизайнер<\/p>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/eugeny-entw\/\"><b>Евгений Гребенщиков<\/b><\/a><br \/>\nАрт-директор<\/p>\n<p><a href=\"https:\/\/icerockdev.ru\/\"><b>IceRock Development<\/b><\/a><br \/>\nКоманда разработки<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"https:\/\/t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-04-09T21:24:40+05:00",
            "date_modified": "2026-06-22T17:06:58+05:00",
            "tags": [
                "android",
                "b2b",
                "protopie",
                "saas",
                "интерактив",
                "мобильное приложение",
                "портфолио",
                "цифровые публикации"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka-1.2.png.jpg",
            "_date_published_rfc2822": "Thu, 09 Apr 2026 21:24:40 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Oblozhka-1.2.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Process_@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/TopAppBar1.12x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/TopAppBar_OnScroll1.12x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/BottomNavBar1.12x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Panels-MYou-1.4@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Graph1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Links1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Details_Tablet_Tabs1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Toolbar1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/search@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_2.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Actions_Menu_3@2x.png",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Overlay_Loader_@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Trobber@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/SortingMenu_Android1.2@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Dialog1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Swtich1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/DividersList1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Dividers-Search-1.1@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/TopSortingMenu1@2x.png.jpg"
                ]
            }
        },
        {
            "id": "3",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/slanted-publishers\/",
            "title": "Сайт издательства о дизайне и медиа «Slanted Publishers»",
            "content_html": "<p>Сделал дизайн-концепт и продумал взаимодействия с содержанием.<\/p>\n<h2>Задача<\/h2>\n<p>Объединить выразительную верстку с читаемостью и продуманными взаимодействиями.<\/p>\n<h2>Посадочная каталога<\/h2>\n<p>Размер карточек меняется в зависимости от важности содержания: крупные — новости, средние — публикации, малые — товары.<\/p>\n<p>Изменение размеров создаёт ощущение глубины, побуждая продолжать прокрутку.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Posadochnaya-kataloga@2x.png.jpg\" width=\"1682\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Принцип работы горизонтальной прокрутки<\/h2>\n<div style=\"position: relative; padding-top: 28.44%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/cHgwtk8dbpaCSxQdSx1CjW\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Povedenie-gorizontalnoi-prokrutki-@2x.png.jpg\" width=\"2560\" height=\"791\" alt=\"\" \/>\n<\/div>\n<p>Контейнер прокручивается в сторону движения курсора на пройденное мышкой расстояние.<\/p>\n<p>Когда курсор попадает в область контейнера прокрутки, запускается отслеживание его координат. Точка входа по <b>X<\/b> фиксируется в переменную <b>mouse_x_start<\/b> и становится точкой отсчёта. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в <b>mouse_x_present<\/b>.<\/p>\n<p>В ответ на изменение положения курсора `Content Container` прокручивается с помощью «scroll to» по формуле:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">round(\nmax( \/* Округляет число для плавной прокрутки *\/\n0,\nmin( \/* Задаёт границу прокрутки вправо равную максимально возможному значению прокрутки *\/\n`Content`.width - `Content Container`.width,\nscroll_offset_start\n+ (\nmouse_x_present\n- mouse_x_start\n)\n* 2 \/* Дистанция, пройденная курсором, с множителем для ускорения прокрутки *\/\n)\n)\n)<\/code><\/pre><h2>Прокрутка за пределами экрана<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Prokrutka-za-predelami-ekrana@2x.png.jpg\" width=\"2560\" height=\"1063\" alt=\"\" \/>\n<\/div>\n<p>Не смотря на то, что курсор упёрся в границу экрана, мышь продолжает движение, а следовательно продолжается и прокрутка контента.<\/p>\n<p>После движения, например вправо, при возврате мыши с отрывом от стола на 1—2 мм сенсор перестаёт считывать её положение. Курсор остаётся зафиксированным у границы, а следующее движение в ту же сторону продолжает прокрутку без рывков.<\/p>\n<p>Зафиксированный у края курсор легко повести в обратную сторону для изменения направления прокрутки.<\/p>\n<p>Для прокрутки также можно использовать тачпад или мышку с боковым колесом.<\/p>\n<h2>Категория с группировкой по тегам<\/h2>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/xyFh3PSuE1vDgcaPSFd78M\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><h2>Огранчиение горизонтальной прокрутки при быстром вериткальном движении курсора<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Ogranichenie-prokrutki@2x.png.jpg\" width=\"2560\" height=\"816\" alt=\"\" \/>\n<\/div>\n<p>Пользователь может вести курсор до нужной секции по вертикали, а затем диагональным движением начать её прокрутку.<\/p>\n<p>Если пересечь контейнер прокрутки быстрым вертикальным движением курсора, то он останется в состоянии покоя.<\/p>\n<p>Точка входа по <b>X<\/b> и <b>Y<\/b> фиксируются в переменные <b>mouse_x_start<\/b> и <b>mouse_y_start<\/b>. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в переменные <b>mouse_x_present <\/b> и <b>mouse_y_present<\/b>.<\/p>\n<p>Для включений горизонтальной прокрутки проверются условия:<\/p>\n<p><b>№1<\/b><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">abs(\n  mouse_x_present - mouse_x_start\n)\n&gt; 16 px \/* Смещение курсора по X в диапазоне 0–16 px считается случайным, чтобы избежать дёргания контейнера *\/<\/code><\/pre><p><b>№2<\/b><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">abs(\n  mouse_x_present - mouse_x_start\n) \/* Путь, пройденный курсором по горизонтали *\/\n≥\nabs(\n  mouse_y_present - mouse_y_start\n) \/* Путь, пройденный курсором по вертикали *\/<\/code><\/pre><h2>Навигация между тегами<\/h2>\n<div style=\"position: relative; padding-top: 38.54%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/jbHMKbc6U97km5M3XRzg2k\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><h2>Поиск<\/h2>\n<p>Если результатов поиска > 10, они группируются по тегам, как на страницах News, Publisher и Shop:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-bolshe-10@2x.png.jpg\" width=\"2560\" height=\"1227\" alt=\"\" \/>\n<\/div>\n<p>Если результатов поиска ≤ 10, они отображаются в одной горизонтальной строке:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-menshe-10@2x.png.jpg\" width=\"2560\" height=\"2211\" alt=\"\" \/>\n<\/div>\n<h2>Детальная страница<\/h2>\n<p><b>Галерея с вертикальной прокруткой<\/b><\/p>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/uDvEVCHvGPBKanqBGXki3C\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p>Модуль просмотра подстраивается под соотношения 21:9, 2:1, 16:9, 4:3, 1:1, 3:4:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Modul-vybrannogo-izobrazheniya@2x.png.jpg\" width=\"2560\" height=\"1075\" alt=\"\" \/>\n<\/div>\n<p><b>Экспрессивная вёрстка<\/b><\/p>\n<div style=\"position: relative; padding-top: 47.92%; width: 100%\"><iframe src=\"https:\/\/kinescope.io\/embed\/m3bgBo3qTSxZxUToD6fcbW\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"><\/iframe>\n<\/div><p class=\"loud\">Создал выразительную и структурированную вёрстку, продумал взаимодействия с ней. Пользователь вовлекается в содержание, а бизнес поддерживает сайт без привлечения дизайнера.<\/p>\n<p>Применил знания о динамических свойствах композиции, передаче характера формой и об отношениях элементов, чтобы собрать их в единую историю.<\/p>\n<p>Макеты оживлял в ProtoPie. Зондируя идею, учёл краевые сценарии и отсеял плохие решения до разработки. И да, использовал ИИ — процесс похож на вайбкодинг, но код провалидировать я не могу, а вот логику внутри ProtoPie — могу.<\/p>\n<p>Дизайн сделал в начале 2025.<\/p>\n<p class=\"foot\">© Изображения и текстовые материалы, использованные в концепте, принадлежат Slanted Publishers и взяты с <a href=\"https:\/\/www.slanted.de\/.\">https:\/\/www.slanted.de\/.<\/a><\/p>\n<p class=\"foot\">© Семейство шрифтов: Pragmatica Next by Paratype <a href=\"https:\/\/www.paratype.ru\/.\">https:\/\/www.paratype.ru\/.<\/a><\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"t.me\/eugenius_dsgn\">Телеграм<\/a><\/h2>\n",
            "date_published": "2026-03-29T13:16:05+05:00",
            "date_modified": "2026-05-12T11:38:30+05:00",
            "tags": [
                "protopie",
                "вёрстка",
                "интерактив",
                "портфолио",
                "сайт",
                "типографика",
                "эксперимент"
            ],
            "image": "https:\/\/yevgeniysmirnov.ru\/pictures\/Posadochnaya-kataloga@2x.png.jpg",
            "_date_published_rfc2822": "Sun, 29 Mar 2026 13:16:05 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Posadochnaya-kataloga@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Povedenie-gorizontalnoi-prokrutki-@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Prokrutka-za-predelami-ekrana@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Ogranichenie-prokrutki@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-bolshe-10@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Rezultatov-poiska-menshe-10@2x.png.jpg",
                    "https:\/\/yevgeniysmirnov.ru\/pictures\/Modul-vybrannogo-izobrazheniya@2x.png.jpg"
                ]
            }
        },
        {
            "id": "2",
            "url": "https:\/\/yevgeniysmirnov.ru\/all\/abex-windows\/",
            "title": "Сайт производителя противоураганных окон и дверей из Флориды",
            "content_html": "<p>Обновил дизайн страниц «О компании», «Услуги», «Каталог» и «Детали продукта». Новые страницы структурированно подают информацию и масштабируются без участия дизайнера.<\/p>\n<h2>Задачи<\/h2>\n<ol start=\"1\">\n<li>Cтруктурированно подать информацию об услугах и продуктах компании, чтобы повысить доверие клиентов.<\/li>\n<li>Обновить визуал, чтобы он шёл в ногу с технологиями, которые применяются в продукции.<\/li>\n<\/ol>\n<h2>О компании<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Home@2x.png.jpg\" width=\"2560\" height=\"1440\" alt=\"\" \/>\n<\/div>\n<p>Пункты навигации сгруппированы и дополнены описанием, которое раскравает экспертизу компании и спектр её услуг.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-1@2x.png.jpg\" width=\"2271\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Abous-Us-2@2x.png.jpg\" width=\"2108\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<p>Для фона используется близкий к бетону оттенок, который передаёт ощущение устойчивости и надёжности.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Color-background@2x.png\" width=\"1920\" height=\"368\" alt=\"\" \/>\n<\/div>\n<h2>Услуги<\/h2>\n<p>Страницы устроены единообразно, чтобы сайт был «стабильным»: одинаково работал как на уровне иерархии информации, так и на уровне взаимодействия с интерфейсом.<\/p>\n<p>При этом построение адаптируется под разную информацию и её объём, вовлекая в просмотр за счёт ритмических соотношений элементов.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Services@2x.png.jpg\" width=\"2560\" height=\"2309\" alt=\"\" \/>\n<\/div>\n<h2>Направления продукции<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Products@2x.png.jpg\" width=\"2560\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Каталог<\/h2>\n<p>Сетка позволяет добавлять новые категории по мере расширения ассортимента без привлечения дизайнера.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Catalog@2x.png.jpg\" width=\"1972\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Страница продукта<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/ProductsDetails@2x.png.jpg\" width=\"1789\" height=\"2560\" alt=\"\" \/>\n<\/div>\n<h2>Модуль предпросмотра<\/h2>\n<p>Панорамные изображения 21:9 и 2:1 фиксируются по высоте и выходят за пределы модуля по ширине, благодаря чему основной объект остаётся по центру, крупным и читаемым.<\/p>\n<p>Форматы 1:1 и 4:3 фиксируются по высоте и ширине, чтобы сохранить детали верхней части изображения.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Preview-module@2x.png.jpg\" width=\"2560\" height=\"1936\" alt=\"\" \/>\n<\/div>\n<h2>Сетка<\/h2>\n<p>В основе сетки — фотография выполненной работы компании, а именно её левая часть, где окна уходят в перспективу и имеют разную визуальную ширину. Изменяющиеся по ширине колонки формируют горизонтальный ритм, который создаёт ощущение движения в глубину.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/LayoutSystem@2x.png.jpg\" width=\"2560\" height=\"1843\" alt=\"\" \/>\n<\/div>\n<p>Сетка адаптируется под разную информацию и её объём за счёт дополнительных направляющих линий и трёх размеров шрифта: 32 px — для навигации, 96 — заголовков, 24 — основного текста.<\/p>\n<p>Страницы выглядят целостно и масштабируются без участия дизайнера.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/yevgeniysmirnov.ru\/pictures\/Layout-System2@2x.png.jpg\" width=\"2560\" height=\"1717\" alt=\"\" \/>\n<\/div>\n<p>Дизайн сделал в середине 2024.<\/p>\n<p class=\"foot\">© Большинство изображений и текстовых материалов в концепте принадлежат Abex Windows и взяты с <a href=\"https:\/\/abexwindows.com\/.\">https:\/\/abexwindows.com\/.<\/a> Остальные сгенерированы с помощью ИИ.<\/p>\n<h2><a href=\"mailto:smirnov.evgeniy789@gmail.com\">Электропочта<\/a> • <a href=\"t.me\/eugenius_dsgn\">Телеграм<\/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": true,
                "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)"
}