VSCO Tangible User Interface Prototype
For this week’s assignment, I chose VSCO app and develop a tangible user interface prototype.
Existing program
Process
Step1: sketch out the basic idea
Step 2: Print out materials
Step 3: develop the model
- Frame (acting like a screen)
I created a frame with a band to stabilize the roll of photo paper to past through. The photos are organized (3 photos in each row) in a way like VSCO did.
- filters
After you choose a photo and select edit, VSCO will take you to the filter selection which organized like the my prototype below. Each frame will allow you to see the preview with a filter applied.
- edit function slider
In VSCO edit menu, almost all the interaction are initiated by sliding. The button is round so I used the round object to represent it as well. (The objects that I used here are actually leftover mini coffee cups given by my friend). I cut out each track and pasted the strip on each cups so that the cup will move straight on the track.
- advanced edit (HSL) controller
This are the actual colors they used in their menu. Similar to the step above, I created the button with the mini cups. But unlike in the basic edit function where everything is controlled with a slider, the HSL function will first ask the users to pick a color and then adjust the amount of color that you want to apply on a picture, therefore I used a wheel with a slot to drop the selected color. This way, we can avoid having too many sliders, and maintain the minimal looks on the app. And by rotating the wheel, users can also make adjustments.
Photos of all sections
