HTML5 Portfolio: Marktropolis
Posted 25th April 2017
Marktropolis is an interactive online experience which I originally developed in Flash way back in 2010 to showcase a wide variety of my skills.
25 key time animated events were carefully planned and animated by myself to be played at a considered pace for adding depth and variety such as: a police chase, different traffic streams, a runaway balloon and many more.
A script was also used for loading the city from a different point on each return visit, so as to give an impression that the city was actually a living breathing entity which was moving through its daily cycles.
The original animation for the main hub included a moving sky, shadow effects, moving traffic in the background, animated leaves on the bushes, and much more. However, after Flash was phased out, I eventually redeveloped the entire project from the ground up as a cross platform responsive HTML5 experience, with a caveat being that the animation had to be reduced for mobile optimisation.
View a video demo of the original experience below:
Despite the complexity of this project I was able to ensure rapid load times by condensing the entire experience, without sacrifice of quality, into the smallest sizes possible. (one megabyte total for the original experience)
Clickable links around the main city hub provide navigation to four themed interactive galleries featuring a selection of my work.
The gallery featuring my illustrated work is an office scene with icons that pop up to a larger view, blinking lights, and steam slowly rising from a hot beverage.
The gallery featuring my design work is a street scene featuring a motorised billboard, with graffiti left and right buttons which trigger the clunky kind of "chk chk chk" motion/sounds synonymous with these displays.
The gallery featuring my animation work is a cinema scene through which different videos can be loaded.
The gallery featuring my photography work is a 3d isometric gallery, which can be rotated whilst ambient music plays in the background.
Marktropolis was nominated for the CSS design awards in 2014 - link
Mark Nathan Willetts is a creative entrepreneur from Nottingham, England. His artistic work has been exhibited internationally. And he has worked as an educator and senior editor at companies such as Experian and Velawoods.
"We must continually grow until our ideas converge for a better future"
- Mark Nathan Willetts