Creating assets for the animation


Most of the assets were created in Illustrator including the blueprint (1), the 2D and 3D rockets (2), and the devices and charts. The final 3D rocket (4) was created in 3D Max. A colour palette (3) was created using hues based on the corporate blue with a complimentary orange.

3D Rocket sprite sequence

Sequential sprite for 3D rocket, output from 3D Max into Photoshop for final processing.

Storyboarding the animated rocket

To communicate how the animation should work to the front end developers, detailed storyboards were created for both desktop and mobile.


The version developed for mobile devices animates vertically. The rocket appears to move upward while devices and other elements cascade downwards.


Animated sequence for mobile devices

See it working here.

2D Kit Editor – UI design

Marmalade 2D Kit Editor UI

A contemporary UI was designed for Marmalade’s 2D Kit Editor software product. Download.


The has a familiar look and feel and a set of features to allow designers to quickly get up and running with the software. The software has games design application features and familiar 2D design tools to create UI layouts and animations.


Sketches of the “Animation” and “Object Inspector” panels



A UI document was created as a reference for stakeholders and the development team. See Part 1 and Part 2.








Marmalade Game Studio website concept

Marmalade Game Studio website concept

This was a concept that was submitted for the game studio website. It uses an airship as a graphical device to lead viewers through the content. A parallax effect was to be used with the clouds in the background, the airship in the mid ground and the text in the foreground.

A walkthrough of the initial concept for desktop is here in .pdf format. An alternative are here. Wireframes for the mobile version is here