Евгений Смирнов: заметки с тегом сайт

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

Tue, 23 Jun 2026 00:03:12 +0500

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

На проекте

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

Задача

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

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

Главная

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доставка

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

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

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

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

Самовывоз

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

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

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

Корзина

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

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

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

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

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

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

Авторизация

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

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

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

Форма заказа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

Сайт издательства о дизайне и медиа «Slanted Publishers»

Sun, 29 Mar 2026 13:16:05 +0500

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

№1

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

№2

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

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

Поиск

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

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

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

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

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

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

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

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

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

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

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

Сайт производителя противоураганных окон и дверей из Флориды

Sat, 14 Feb 2026 14:02:42 +0500

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

Задачи

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

О компании

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

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

Услуги

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

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

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

Каталог

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

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

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

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

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

Сетка

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

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

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

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