Augmented Reality for a Desk Lamp

Interactive Experience on Web

Programs Used: Adobe XD, Sublime Text, GitHub, Artivive
Other Mediums Used: Graphite, Paper

Artboard 1 copy.jpg

This is a project done for my 5D Fundamentals: Experience and Drawing class. This project aims to understand creating an experience through Augmented Reality, HTML and CSS.

The contents of this project explains the constraints and affordances of a Desk Lamp and describes its physical properties and manipulation.

The project then shows the object in Augmented Reality in a place where a desk lamp is usually found (desk) and where it can be found in a larger scale (as a lighthouse).

VIEW THE WEBSITE

Drawing

1-2.jpeg
lamp.png
bg2.jpg

This project prompted us to draw images that we were going to use for the experience. From left to right, I drew a desk, the desk lamp, and a cliff by the ocean.

UX Process

Artboard 1 copy 2.jpg

In the beginning, we were tasked to create the UX design for the ratio of an iPad. This is the original iteration of the web design.

Artboard 1 copy.jpg

While I managed to keep some of the elements, I changed various design choices for the web experience. This is because I felt that it fitted more in terms of its use. For example, instead of arrows and progress bar for navigation, I simply changed it with text, as I feel that it is more suited for a web experience.

HTML and CSS using Sublime Text

Screen Shot 2020-03-09 at 4.56.21 PM.png
Screen Shot 2020-03-09 at 4.56.37 PM.png

Above are my HTML and CSS for my Index (homepage) respectively. I kept the HTML and CSS close as possible to the UX design, learning new skills and codes along the way.

Previous
Previous

Creo