Tic Tac Toe

A fun little design side project on this simple game to get me started in animation. My husband Yanbin and I will collaborate to make it real. View source files at Github.

Design screen capture:

Live version coming soon.

Summary

A fun little design side project on this simple game to get me started in animation. My husband Yanbin and I will collaborate to make it real.

 

Live version coming soon.

Tools:

  • Pen & Paper (Sketches)
  • Sketch (Wires, Visual)
  • Priciple (Animation)
  • GIF Screen Capture (LICEcap)

Define it!

What is it? Tic Tac Toe, a well-known game.

Who is it for? Anyone, really. The only thing that matters seems to be in the visual styles. I was thinking about making something very colorful, aka for kids, but ended up not going with that.

Sketches

It’s a very straightforward game, so I mainly spent some time sketching on layouts. I wanted to see if there’s a layout that looks a bit different from what everyone else does. (e.g. Search “Tic Tac Toe” on Google, you’ll find a classic version by Google)

sketch - 1
Sketch 2
Sketch 3

Wireframes

I put together two layouts. Both Yanbin and I preferred the second one, thinking it looks a bit more modern.

Wires 1

Wires 2

Visual Explorations

I explored some typefaces and color palettes. Ended up not using any fancy typefaces but that’s fine.

Visual Explorations

Visualize it!

My first time with Principle! It turned out pretty good. Very simple tool for some simple animations — I can see it works with more sophisticated animations as well.

Animation

 

Leave a Reply

Your email address will not be published. Required fields are marked *