Creating UI Elements

Revamping Pippo Math

After receiving feedback from my lecturers, I realized Pippo Math needed a stronger visual identity — one that felt playful, engaging, and reflective of its educational purpose. The original minimalist design, while clean, lacked the excitement that would captivate young learners. This led me to completely revamp the game’s aesthetic, embracing a papercut art style that added warmth, creativity, and personal branding to the app.

Why Papercut?

The choice of a papercut style came naturally when I reflected on the connection between math and paper. From scribbling equations in notebooks to folding paper into shapes, paper has always been part of the math learning experience. The layered, handcrafted feel of the papercut style added a sense of depth and texture, making each screen more inviting and immersive. It also aligned with the idea of hands-on learning, reinforcing the game’s interactive nature.

Inspirations from Pinterest


Building the UI

Adobe Illustrator became my tool of choice for creating the papercut effect. Here’s how I brought each element to life:

  • Pen Tool: I used the Pen Tool extensively to shape each UI element, from buttons and icons to backgrounds and Pippo himself. The flexibility of the Pen Tool allowed me to create organic curves and smooth edges, replicating the imperfect cuts you’d get with real paper.



  • Layering Elements: To enhance the papercut illusion, I carefully layered shapes, ensuring slight overlaps and spacing that created natural-looking depth.


  • Drop Shadow Effect: The secret behind the depth was the subtle use of the Drop Shadow effect. Each element was given a soft shadow to create a sense of separation between layers, making the interface feel tangible and multi-dimensional.



  • Color Choices: I opted for a vibrant yet soft color palette to maintain visual excitement while ensuring contrast for readability.



This combination of techniques transformed the UI into something that felt crafted and personal, aligning with Pippo Math’s playful tone.


Revamp Results

Before


After











Comments

Post a Comment

Popular posts from this blog

The User

Image
Who are Pips? In Pippo Math, the users will affectionately be called Pips. They  are children aged 6 to 10 who are eager to learn but often struggle with traditional math methods. Many Pips find math difficult, boring, or even frustrating , leading to disengagement and math anxiety. Pips Learning Behavior Short Attention Spans Pips lose focus quickly with repetitive exercises. Math Anxiety Many Pips feel intimidated by numbers and equations. Preference for Interactive Learning Pips engage more with hands-on, movement-based activities . Love for Gamification Rewards, challenges, and fun visuals increase motivation. User Persona The use of persona is to represent the needs of a larger group of users whose goals and characteristics are the similar. It reflects the lifestyle of users and give an idea of how to meet users' needs and challenges. As I create the persona, I use the group of age that needs the app more. Name: Sophia Wang Age: 6 Education: 1st grade Occupation: Student Goal...
Read more

Core Mechanics: Building the Math Problem Generator

Image
One of the key mechanics in Pippo Math is the ability to generate random math problems for players to solve. To make this happen, I created a Math Problem Generator in Unity using C# and TextMeshPro for UI text handling. Here’s a step-by-step look at how I built this core feature: 1. Setting Up the Equation Display The first step was to create a space in the UI where the math problems would appear: In Unity, I added a TextMeshPro Text to the scene, naming it EquationText . This text dynamically updates with new math problems as the game progresses. The text field was left empty in the editor because equations would be populated through code. 2. Creating the Math Problem Generator Next, I built a script to handle the generation of random math equations. Create the Script: In the Project panel , I right-clicked > Create > C# Script and named it MathProblemGenerator . Write the Code: Inside the script, I added logic to randomly generate addition and subtra...
Read more