Maurann Stein

Self initiated project, 2014

Draw me a letter

A program that creates a map of the hidden gestures resulting from typing on a computer keyboard.

Tracing hidden gestures

I wanted to create a tool that explores an alternative way to document text typed on the computer. I tried to focus on the visual trace that results from our typing on the keyboard and see if any patterns evolve.

One aspect I especially love about this project is the way it tracks my mistakes when I type — unlike most digital writing tools. Anytime I hit the backspace, a line is drawn and added to the encrypted image, similar to when I write by hand.

After I developed the basic idea of what I wanted to build, I started to think about its design and how users might approach it. I sketched out a few ideas and came up with a simple interface that puts the user's visual unput at the center.

It was quick, and I didn't have much time to iterate or research, and I couldn’t really predict what the traces will look like. But as I was working and thinking about it, I realized it could be really cool if I added a feature that will allow my users to download and save their text-drawing. Another functionality I wanted to add was to allow users to view their input in text-form.

Home position: hand position for type writing on a QWERTZ keyboard.

Jessica Greenfield’s Hidden Gestures: a collection of drawings showcasing the unseen gestures of designers in a digital design process.

Mapping the keyboard

I had to proportionately map out all the keyboard keys in order for the tracking to be accurate. So I created coordinates for every key based on it placement on the keyboard, and later referenced these points in a function that draws lines between two points. This way I was able to update the last typed key as the place to which the line will continue.

Features

Cover / discover your letter: Lets users discover or hide their text-input.
Clear text: Lets users clear the screen and their inputted text to start afresh.
Download your letter: This function translates the marks created with SVG lines to a downloadable png.
Gradient progression: With every key pressed, the line’s hex value progresses and gradually shifts the color of the drawing. This feature is a time indicator, allowing readers to try to decrypt the image and figure out which words were typed.

A visual diary

I wanted to have some fun with my new tool, so I collected my visual diary entries and created a little book showing the texts next to their encrypted images. For the cover I printed a keyboard-jacket printed on silver paper that can be unfolded and used to try to decrypt the messages.