Alex Tebbs - UI Developer | Enigma Machine
UI Engineer

Click on a letter of my name

About this design

I like to be flashy, but minimalism is important to me. This type of design is popular among photographers, artists, and fashion labels. The stark, unassuming nature of the design provides a blank canvas upon which content becomes the absolute focus.

Remember me? Skeuomorphic design dominated the late 2000's - early 2010's. Skeuomorphic is a funny word which essentially means design which attempts to mimic the physical world. Skeuomorphic design is dominated by gratuitous use of shading and lighting, and in more extreme cases, texture and graphics to make a digital product resemble it's physical counterpart.

When designers felt Skeuomorphic design was becoming too overbearing, there was a large shift in the design world towards stripping out excess shading, lighting, and other affordances associated with the previous trend. This left us with "Flat" design. To me, flat design means focusing on creating clean and usable interfaces without using visual flair as a crutch.

This is everything you should never do. Poor hierarchy, misuse of typefaces, dark UI patterns, no consideration for mobile devices, obnoxious color pairings, awful contrast, distracting elements. Please don't make me do this stuff.

Seriously, .

Liberal use of primary colors, larger type, and colored, illustrative, iconography are a few of the things that make this design feel whimsical or even a bit childish.

I hesitate to use primarily dark color schemes -- black-on-white text is easier to read. However, black is a powerful tool. A darker grey balance can evoke feelings of sleek, modern exclusivity and mystery. Dark schemes can be useful when creating a product or website meant to be a counterpart to an already existing property. I also think a darker UI is a better fit when working on websites that deal primarily with video/other media. This mimics our expectation that video/other media appears on a black background, as it does on our TV sets.

Serif typefaces are seldom used in web design, and for good reason. Sans-serif fonts are friendlier and have been proven to be easier to read on screens, especially at small sizes. However, when attempting to target certain markets or create a sense of luxury, a design using serifs can give the impression of a high-end restaurant menu. Furthermore, liberal white space, thin strokes, and reserved use of pastel shades give this design a feminine energy.

Swiss design (aka International Typographic Style) is a classic style which began to emerge in the 1920's, and is still influencing designers to this day. In Swiss design, typography is king. Common hallmarks of Swiss design include large, geometric typefaces (most ubiquitously Helvetica), rigid alignment to a multi-column grid, and carefully-placed flush-left text. Color is used liberally, but usually no more than one color is used in a piece.

Originating from architecture, the term "Brutalism" refers to design that is intentionally raw and unpolished. In the context of web design, this usually means rejecting commmon user interface patterns in favor of presenting a design so aggressive it almost shocks the user into sticking around to enjoy the content.

But hey, if it's not your thing, I understand. , there's plenty more.

UI Engineer
Click on a letter of my name

Enigma Machine

3D Enigma machine simulation

The Enigma machine is an early cryptographic device used to encipher and decipher coded messages during WW2. It operates using electrical signals that are passed back and forth through a group of three rotors, effectively creating a series of substitution ciphers.

Image of the physical Enigma machine
Image of the physical Enigma machine

I decided I wanted to build my own Enigma machine emulator - my goals were to create something that was not only functional as a true emulation, but taught the user something about the internal workings of the machine by showing it's internal wiring. The final product is a 3D simulation using React, Three.JS, and React Three Fiber.

Check it out here. Or view the code on Github here.

Examples of existing enigma simulators online. Left screenshot is a 2D representation of the enigma rotors. Right screenshot is a skeuomorphic example of the device.
Examples of existing enigma simulators online. Left screenshot is a 2D representation of the enigma rotors. Right screenshot is a skeuomorphic example of the device.

I spent some time looking at other online implementations of the machine - many of them had no visual representation of the machine at all, and those that did opted for a rendering of how the machine looks instead of rendering how it works.

Rotors have an initial starting offset that they can be configured to. Rather than typing the offset in a box, the user can directly manipulate the rotors to set the offset.

I focused on creating a 3D representation of the internal rotor wiring. Each rotor functions like a substitution cipher, taking an electrical signal generated by pressing a letter on the keyboard and transforming it into a different letter via the configuration of its wiring. Metal contacts connect the rotors to one another. After this, the signal is sent through a "reflector" - which redirects the it back through the rotor mechanism and wiring again. Eventually, the signal lights up a letter on the "lampboard", which represents the output.

Demonstrating bi-directional enciphering and deciphering of a test message. "HELLO" generates the ciphertext "ILBDA", which can be fed back into the machine to output the original message.

The bidirectional nature of the encryption process makes the machine work as both a ciphering and deciphering tool - if two machines are configured with the same settings, ciphertext from one machine can be input into the other to reveal the original plaintext.

Recording of the plugboard configuration. Letters have a 1:1 connection to other letters, visualized with wires mimicking the physical device.

One of these configuration settings is the "plugboard" - a series of pins at the front of the machine which can accept wires connecting them to one another. A connection between two letters in the plugboard represents another substitution - if A is connected to K, any "A" signal that transits the plugboard will output as a "K" and vice-versa. I chose to represent the plugboard in a semi-skeuomorphic way, drawing bezier curves between letters to visualize all the active connections.

Screenshot of all enigma machine components acting in orchestration.
Screenshot of all enigma machine components acting in orchestration.

This project was very challenging to visualize - as a top secret encryption device, the nature of the Enigma machine is inherently in opposition to someone trying to understand how it works. I was inspired to undertake this project after watching some 3D animations that helped me to visualize the inner workings of the machine, but I wanted to build something that could be interacted with as well. I'd like to add a bit more explanatory text to the design, as well as experiment with a few alternate rendering options, but I'm really happy with the current result.

Back to all projects