For my senior capstone project, I wanted a challenge. I pondered how I could make something meaningful but also experimental and fun. With that in mind, I created an AR/Web experience. This experience takes the user on an interactive journey of the most precious memories of the past four years I've lived in Savannah.
Mock Up for web and AR
Prototype in AR
MAKING THE ILLUSION HAPPEN
The beginning was overwhelming. Before this, I never dabbled in coding or AR. That made it challenging to find a clear start. The first phase of the project consisted of extensive research. The research helped me determine the most appropriate software to use. As well as figuring out the expectations and goals I had for the project
This is how if felt when I first began the project
After the research, I narrowed down my options to four software options. In the early phase of the project, I used mainly Spark and Swift. Later on, I transitioned to using Adobe Aero. Aero was the most efficient since it facilitated sharing the scenes to incorporate them into the web app for the user to interact with in AR.
Prototype
Before I started Illustrating the actual memories I made a prototype. This was to test my capabilities with with code and AR before starting.
One of the caveats of using 2D assets in AR is that it limits the range of motion of the illusion. When tilting or walking around the layer space it looses the illusion. A great solution for this problem is to use a frame in front of the picture plane to be able to get more range of motion from the user's perspective and separation between the assets.
One of the caveats of using 2D assets in AR is that it limits the range of motion of the illusion. When tilting or walking around the layer space it looses the illusion. A great solution for this problem is to use a frame in front of the picture plane to be able to get more range of motion from the user's perspective and separation between the assets.
Final Illustration
Sketch
The illustrations were separated into different layers. To mimic how things were going to be arranged in Ar. This separation created a sense of depth when the user viewed the illustration.
Initial concept sketches
I wanted the illustrations to be places where I had a fond memory or somewhere that was significant to me. I wanted them to capture the sense of depth and ephemerality to make the viewer notice the small details and invoke a sense of wonder.
First pass of skecth
Final composition with value comp
Initial sketch with rough values
ILLUSTRATIONS
WEB DEVELOPMENT
This was the technical portion of the project. I taught myself CSS and Javascript to make illustrations interactive on the web. The process for the website went from wireframes to an interactive prototype made on figma to the translation of the Web page prototype using JS, HTML, and CSS on VS code.
snip of code for the tilt interaction
wire-frames prototyped in Figma for the web app and phone
MAP DESIGN
