Some product motion is easier to build in code than to export from After Effects. These two run on generated data, so the figures change on every loop and the layout reflows at any screen width. Each is a single HTML file, so the prototype and the shipped component can be the same code.

Modern design tools like Figma, XD, and Principle have made creating animated and interactive prototypes much easier. Basic elements of frame animations, previously done using video editing tools like After Effects, are now seamlessly incorporated. With these tools, the process of transforming 2D wireframes into interactive prototypes has become significantly more streamlined."

Even today, video editing tools like After Effects offer more options and are powerful tools for capturing subtle nuances in interactions. These more controlled animations are especially useful for incorporating UI elements into presentations.

In the early phase of Quartz, the onboarding experience was explored, and the details of microinteractions were an important factor in ensuring users navigated the process smoothly.

Prototypes for the Mansion Global VR experience at Dow Jones were created using After Effects to convey interactive nuances.

At Virtual Human Therapeutics Lab, with interviews with military veterans and clinical research, the app aims to ease their distress with coaching experience. UI detail references for this Unity3D app were created using a combination of Figma and After Effects.

OpenFrameworks

As my projects grew in complexity, I transitioned to openFrameworks. Unlike Processing, openFrameworks is based on C++, offering greater performance and control, particularly for projects requiring high-speed processing or real-time interactivity. Its extensive library support and faster runtime were essential for building complex, responsive interfaces. I used openFrameworks in my Digital Information Wall project, where I needed to create large-scale, interactive prototypes that could effectively demonstrate complex interactive effects of different products in different categories.

2012-2016

teamLab

Digital Information Wall

• Project and Design Directions: Directed the project by producing designs and guiding client discussions.
• Project Management: Collaborated closely with the engineering team to ensure that both the software, with its unconventional requirements, and hardware were properly built and installed on site.
• Interactive Prototype Development: Produced visual designs and interactive prototypes to drive discussions with clients and engineering teams.
  

View project detail

Digital Information Wall and its early prototype in OF (C++); project detail