Interactive Typeface Design

Execution:
_Illustrator
_HTML
_jQuery

The goal of Boogie Woogie Specimen is to create an experimental typeface and also built it in HTML and CSS. The letters are put together by shapes like circles, square rectangles, and triangles. The users can interact with letters by hovering over them which also triggers the background music.
            When I look at letter forms, I always wonder what the potential movement these letters can have, like little characters. I want to bring the ordinary typeface sentiments. Hence, a communication can be built when the audience interact with the letters.

            ︎Click here if you want to feel the boogie-woogie!

I originally started to build the shapes and grids in Illustrator. My goal is to create something with a solid structure, geometric, code-able and funky. I was inspired by early apple icons that always follow straight and diagonal grids. However, instead of using lines, I decided to use blocks.

            The basic rules are rectangle(s)+circles(if necessary)-rectangle(s).

            For example, C is built by a circle plus a rectangle and minus a square. I believe the simplest shape always lay the foundation of a more complicated system. After I finished the outline of all the letters, I was looking for some decorations. I added diagonal bars on numbers, punctuations and rotation movement later during coding.

Inspiration Image

Inspired by the color palette classic jazz music posters, I matched the letter animation with the music Boogie Woogie Stomp placed by Albert Ammons. The music turned on by using the mouse to touch the letters, just like pressing piano keyboards in order to let the sound out.

            By scrolling through the graphics, mouse will active the letter animation, sound and color changes. When mouse leave the letters, animation will stop gradually. Also,  sound and color change will be paused immediately.