Custom Interaction Design
Overview
The following are custom designs for learning projects. I have primarily worked with HTML, CSS, 3D CSS, JavaScript, although past projects have included ActionScript3 for environment and interaction design.
Interaction Examples
Custom 3D CSS Environment
Due to significant hardware restrictions for field devices (U.S. Army deployed medical equipment technicians), the 3D environment for this training project required heavily reduced processor load. I experimented with creating a 3D cube, texturing the inside of it to create a room (skybox), placing the POV inside the room, animating the “camera”, and placing textured objects inside. This significantly reduced processor load (no shadows or reflections) and provided an engaging environment for the techs to train with. I’m working on a generic version for the public (that doesn’t use proprietary data). In the meantime, take a look at the project deep dive to see video of it.
3D Interaction Tools
Using a custom 3D environment developed for above Army project meant that the workflow tools didn’t exist yet, so I created a series of tools that allowed me to take assets from the graphics team and load and test them quickly before moving them into the learning environment. I iterated over a few versions (v1, v2, v3) before landing on the version below, which includes a control surface for panning.
Interface – Buttons
The training developed for the Army needed an information button that would display two different pieces of information as overlays: General Help and the Lesson Map. To accommodate this and take up less space (learning interfaces can get cluttered), I created a button that expands on hover to show both buttons, and themed the button to match the colors and lines of the project.
Interface – Meters and Health
Adding some additional flair to the Army project above, I developed a series “health” meters. The project was zombie themed, so having a health meter that transitioned from red to green and back tied in with the story. I initially created a thermometer version, but got inspired and went with a 3D heart made up of squares that rotated. I tested the concept and then developed the animation and JavaScript control functions for the final version below.
Additional Examples
I’m always playing with interface and interaction design concepts, so feel free to peruse my CodePen page to see what I’ve been up to lately.
You can also see examples of my coding work on GitHub, which include examples of full stack projects I’ve done on the side.