Check out the interface here!

Project Overview:

 

For this project, I wanted to experiment with using jQuery libraries. I began to read about jQuery UI library and learned that it has many functional uses that can make code more flexible and rich. It's draggable and droppable functions caught my eye and I decided to build a mini project after reading about draggable and droppable.

 

I created an interface to design your own terrarium. I chose this theme because I was trying to think of examples of objects being placed into another location. Lately I've been really into gardening and planting succulents, so I thought this would be a fun interface to design for fun.

Process:

 

I started off by drawing some sketches of potential ideas. Some of my ideas were "building your own coffee drink" (inspired by my days of being a barista in high school), "baking a cake", and "going grocery shopping". However, the idea I had the most fun developing was "to design your own terrarium". I decided to draw the plants and terrarium bowl as vectors to give it my own style instead of using photographed images.

After settling on a concept, I drew a rough wireframe of the interface layout on paper.

Then I created a rough mockup of the interface using Sketch. Making mockups (like the one pictured below) help me visualize the color palette and typefaces for the interface.

Lastly, I code the HTML, CSS, and JavaScript files. Because I used the jQuery UI, I had to learn how to link a library to my files. With some extra reading and Google searching, it was fairly easy to link the library. I used this library to make objects draggable and droppable. When objects are dragged, their opacity is lower. When objects are dropped, users can hear a sound to signify an object has been dropped inside the bowl. If users want to start their design over, they can click on the reset button below to clear the bowl and move the objects back to their original position in the sidebar.

 

Check out the interface and create your own terrarium here!