For my senior capstone project I wanted a challenge. I pondered on how I would make something meaningful in a way that is experimental and fun. With that in mind, I decided to create an AR/web experience that takes the user through my most precious memories of the past 4 years I've lived in Savannah.
Making the Illusion happen
The beginning it was overwhelming. I've never dabbled in coding or AR. It felt like I didn't have a a firm grip on where to start. So the first phase of the project was comprised of lot of research on what the most appropriate software to use. As well as figuring out what I wanted to achieve with the project and what type of experience I want it to be.
This is how if felt when I first began the project
After the research, I narrowed down my options for software to four options In early phase of the project I went mainly with Spark and Swift. Later on, I transitioned to using Adobe Aero. Aero was the most efficient in terms of sharing the scenes to be able to incorporate it into the web app for the user to interact with.
When it came to the illustrations there was lots of planning and making sure that the layers were separated in a specific way. This was essential in the process in order to be able to achieve the effect I wanted.
breakdown of the flattening of layers for 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.
Mock Up for web and AR
Prototype in AR
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.
Prototype sketch
Final Illustration
Sketch
Color Variations
I knew this was not going be what the final style for the project was gonna look like but I wanted to explore a fun illustration to bring to life in web and AR.
Initial Concept sketches
I wanted of of the illustrations to be places where I had a fond memory or somewhere that was significant to me. In the illustrations I wanted to capture the sense of depth and ephemerality to make the viewer notice the small details and a sense of wonder.
First pass of skecth
Final composition with value comp
Initial sketch with rough values
WEB DEVELOPMENT
This was the technical portion of the project. I taught myself CSS and Javascript to make the interactive portion on web. For the website it went from initial wireframes to a interactive prototype made on figma to the translation of it to JS,HTML and CSS.
snip of code for the tilt interaction
wire-frames prototyped in Figma for the web app and phone
There were a couple weeks of my life where I breathed code and wire frames. I felt like I had to console log my actions and feeling to see if could execute them.
Final Web-Look
MAP DESIGN
