Дизайн мобильной игры-пазла2020

Jigsaw Puzzle Deluxe

Большая картина
из маленьких
деталей

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

Собрать пазл
Коллекции пазлов в оригинальном интерфейсе игры
Картина «Оливковые деревья» и выбор уровня
Дизайн GORYANIN BROTHERSО проекте ↓

01 / Задача

Пазл, который хочется продолжить

В Jigsaw Puzzle Deluxe отдельные картинки объединены в тематические коллекции. Игрок выбирает набор, открывает картину, собирает её и постепенно заполняет коллекцию.

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

ПродуктМобильная
puzzle-игра
Наша работаUI/UX и визуальное
оформление
Материалы проектаМакеты, графика
и состояния

02 / Интерфейс

От коллекции
к картине

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

Выбор тематических коллекций: котята, искусство, архитектура и космос
01 / КоллекцияТема, количество собранных картин и доступные наборы.
Экран коллекции искусства с карточкой картины и значком количества деталей
02 / КартинаНазвание, автор и сложность до начала сборки.
Экран завершения пазла с золотой наградой и временем сборки
03 / РезультатНаграда за собранный пазл и переход к следующему.

03 / Интерактивное демо

Теперь ваша
очередь собирать

Выберите картину и количество деталей. Перетаскивайте фрагменты на поле или нажмите сначала на деталь, затем на её место. Начните с 12 деталей, чтобы попробовать механику.

Загружаем игровое поле…

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

04 / Игровая графика

Характер
в каждой кнопке

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

Золотая медаль с символом пазла
Награда / отдельный момент завершения
Кнопка домойКнопка настроекКнопка подсказкиКнопка крайних деталей
Управление / узнаваемые игровые инструменты
Значок магазина, обычное состояниеЗначок магазина, нажатое состояние
Состояния / исходная векторная графика из Illustrator

05 / Сценарий

За каждым экраном
следующий шаг

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

Рабочая схема Jigsaw Puzzle Deluxe: переходы между коллекциями, уровнями, сборкой, наградой и настройками
Рабочая схема из исходного проекта, 2020Рассмотреть схему ↗
↖ Все проектыЕщё один игровой мирSEA BLAST ↗

Обсудим ваш проект

Как будет выглядеть
ваш цифровой продукт?

Продумываем пользовательский путь и создаём интерфейсы с собственным характером.

Обсудить задачу
Telegram@goryanin_a↗Emaildesign@goryaninbrothers.ru↗