Skip to main content

2-step Authentication

Creating a extra step in secure login for kids

info

Document Creation: 15 September, 2024. Last Edited: 16 September, 2024. Author: Jessica Maugueret

Avatar Creation Progress

I was tasked by Dylan, my mentor, to create avatars for the drag-and-drop game, with the goal of bringing a robotic feel to the characters while maintaining the design integrity of the AI-generated images provided. Dylan had initially created an AI image that served as the starting point, offering the basic shapes and design language. My role was to adapt these forms, adding mechanical elements and enhancing them with shading and texture to give them a more dynamic, industrial look.

Using Procreate, I took the AI-generated avatars and reimagined them with a robotic twist, ensuring that each model had distinct features while staying true to the game's futuristic aesthetic. One of the major focuses was on texturing and shading, which played a crucial role in making the avatars appear more three-dimensional and lifelike. These techniques helped bring a sense of depth and tactile realism to the designs, which will enhance the player’s overall experience.

In addition to designing the avatars, I also created the backing slots where the avatars will snap into place within the game. These backing slots are essential for providing clear visual cues to players about where to place the avatars, ensuring a smooth drag-and-drop experience. The backing slots are designed to complement the robotic aesthetic of the avatars, using similar color schemes and textures to keep the game's interface consistent. These slots are not only functional but also add to the overall immersive feel of the game.

You can see a timelapse of my work, showcasing the development of these avatars in Procreate, via the following link:

Images

Blue Robot

Designed with a friendly and approachable appearance, the blue robot features a smiling expression, making it more appealing to children. The use of a generic, vibrant blue color enhances its broad appeal, creating a character that feels safe and inviting for younger audiences.

blue-robot blue-robot-back

Orange Robot

The orange robot has a more rustic and edgy design, highlighted by its slightly mischievous grin. The color palette was chosen to give it a rugged look, which contrasts with the other characters, giving it a unique personality that might resonate with those who enjoy a more playful and less conventional character.

orange-robot orange-robot-back

Beige Robot

This robot has a cutesy, rounded form, with wide, expressive features. The two-tone color scheme softens its appearance, making it a more comforting and approachable character. Its design is meant to appeal to users who favor warmth and familiarity.

beige-robot beige-robot-back

Green Robot

With a more 3D appearance, the green robot stands out due to its distinctive pattern and structural design. The texture gives it depth, and its geometric shape makes it feel more modern and mechanical, attracting users who appreciate a more complex, detailed look.

green-robot green-robot-back

Purple Robot

This character has a goofy and playful design, with exaggerated features like its wide mouth and antenna-like shapes. The use of purple makes it more whimsical, creating an energetic and fun character that can appeal to users who enjoy more lighthearted and quirky designs.

purple-robot purple-robot-back

Together, all the characters are designed to cater to different tastes and preferences, ensuring that there is a robot for everyone.

Figma Prototyping

After finalizing the avatars, I transitioned to Figma, where I built a working prototype of the drag-and-drop game. This allowed me to combine both the visual assets and the game's functionality into a cohesive prototype that aligns with the overall concept. The prototype simulates how the avatars will interact with the game mechanics, providing a clear representation of the final user experience.

You can explore the development of the game through the following Figma links:

tip

To trial or play the actual drag and drop game, click on the Prototype Mode!!

If you don't know where to click, click on the page randomly and options will pop up for you.

Development mode

Prototype mode

This entire process, from adapting AI-based designs to implementing them into a functional game prototype, marks significant progress toward the final version of the game.