Romantic skeuomorphism of mechanical input

1. Context

I made this experiment back in 2011. At that time, there was a debate in the user interface community about skeuomorphism vs. flat design.

Skeuomorphism refers to the visual design trend which imitates on screen the artifacts and tools we use in real life. Skeuomorphism is supposed to look familiar and work intuitively for most users.

Flat design refers to the visual design trend which disconnects from the visual appearance of physical objects, and sticks to a minimal, geometrical and flat language. Flat design is supposed to be functional and genuine.

I like skeuomorphism. I enjoy capturing and rendering the physical behavior we have intuitively grown to know in our rich physical world.

2. Features

• The skeumorph above is based on a mechanical Filco Majestouch Tenkeyless keyboard with red Esc key and purple WASD keys
• Keys wobble on mouse over
• Keys depress on mouse down
• Keys depress when you type on your own keyboard
• Keys cast convincing shadows when actuated
• You can click, hold then drag on keys for a “piano effect”
• Clicking on most keys registers an entry in the text area above the keyboard
• The Caps Lock indicator activates if you press Caps Lock on your own keyboard
• The Scroll Lock indicator activates if you press Scroll Lock on your own keyboard (Windows machines)
• An older version of the keyboard was used in ideapolis agency to display keyboard shortcuts (press H or the "Keyboard Controls" button on the bottom left)

3. Issues

• The onscreen keyboard functionality is limited
• Graphical assets are not Retina
• The page isn't mobile friendly: too many HTTP requests, slow performance, not touch optimized
• Spaghetti code

4. Graphics

5. Code

• jQuery.sendkeys
• bililiteRange
• jQuery.Hotkeys