Делаем экран победы
Задача: нужно разработать макет экрана победы для начала в виде wireframe, а потом отрендерить(т.е. визуализировать).
Под wireframe понимается как правило черно-белый скетч будущего экрана с предфинальным расположением элементов. Арт-объекты могут быть в виде упрощенных блоков или схематичными изображениями.
Состав экрана должен быть следующим:
- Заголовок "Victory"
- Аватарки игрока и соперника
- Очки: Очки игрока и соперника за игру
- Бонусные очки для игрока и соперника
- Награды за игру: Золотой билет, 3 Яблока и 250 золотых монет.
- Кнопка "Tap to continue..."
Информация по рендеру:
- Размер: 1080 х 2160 px
- Цель экрана: показать игроку статус и награды
- Стиль: Casual
- Рендер: яркий, чистый, материальный, казуальный
Тут все понятно. Приступим! 😄
Для начала исследуем какие кейсы уже имеются на рынке. Собираем мудборд из референсов по схожей теме.
Состав экрана должен быть следующим:
- Заголовок "Victory"
- Аватарки игрока и соперника
- Очки: Очки игрока и соперника за игру
- Бонусные очки для игрока и соперника
- Награды за игру: Золотой билет, 3 Яблока и 250 золотых монет.
- Кнопка "Tap to continue..."
Информация по рендеру:
- Размер: 1080 х 2160 px
- Цель экрана: показать игроку статус и награды
- Стиль: Casual
- Рендер: яркий, чистый, материальный, казуальный
Тут все понятно. Приступим! 😄
Для начала исследуем какие кейсы уже имеются на рынке. Собираем мудборд из референсов по схожей теме.
Вдохновившись примерами делаем черновой набросок в котором прикидываем весь состав элементов и их размерность относительно друг друга и акцентов.Что-то такое:
Вроде ничего не забыли. Прикинем более детально:
Теперь можно финализировать. Для ускорения работы перекинем часть задач на нейросеть, а конкретно рендер иконок. Напомню, что нам для этого экрана понадобятся 4 иконки: корона, золотой билет, яблоко и монета/монеты. Заводим шайтан машину, получается что-то вроде этого:
Сомнительно, но ОкЭй. Если что подрисуем немного. Далее интегрируем в макет и получается вот так:
Тестируем на тоновой контраст:
Видим, что слои хорошо отделяются от фона, соблюдается иерархия и акценты. Бац бац и в продакшен.
В следующем посте выложу исходники для подписчиков. Шер, лайк, подписка! Всем спасибо 😄
В следующем посте выложу исходники для подписчиков. Шер, лайк, подписка! Всем спасибо 😄
геймдев
ui
дизайн
интерфейс
игры
нейросеть
разработка
процесс