“Simple motion treatments while creating a sense of space with graphics and transitions.” —juror Harold Jones

“This is what I imagine happens when math looks pretty. Motzenbecker shows both technical skill and visual restraint and resists the urge to overdo it.” —juror Libby Bawcombe

Overview: Designers search for developers who share their passion for color, layout and Interactive. Developers hope to work with designers who won’t overlook the technology of the site in pursuit of creative intent and design. Creative developer Alex Motzenbecker manages to perfectly balance the relationship between design and development with a personal website that showcases his animation and user experience design talents right alongside his engineering skills. Fluid 3-D animations transition from one colorful page to the next, fostering a functional and highly engaging experience throughout Motzenbecker’s portfolio.

•The site was developed in JavaScript and CSS 3D.
•The project was created for an audience of designers and technologists.
•Motzenbecker created two separate websites: one for desktop and another for mobile and touch devices. Both websites use the same data for content.

Comments by Alex Motzenbecker:
What was the most challenging aspect of the project? “Although it was initially helpful, the most challenging aspect of the project was the open-ended timeline. As a labor of love, I found time to work on the site between life and client work, often during nights and weekends. The fact that I did not have a deadline enabled me to continually evolve the design and create new features I hadn’t originally planned for. But because there was no official launch date, the potential for improvements, new features and bug fixes was endless. Feedback from fellow creative developers helped me realize when it was time to stop working and launch the site.”

What was the thinking behind the navigation structure? “The idea was to use the navigation as an engaging and structural component of the site. The navigation is the website. Each page layout on the site is unique, but the pages are unified by the constantly transforming navigation. The more traditional fixed navigation on the left acts as an anchor within the 3-D space. The mobile site mimics this effect in a 2-D space, which is better suited for smaller touch screens.”

What software, back-end technology and programming languages were used? “The site was written primarily in JavaScript and CSS and uses the GreenSock Animation Platform animation library. A custom tool on the back end creates static JSON files that are loaded by the site. Great care was taken in optimizing the speed of the animations by minimizing any extraneous browser painting and layout updates. The 3-D elements were created using CSS 3D transforms. Working with CSS 3D was difficult because browser support for it varies widely, but I chose it specifically to challenge myself to work within the Document Object Model and avoid using the canvas tag or plug-ins.”