the portfolio of
christopher p. cacho

intro

Visual Design

Graphic Design

Typeface Design

DRIBBBLE

Résumé

Product Design for a Simple Drum Machine

Tibok

Personal Project

2024

Tibok will address the need for a drum set to play along with music by creating a simple and easy to use drum machine that complements the handheld consle aesthetic and uses a fun, familiar input method for finger drumming.

Research

I spent a lot of time researching the interfaces of a bunch of drum machines to inform my design. One area of focus was creating button and drum sound pairings that feel intuitive and enjoyable to play. The overall goal was to enhance the playing experience, making it fun and user-friendly.

Research
User Flows
Testing

Design

I went through several design iterations and eventually landed on a style that felt distinctly old school. To enhance the interface, I created a pixel font designed to be narrower than most common pixel fonts. This helped me to fit in more text without sacrificing clarity, making the overall design more functional and aesthetically pleasing.

Visual Design
User Experience Design
Font Design
Animation

Development

I used Python and Pygame for development once again, as I feel most comfortable working with these tools when creating my small, creative hanheld tools.

Python
Pygame

Challenges

Incorporate audio without lag.

Attempted to make better animations

Figuring out the tempo feature was tricky. I ended up deciding to set predefined values.

The gamepad buttons were the initial limitations of my creative handheld tools. Tibok had an additional challenge with the button layout.

Outcomes

Using Tibok to play along with my Gameboy has been a lot of fun.

Another use has been to practice finger drumming while I listen to music.

I can see making a chords version of this next.

Screens

main

Play the drums with the nostalgic joy of using a retro gamepad layout.

change auto play tempo

Let Tibok play the hi-hat or ride at predefined tempos.

change auto play pattern(s)

The hi-hat and ride can have separate patterns.

change drum kit

Set the tone with drum kit options.

change visualizer animation

16 simple "visualizer" animations to match your style.

change pad color

12 pad colors to go well with your outfit.

Design Assets

All assets, along with animations, were drawn in Photoshop. The font was developed in Glyphs. Sprite sheets have been fun to explore using while building these apps.