An example UI in 3D

  Posted Saturday, February 4th, 2017 • Weekend Project

A 3D UI prototyping tool

I wrote a library to explode UI into 3D parts using JavaScript and CSS to aid cognition during prototyping

I created a tool for visualising HTML DOM elements as exploded-diagrams, inspired by a defunct Firefox debugging tool. With my product design background, I found it useful to grouping and differentiating elements in this way as it creates a more physical representation on the screen that can be inspected. We were in the middle of a project at work that was creating novel UI that had become harder to demonstrate, and I thought this may help provide clarity and spark more interest.

We used the tool at work to visualise our product, and the library has had thousands of downloads. Interestingly, the parameters can also be set to create a 2D parallax effect, which has been a recurring design trend in web design.

I gained experience:

  • Creating block-box software (JavaScript closure) and documentation for library use 
  • Publishing open-source projects to NPM
  • Using CSS 3D
  • Using GitHub Pages