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

Bringing up 2 different styles of concept fitting with the client's main characters

The main concept should be harmonised with Neungyule's colourful characters. I proposed two concepts of illustrations - Honey jar & Candy at the first meeting, inspired by their round, cute shape and colour tones.

Concept

Honey Jar

The first concept is inspired by honey jar so I wanted to design balls with honey on top that includes English word. This would be appropriate for the ball design itself, but the overall theme has less connection with honey jars.

Concept

Candy

The second concept was more fit for kids' game and candies looked better but there had been too much stories in it. Therefore, I decided to choose a concept that can encompass both of two concepts and developed from there.

Design

Candy Pop - Bouncing Balls!

Iterated design and evaluations quickly, I was able to gather feedbacks into a solid concept using 'candy' for kids' games. The main character is holding a lollipop and different styles of balls and candies are falling behind the title of game. It is also decorated with candy where the English words are on.

GUI

Creating pixel-perfect elements and animation resources

With accomodating the feedbacks from a senior designer and the client, I've designed whole UI components and graphic assets, while considering the status according to user's action. In order to accomplish unique animation, I optimised stepwise animation graphic.

Deliverable

Let's play!

After designing graphic UI using Adobe Photoshop & Illustrator, the basic interaction design — such as the falling balls, the zooming-in and out of the title, button hover, and etc. — was achieved with Aspen Studio, an interactive tool based on HTML5.  In terms of detailed gaming system, it was developed by internal developers by 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.