Mobile App · UX/UI Design · 2022

Art Game

A playful mobile app that makes visual art accessible to everyone — learn art movements, solve puzzles, and create your own masterpieces through gamified experiences.

4 Art Movements
QR Scan & Play
AR Graffiti Mode
Art Game app — three phone mockups showing Surrealism, logo, and Cubism puzzle screens
01 — Concept

Learning art, through play

Art Game is a mobile application designed to present visual art in a fun, attractive, and playful way — making art more accessible for the public to learn and engage with. The app transforms art education into an interactive experience across four major art movements: Cubism, Surrealism, Pop Art, and Graffiti.

Users can upload their own images or choose from a curated library of famous artworks. The app breaks these images into puzzle pieces for users to reassemble, turning passive viewing into active engagement. A QR code scanning feature connects physical gallery spaces with the digital experience — bridging real-world exhibitions with interactive learning.

Art Game Cubism Puzzle and artwork detail screen mockups

02 — Brand Identity

A Bauhaus-inspired visual language

The brand identity draws from Bauhaus and Constructivist traditions — geometric abstraction, bold typographic play, and a restrained palette of ochre, teal, aubergine, and black. The promotional posters translate the app's logo language into exhibition-scale graphic design.

Art Game diagonal poster displayed in a concrete gallery setting
Two Art Game posters displayed side by side
Art Game diagonal typography poster
Art Game isometric cube poster
Cube poster detail with geometric pattern background

03 — Game Modes

Four ways to explore art

Each art movement offers a distinct interactive experience — from puzzle-solving to digital drawing.

Cubism Puzzle entry screen
Mode One

Cubism

Browse a library of Cubist masterworks or upload your own images. Transform them into geometric puzzle pieces and reassemble the artwork, learning about Cubist composition along the way.

Surrealism entry screen
Mode Two

Surrealism

Explore a gallery of surrealist works or create your own compositions using drag-and-drop tools. Combine dreamlike elements to understand the principles of Surrealist art.

Graffiti Art entry screen
Mode Three

Graffiti

Choose a wall texture and draw with a full-color palette — or use the AR mode to project graffiti into real-world spaces through your camera. Save and share your creations.


04 — App Screens

The complete experience

Key screens across the user journey — from launch through gameplay, sharing, and saving.

Loading screen
Loading
Home menu with Scan QR and Play Games
Home Menu
Surrealism artwork gallery
Art Gallery
Artwork detail with Picasso Girl with Mandolin
Artwork Info
Cubism artwork with puzzle slider
Play Puzzle
Well Done — puzzle completed
Completed
Graffiti drawing canvas
Draw
Share to social media overlay
Share

05 — Design System

A full UI kit & visual identity

A comprehensive system including logo, widget variations, color palette, typography hierarchy, custom iconography, and component library — built for consistency across every screen.

Design system — logo, widget, colors, and typography
Logo, Widget, Colors & Typography
Icons, buttons, and dropping menu
Icons, Buttons & Navigation

06 — Information Architecture

The full user flow

The system architecture maps every path through the app — from QR scanning at a physical gallery to in-app puzzle gameplay across all four art movement categories.

Art Game app system mapping — complete user flow
Loading → Play Games → four movement branches (Scan QR, Cubism, Surrealism, Graffiti) with sub-flows for camera, library, puzzles, sharing, and account saving.

07 — Poster Details

Typography as architecture

Close studies of the poster system — geometry, typographic weight, and disciplined color give the identity its exhibition-ready presence.

Diagonal poster close-up detail
Cube poster close-up detail

08 — Project Details

Scope & craft

Platform Mobile (iOS & Android)
UX Design User flows, wireframes, prototypes
Visual Design Brand identity, icon system, UI kit
Prototyping Adobe XD with motion design
Key Features QR scanning, AR graffiti, image puzzles
Art Movements Cubism, Surrealism, Pop Art, Graffiti
Print Collateral Bauhaus-inspired promotional posters
Role UX/UI Designer & Researcher

Explore More Work

See the full portfolio or discover other interactive projects.

All Projects View Balanced