Exploring user skeleton art style

The art style of the users skeleton is plainly a ‘cartoonish stick man’ which they criticized it doesn’t match with the entire visual.

Screen Recording (7-12-2016 1-01-30 PM)_1.gif

The users skeleton visual during user test.

The initial idea of the users visual should be look like this:


The first idea: turning users into silhouette visual.

During user test I changed it into ‘stick man’ visual because I realized Kinect v1 can’t capture high resolution image, and leaving noise edges around the silhouette which look like this:

It does not look ‘elegant’ with the entire visual, so I thought ‘stick man’ would be a better option. However the current visual is not match with the overlook and the concept, so I’m trying different user skeleton art style.

Firstly, I was thinking of doing Kinect puppet which skinned the user’s skeleton and get a puppet like animation and visual. However it consumed a lot of time to study the technical and a lot of calculation to do for one Kinect puppet. Looking at the time frame, I should spend more time on user experience and refine the entire visuals, hence, it still an unknown answer if this kind of visual really suit the entire look and feel or the technical will be stable or not. Therefore I leave this idea to next time.

I also think of ‘blob detection’ technique to stylize the silhouette, however the problem is the same: difficult technical and limited of time.


Considering of my rusty programming skill and limited of time left, I only can do subtle visuals on the user skeleton which is enough to look interesting. I still remember that I don’t want too much things happening on screen which will distract the users from understanding the core message of it. The first thing I think about is ‘Particles’ which it is easy to learned and flexible to modify. So here are the visuals effect I tried on.

*PS: the skeleton and silhouette visuals shouldn’t be covering up the screen during the actual situation.


Thin line ‘stick man’ with white burst particles on hand.


Thick line’stick man with black smoke on hand.

silhoutte art style.gif

Black transparency silhouette.

silhoutte with white particles.gif

Black transparency silhouette with white burst particles on hand.


Black transparency silhouette with orange smoke on hand.

I still want to stick with the black silhouette visual because it suit the art style and topic (which I want to present the idea of ‘loves has no colours and style to define’), therefore I try many types of particles style to match with the silhouette and at the same time ‘distract’ the users from seeing the low resolution of the silhouette. The particles makes the interactivity fun and looks abstract. Howbeit, there’s technical errors where I can’t make more than one particles on hands. Therefore I shift the ‘particles on hand’ idea to ‘interactive clouds or fog’, which might locate at the bottom or top of the screen, where users can move their arms to change ‘clouds’ direction and at the same time cover a bit of the ‘imperfection’ black silhouette. I will use this tutorial for this idea.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s