Константин ПатринUI Case Study · Test taskUI Case Study 2026
От исходных условий и референсов до трёх стадий лидерборда, HUD-иконки и финальной итерации после ревью.
01 / Исходные условия
Нужно было перенести событие Space Mission из Royal Match в целевую игру: подготовить лидерборд и отдельную HUD-иконку. Механику требовалось сохранить, а визуальный язык полностью адаптировать под продукт.
Подготовить событие-копию Space Mission из Royal Match в стилистике целевой игры: сохранить механику вертикальной гонки внутри горизонтального окна.
Разработать одно состояние HUD-иконки того же события и проверить его на реальном игровом экране.
Уместить вертикальное соревнование игроков в горизонтальное окно, не потеряв ни один обязательный элемент референса.
Подготовить примеры лидерборда для события-копии Space Mission из Royal Match в целевую игру. Подача должна быть аналогичной, но полностью адаптированной под стилистику игры: исследование космоса и полёты к разным планетам.
Подготовить HUD-иконку для того же события-аналога Space Mission в целевую игру.
02 / Входные материалы
Референсы, первые композиции, варианты лидерборда, стадии, промежуточные HUD-иконки и финальные исходники. То есть процесс был итерационным, а не одной генерацией «сразу красиво».
03 / Ход работы
Работу выстроил от декомпозиции до пользовательской проверки и финальной сборки.
Сначала зафиксировал состав лидерборда и требования к HUD. Это позволило не смешивать композиционные решения большого окна и маленькой иконки.
Результат этапа: список обязательных элементов и ограничений.
Под «событием-копией» я понимаю сохранение механики, обязательных элементов и общей логики референса — все ракеты стремятся к финишной черте, где важной частью является сундук, к которому, по сути, и стремятся ракеты. В задании прямо указано, что сундук и остальные содержательные элементы должны быть сохранены.
Основной вопрос у меня вызвало положение сундука. В вертикальном референсе он естественно занимает центр верхней части экрана, но в горизонтальном формате такое решение может сократить пространство для движения ракет и ослабить читаемость самой гонки.
Я отдельно уточнил возможность менять шапку, таймер и расположение объектов, чтобы увеличить полезное пространство для гонки. Ответы оунера оставили эти решения на моё усмотрение как часть оценки навыков, поэтому однозначной границы между точным переносом и композиционной адаптацией не возникло.
В качестве рабочей трактовки фразы «событие-копия» я решил сохранить сундук на финише и его роль в UX-механике, но изменить шапку и найти место для таймера.
Результат этапа: style frame и критерии стилизации.
Проверил размещение шапки, награды, вертикальных треков, игроков, имён, счётчиков и условия прохождения в горизонтальном окне.
Результат этапа: выбранная функциональная схема основного варианта.
Параллельно прорабатывал три градации ракет, сундука и поверхностей Луны, Марса и Сатурна. Все элементы проверял в малом масштабе.
Результат этапа: единая база ассетов для трёх стадий.
Настроил фон, арт шапки, рамы, треки и визуальную иерархию. После этого на общей конструкции сделал ещё две атмосферно-цветовые версии.
Результат этапа: три согласованные стадии с общей UX-логикой.
Главным объектом сделал ракету, сохранил заданную форму виджета и проверил, что иконка не теряется среди других HUD-элементов.
Результат этапа: одно финальное состояние HUD-иконки.
Взял ТЗ на дополнительную доработку.
Результат этапа: финальные макеты.
Внёс четыре изменения:
Доработал сундук: упростил форму и усилил казуальные черты.
Упростил постамент.
Лучше вписал рамку в артовую часть.
В проанализированных лидербордах целевой игры собственный транспорт игрока обозначен красным, а транспорт соперников — синим. Чтобы сохранить знакомую игрокам цветовую логику, в следующей итерации цвета ракет были скорректированы.
Итоговый интерфейс был собран в PSD. Генерацию использовал для поиска и отдельных художественных элементов, а композицию, стилизацию и финальную сборку контролировал вручную.
Результат этапа: превью, исходник лидерборда и исходник HUD.
04 / Передача результата
Рабочий файл со стадиями, UI и подготовленными ассетами.
Отдельный рабочий файл финальной иконки события.
05 / Итоговые макеты
Интерактивный прототип позволяет проверить сценарий прямо на странице. Ниже собраны четыре состояния лидерборда и HUD-иконка из оригинальных вложений Asana в полном разрешении.
Прототип встроен из финальной ссылки в задаче Asana. Нажимайте на активные элементы внутри игрового окна, чтобы пройти подготовленный сценарий.
Если прототип не загрузился, откройте его кнопкой выше — некоторые браузеры ограничивают встроенный контент.
Вертикальное движение работает внутри горизонтального окна.
Форма, цвет, материалы и рендер адаптированы под продукт.
Миссия 1 проработана, миссии 2 и 3 в цветовом решении, иконка для HUD и рабочие исходники.
06 / Затраченное время
Время зафиксировано по рабочему комментарию в Asana и дополнено согласованной финальной доработкой T3.
| № | Этап | Содержание | Время |
|---|---|---|---|
| 01 | Декомпозиция и планирование | Этапы, риски и параллельные направления работы | 2 ч |
| 02 | Три макета лидерборда | Сравнение вариантов и выбор основной схемы | 1 ч 30 мин |
| 03 | Структура окна | Функциональные зоны и иерархия интерфейса | 45 мин |
| 04 | Ракеты | Три градации, пропорции, стилизация и прорисовка | 3 ч |
| 05 | Сундук | Выбор направления, три градации и адаптация под стиль | 1 ч 30 мин |
| 06 | Поверхности планет | Луна, Марс и Сатурн: изгиб, масштаб и зона награды | 1 ч |
| 07 | Фоны и окружение | Арт-зона, игровое поле, цвет, планеты и окружение | 3 ч |
| 08 | Рамка окна | Прорисовка и адаптация под стиль целевой игры | 3 ч |
| 09 | Пользовательское тестирование | Пятисекундный тест и интервью с тремя респондентами | 2 ч |
| 10 | Переработка шапки | Изменение конструкции и оформления после тестирования | 1 ч 30 мин |
| 11 | HUD-иконка | Композиция и проверка читаемости на смартфоне | 1 ч 30 мин |
| 12 | Прототип | Сборка сценария просмотра результата | 1 ч |
| 13 | Согласованная доработка T3 | Сундук, постамент, цвета кораблей и интеграция рамки | 2 ч 30 мин |
| Итого по всем этапам | 24 ч 15 мин | ||
В Asana промежуточный итог до финальной доработки был указан как 22 часа — это округление точной суммы 21 ч 45 мин. С учётом дополнительных 2,5 часа итог составляет 24 ч 15 мин.
Всё выше — тестовое задание в том виде, в котором оно было отправлено команде. Далее — отдельная ретроспектива, добавленная после получения финального фидбэка.
Ответ команды
Ответ приведён полностью и без редакторских изменений. Он отделяет исходную работу от последующей ретроспективы.
Костя, привет!
Получил сейчас ответ от продюссера. Спасибо тебе еще раз за выполненное тестовое и ожидание. Команда внимательно посмотрела работу и обсудила решение внутри.
Отдельно отметили оформление тестового в формате сайт-презентации.
По заданию в первую очередь команде не хватило попадания в стилистику игры. В текущем варианте интерфейс воспринимается скорее как самостоятельная интерпретация мобильной игры, чем как развитие существующего продукта. Это проявляется в общей структуре экранов, работе с объёмами элементов и композиционных решениях.
Также возникли вопросы к расположению отдельных UI-элементов. В частности, размещение сундука сверху показалось не самым удачным решением, т.к. ограничивает область движения ракет. Таймер также не вписывается с точки зрения общей структуры интерфейса и визуальных акцентов.
Все взвесив, приняли решение, что текущую роль предложить не смогут. Спасибо большое, что уделил время.
07 / После фидбэка
Я считаю ретроспективу обязательной частью любого тестового задания — особенно когда результат отрицательный. Если по-настоящему любишь то, чем занимаешься, недостаточно просто принять отказ: нужно спокойно разобрать решения, найти системную ошибку и превратить её в новый рабочий принцип.
Меня смутила формулировка «событие-копия». Я интерпретировал её прежде всего как точный перенос UX, состава элементов и логики Space Mission из Royal Match в горизонтальный формат — вместо точного продолжения структуры интерфейсов целевой игры.
После декомпозиции я отдельно уточнил, можно ли менять шапку, расположение текста и таймера. Ответы «можно менять» и «хотим посмотреть на твои решения» были очень расплывчатыми. Я воспринял их как разрешение на глубокую перестройку, хотя нужно было уточнить, какие продуктовые инварианты должны сохраниться.
При неоднозначном ответе следовало остановиться и показать структурный эскиз: что именно наследуется из целевой игры, что переносится из Royal Match и что я предлагаю изменить. Такое согласование выявило бы расхождение до финального рендера.
Расплывчатая формулировка объясняет, как возникла ошибка, но не снимает с меня ответственности. В подобных задачах я должен формализовать допущения, запросить подтверждение ключевых ограничений и отдельно проверить продуктовую аутентичность макета.
Сначала я фиксирую продуктовые инварианты и собираю максимально точное продолжение визуального языка игры: структуру, объёмы, пропорции, материалы и иерархию. Любое авторское изменение появляется только после согласования этой базы и должно усиливать механику, не разрушая узнаваемость продукта.
08 / Переработанный макет
Новую версию я собрал на основе выводов выше: использовал продуктовую структуру целевой игры как базу, освободил зону движения ракет и заново выстроил иерархию награды, таймера и игрового поля.