Interactive mini-games designed to teach core UI and UX principles through hands-on practice.
The Blueprint is a web-based learning platform that teaches UI and UX principles through a series of interactive mini-games. Each game focuses on a specific concept, allowing designers of all skill levels to practice and reinforce their understanding in a more engaging format.
The problem this project addresses is the passive nature of most design education. Traditional learning methods—such as long-form courses and video content—can become repetitive and difficult to retain, especially when users are not actively applying what they are learning. This often leads to reduced engagement and lower knowledge retention over time.
The goal of The Blueprint was to explore an alternative approach by shifting learning from passive consumption to active participation. By introducing short, focused challenges, users are encouraged to apply design principles in real-time rather than simply observing them. This approach leverages interaction as a learning tool, helping users build stronger mental associations and improve recall.
During the discovery phase, multiple colour palettes were explored with a focus on darker tones. This decision served two key purposes: supporting a dark mode interface and ensuring that interactive elements within the games could stand out clearly without visual competition.
Several accent colours were tested, including green, purple, orange, and blue. Each was evaluated based on contrast, visibility, and how effectively it directed user attention within the gameplay environment. Through testing, green proved to offer the strongest contrast against the dark background while maintaining clarity across different game states.
Typography was approached by balancing personality with readability, ensuring the interface felt engaging without compromising clarity during interaction. Three font pairings were tested, each evaluated on legibility at different sizes and how well they supported quick scanning during gameplay.
For headings, a more expressive typeface was introduced to reflect the playful, game-based nature of the platform. Bubblegum Sans was selected for its rounded forms and approachable character, helping to establish a distinct tone without becoming overwhelming.
For all supporting text, Quicksand was chosen as a clean, sans-serif counterpart. Its simple structure and consistent spacing make it easy to read at a glance, which is especially important when users are focused on completing tasks within the games.
The Blueprint is structured around five core areas of UI and UX design, with each game targeting a specific set of principles. Rather than teaching concepts in isolation, each area is broken down into interactive challenges that allow users to apply what they’re learning in real time.
Focuses on colour matching, harmonies, and mixing. These challenges help users understand how colours interact, how to create balance, and how to use colour intentionally within an interface.
Covers proximity, similarity, continuity, closure, and symmetry. The goal is to help users recognise how visual relationships influence perception and grouping within layouts.
Explores style, weight, and spacing. These challenges reinforce how type can be used to create hierarchy, improve readability, and guide user attention.
Focuses on colour & contrast, scale, and white space. Users learn how to direct attention and structure content so that the most important elements stand out clearly.
Covers common UI patterns such as hero sections, cards, and blog layouts. These challenges help users understand how to organise content effectively and apply familiar structures in a practical context.
The Good
Stats and profile dashboard focused on reducing time spent navigating complex systems.
Explore Project arrow_right_altThe Bad
Designed a calm, product-led e-commerce experience that keeps focus on content while supporting brand personality.
Explore Project arrow_right_altThe Ugly
Designed a small business website that communicates value, clarity, and affordability without sacrificing modern design.
Explore Project arrow_right_alt