Bouncing Balls
E-Learning Game

Overview

BLUEGA is a leading HTML5 company developing its own UI framework and game engine based on HTML5. Bouncing balls was a project for a client, Neungyule and an English word game for children, which is matching the correct spelling of words with a colourful ball. 

As a Graphic/UI Designer, I was in charge of designing entire game graphic from bringing concepts to delivering assets. Interaction design was achieved with Aspen Studio, which is the main product of Bluga based on HTML5.

Given Tasks

- Identify and devise a suitable concept for kids (3-5 years old) to enable them to enjoy this game with joyful illustrations.

- Design pixel-perfect UI components depending on the elements' status such as stop, pause, play, mute, unmute, and hover.

Ideation

Presenting two different styles of concept that align with the client's main characters

The main concept should align with Neungyule's colorful characters. At our initial meeting, I proposed two illustration concepts - Honey Jar and Candy, inspired by their round, cute shapes and color tones.

Concept

Honey Jar

The first design is inspired by a honey jar. My idea was to create balls with honey on top, incorporating English words. While this design fits the balls themselves, it doesn't strongly relate to the overall theme of honey jars.

Concept

Candy

The second concept, more suitable for a kids' game where the candies looked better, had too many stories. Therefore, I decided to develop a concept that combines elements from both concepts.

Design

Candy Pop - Bouncing Balls!

By implementing iterative design and rapid evaluations, I swiftly incorporated feedback into a solid concept centered around 'candy' for a children's game. The main character holds a lollipop, with different styles of balls and candies falling in the background. The game's title is also adorned with candy, each containing English words.

GUI

Creating pixel-perfect elements and animation resources

After incorporating feedback from a senior designer and the client, I designed all UI components and graphic assets, keeping in mind the user's actions. To achieve unique animation, I optimised the stepwise animation graphics.

Deliverable

Let's play!

The graphic UI was designed using Adobe Photoshop & Illustrator. Basic interaction design, including falling balls, zooming in and out of the title, and button hover effects, were created with Aspen Studio, an HTML5-based interactive tool. The detailed gaming system was developed by our internal developers using Javascript.

‍Enjoy 'Bouncing Balls'!

Learn More...

What is Aspen Studio?

Aspen Studio is HTML5-based interactive content creating tools. With Aspen Studio, anyone can create E-Learning content, educational game, puzzle, quiz, and interactive book easily, which is implemented to all device including smart phone, PC, and tablet.

The web has been rapidly changed to a competitive platform that provides developers with an easy-to-build environment in terms of both rich features and performance. BLUEGA has deep experience and expertise on core HTML5 technology, including UI framework, game engine, and web OS shell.