Github repo here. Contains all source files, including illustrations and after effects animation source files.
Objective
I wanted to create some very passive games that used light interactions, minimal instruction and have the gameplay be discoverable and quickly discernable.
UX & Visual Design
I wanted the games to be challenging but not frustrating. The first games in the series would be dead-simple to pass, strengthening the users’ resolve to continue as the games became more challenging.
I started with some sketches of game ideas. I created wireframes from these, then designed on top of the wires.
I initially wanted a monochromatic, consistent color palette throughout the games; I ended up with a unique palette for each game.
Building the game
I liked the idea of using vanilla js where possible; I tried to not use libraries where I could.
Things like the animation of the progress bar are simple with a library like GSAP, but I really just needed a small bit of the functionality so in instances like this I opted to build my own.
Avoiding libraries turned into avoiding lots of technologies and questioning the idea of building autonomously in a vacuum (which btw is ridiculous and impossible and the subject of a future post).
Things like the animation of the progress bar are simple with a library like GSAP, but I really just needed a small bit of the functionality so in instances like this I opted to build my own.
Avoiding libraries turned into avoiding lots of technologies and questioning the idea of building autonomously in a vacuum (which btw is ridiculous and impossible and the subject of a future post).
Animating with After Effects & Lottie
I ended up changing the app flow. I chose to feature an intro svg prominently at the beginning of each game chapter.
Each animation is based on something personal to me and my interests (I grew up in the red desert, I paraglide, etc).
Each animation is based on something personal to me and my interests (I grew up in the red desert, I paraglide, etc).
I created an svg illustration for each game in Illustrator; each game had a unique color palette:
Then I animated each illustration in After Effects and exported to JSON to be loaded by lottie.js
This was a great exercise to challenge both my interaction design + development skills. I’m fascinated by both design and development and love that the tooling today allows us to touch a lot of different parts of a project.
It was fun to work on a project with no other business objective than to just provide a small amount of entertainment. There’s still a ton of rough edges but I’m glad it’s out in the world; this gives me the freedom to focus on new projects and then come back to this if I ever decide to.
Here are screenshots of the games.
