Google Exercise

/ Google Exercise Project / Solo Work / WEB-APP / UX Design and Engineering

+ Recall the moment +

I wanted to create an image gallery application that let users recall memories of the photos while they are using it.

Therefore, I decided to design the interaction which resembles motions of camera lens [ shutter ].

Also, I tried to provide a new option of viewing digital images: analog photo feature view.

Main Interactions

Tap to go Detail View for selected photo.
Swipe through to see previous or next images.
Press a photo on Detail View to see dynamic view which has analog picture style.

STEP 1. Mock-up Images

I received mock-up images to develop Photo/Image Gallery's interactive designs on mobile platforms.

STEP 2. Sketching Ideas

I tried to imagine user scenarios and concept of image gallery.

I firstly came out "camera" image since I assumed most of images and photos in the image gallery application are taken from users by using their (phone) cameras.

*** Imagery of CAMERA LENS SHUTTER MOVEMENT ! ***

FORM FOLLOWS FUNCTION :: Motion Provides Meaning

I wanted users recall the moment they took the pictures by having camera lens shutter interactive design.

STEP 3. Learning Google's Material Design Rules

I tried to make the prototype looks like Google's product. I carefully applied Google's Material Design Rules.

( Roboto Fonts, Color Themes, Flat Designs, Layout Styles, Smooth Movements, Shadow Effects, etc. )

STEP 4. Building a prototype

I created the prototype by using

HTML(5) CSS(3) JAVASCRIPT jQuery(UI) Angular.JS Hammer.JS BootStrap Google's Material-Design-Resources

***** Recommended to explore the prototype on mobile devices *****

Let's Explore