I MADE AN
INTERACTIVE
WEB COMIC
Didn’t expect to, but appealing products can squeeze out the sides of a project – and I was keeping an eye out.
In my pursuit of building light svg assets for the Fonks! mobile game platform, I stumbled upon a Eureka moment: These assets could be the basis for a web comic – something I sidelined previously, since I wasn’t finding smooth and efficient builds from the traditional ways.
Since they could handle tap interactivity, they befit my desire to provide player agency to advance the story. If they worked in a basic Squarespace site, I could fly with them.
They do work – not perfectly, and some long blocks of code have to do the heavy interactive work. But they work, in their own way. Suddenly, I had the tools to deliver Storytime.
Working With The Assets, Not Against Them.
A focus on user experience all these years helped me make sure I brought the reader along on the interactivity, with “tap here” affordances, yet not overwhelming them with having to tap everything and end up frustrated with the storytelling interface. Each scene also plays like a looping vignette - kinda like the boat stopping on It’s A Small World: you see the same thing happening over and over again. But here, the reader is in charge of the boat.
These interactive features transform a reader into a player – no longer a passive consumer, but one who “plays” the characters as they tap, very similar to an adventure game where the advancement of dialogue plays a central role. You can try it for yourself:
Crafting The Creator Interface
As the user, creator, and builder, I knew what I wanted in tailored svg animations. Luckily, spinning up interfaces is easier than ever. I spun up an interface that would allow me to spin up assets on the fly. Set a few toggles and options, type in the lines of dialogue, and copy the code to paste into blocks in Squarespace.
Okay, this is like magic now.
As my needs for customization refined and developed, I changed the interface to accommodate. QA and testing went well, Since I was taking it through iterative loops on my own. As I ran into pitfalls of Squarespace, and how it treats layering svgs, I ran troubleshooting and worked updates into the next build.
This project, from zero to efficient, episodic web toon building, took 2.5 days. I can’t promise that on every innovative project, but it is a testament to what’s possible nowadays, if you have the right vision and skills to carry it out.