Sketching Stereoscopic GUIs with HTML5 Canvas

摘要

Creating the layout of an application graphical user interface is an important part of any system development process. Mock-ups, usability studies, focus groups and sketching are techniques that help define this layout and ship the best UI for the required task. But with the addition of 3D depth into the GUI assortment, a gap is exposed when trying to draft the GUI due to the fact that depth cannot be easily represented using traditional 2D methods like paper or existing software. With this article we present a tool that allows designers and developers to draft graphical user interfaces that comply with stereoscopic side-by-side formats. The tool is created using the HTML5 canvas element, in conjunction with the browser's console to live edit any sketch, and created layouts can be saved and shared in devices capable of showing compatible stereoscopic images.