Nov 16, 2014

With the design for the display interface settling, I’ve moved onto prototyping individual elements, starting with the keyboard.

Half my work has been research, and for the keyboard, I’ve heavily referenced the Tron Board Room keyboard by gmunk and the tablet keyboard from Ender’s game by Ash Thorp. My entire design draws inspiration from the Tron Board Room display and having a visually clean keyboard fits the theme well. The more intricate designs like those in Guardians of the Galaxy by Territory Studio and the OVH Summit interface by likidea quickly looked cluttered. Since the reference images laid out the design so clearly, I went straight to prototyping in Processing and handled the design details while programming.

The keyboard’s real time to shine isn’t with the design though, it’s the animations when it opens and transitions into existence.

For the individual keys, alpha transitions begin with an ease in followed by a out back ease to overshoot the final brightness, giving them a nice burned-into-the-screen feel as they appear. To remain consistent with the way other components (e.g. terminal, status bars, etc) will animate, they also flicker as they start to appear.

The entire keyboard feels stiff when animated into existence all at once, so I began to experiment with different creation motions. Here’s a series of different creation motions.

In the first, all keys appear together, again feeling stiff. The second moves onto something more dynamic with a flow from left to right that is quite fluid but when put in context and placed in the center of a large screen looks out of place. This led to an animation that starts from the center, and then to a final version which adds a bit of random offset play into the flickering over a purely fluid rendering feel.

When in action the keys will be illuminated and then fade with a slight flicker.

For next time I will continue to prototype the larger elements, which will give context to the other more complex graphs and visual displays. I worry a little about it looking too Tron-like but hopefully as the entire interface comes together with a colorscheme, it will develop its own flavor and style.