Menu

Subscribe

Mockups and Prototypes in Patches

on mockups, prototypes, templates, Tutorials

I recently saw a very nice article by Vincent Munoz of Beloola about how web designers can quickly view their UI mockups in VR - You can read it here.

He did his project in A-frame by Mozilla. While A-frame is great, it still comes with the hurdle of composing this in a text editor and running it on a local web server.

Since Patches is a cloud service, I thought of re-creating Vincent's design as a template in Patches. This way, the only thing designers have to do is upload their images.

Here's how to use the Patches version of the template:

  • You can click the Edit icon in the embed above or open the template here.
  • Use TAB to toggle the Patches graph. Press V to toggle VR camera view. Pan and scroll with the mouse.
  • You can upload your own images by clicking the Edit (pencil) icon in the textures. The image projected in the cylinder is 3600x900 pixels. The header and footer images are 600x200 pixels. You can of course experiment with different sized images.

I was then reminded of a similar blog post by Josh Carpenter from way back, where he talks about prototyping VR designs.

I also recreated Josh's project as a Patches template, embedded above. It features a slider where you can change the radius of the cylinder, as Josh suggests in his article.

  • You can click the edit icon in the embed above or open the template here.
  • Use TAB to toggle the Patches graph. Press V to toggle VR camera view. Pan and scroll with the mouse.
  • You can upload your own images by clicking the Edit (pencil) icon in the textures.

Thanks to Vincent and Josh for their important work on UI design in VR. If you have similar ideas, please get in touch and I can help you create a template for Patches.