Wibble

Wibble is a word game based on the Discord activity called Spellcast. I started building Wibble to demonstrate my skills in front-end design and stretch my familiarity with Figma.

When I originally sketched the design, it was in simple black outlined boxes like the one shown below. The design was simple, and that's what I needed to implement the primary game.

But once the basic game was implemented, I needed something more than just squares with black borders. It needed personality, and when I pursued the design, I wanted something round and jelly like - "wibble" rhymes with "jiggle" and "wiggle."

This was the design I landed on after tinkering with colors. I liked the monochrome orange scheme. The tiles are 'squircles,' generated by George Francis's fantastic Squircley tool. With a small circle at the bottom right corner to give the scores some padding, it gave a fun, playful shape.

The font I chose is called Lilita One. It helped reinforce the rounded character and playfulness I wanted Wibble to exude.

Next up was animated transitions. This took a bit to get working in Figma the way I imagined it, but I got there eventually. The transition itself needs refinement outside of Figma, since some frames linger longer than they should due to Figma not supporting zero time transitions. (Minimum time of a transition is 1ms.)