As a UX Designer, Front-end developer and AR enthusiast, I created a 3 dimensional website for a project gallery, viewed in a standard web browser
problem synthesis
For my design portfolio, aartics.com I undertook making a 3D representation of my projects as a gallery in a VR/AR world.
Project description:
solution
This video captures the 3D panaromic interaction on my website.
Video of interaction on my 3D website:
process
I started imagining a grid of hexagons where each hexagon could contain a project, an image or other data. By using a hexagonal grid, I can allow the viewer to extend explorations in 6 directions, instead of the traditional 4.
Screenshot of model of 3D visual gallery:
process
Conceptually, using a hexagonal grid could also allow ‘folding’ the design pattern into spherical geodesic dome "worlds of information" that viewers could choose to explore. That could be fun.
Folding 2D pattern into 3D sphere:
process
This enabled me to imagine viewers experiencing equally sized hexagonal tiles in a panoramic dome, and not restricted to traditional rectangular view-boxes (like this web browser we are reading this article on). Viewing from inside the dome (panorama) seemed to limit a user’s view, so I chose to explore viewing from the outside (inverse panorama).
Panaromic view vs. inverse panaromic view:
process
I could then use extruded projections for information of various types and hierarchies - qualitative or quantitative data. These can be represented as heights of the polygons.
Concept for project data types on viewing gallery:
process
I proceeded to visualize the panoramic bird’s eye view interface for my website, by working on achieving the right perspective for viewing on a desktop browser.
Perspective viewing of data model:
process
I developed a recipe framework for realizing this concept into a website for my portfolio. I made the 3D object representation in SketchUP. For the current design, this is a hexagonal column grid:
Visual perception of hexagonal column grid in perspective:
process
I exported screenshots of the “bird’s eye view” camera perspective of the model. I stitched the screenshots in PhotoShop for a continuous panoramic effect. I used 20 states of full length images to understand the effect. These images served as the wireframes for the site interaction. I used the 20 state images in HTML, SVG and JavaScript to change the image based on the position of the cursor on the page.
Screenshots of work-in-progress:
process
I laid out 9 states of the 3D panorama in Adobe Illustrator on individual artboards and illustrated the shapes and shadows as polygons for every state. Care was taken to ensure that each artboard contains the same layer name for individual polygons. I then exported all the artboards as individual SVGs from Illustrator.
Screenshot of artboards from Illustrator:
process
Morphing svg polygons in browser based on user interaction:
Interpolating array of points for each SVG:
process
Thanks to this design exercise, we now have an animation framework to morph Illustrator graphics to interactive HTML. This allows us to imagine and prototype 3D visual interactions in 2D tools and traditional browsers. There are many improvements to be made, and as time goes on, I hope to present more examples and improved versions of this framework.
Concept for gallery browser in VR/MR/AR, viewed in traditional web browsers:
I'm Aarti. I'm a designer + developer and I'm bringing together my past experience in architecture and software engineering to build new futures. Get in touch:
designed and developed by © aartics
