UX · VISUAL DESIGN · BRANDING

CINEMAGRAM

Cinemagram is a social app that lets you create and share cinemagraphs from your mobile phone. After filming a short video, painting over parts of the video lets you choose what moves.

hero-cinemagram

MOBILE APP

The main goal of the app was to allow users to make their creations and share them easily with their friends. I designed the capture flow, sharing, social feed, profile, and more. Users can upload or record a video which then is trimmed to a maximum of four seconds. In editing, they're able to modify speed, loops, filters, and masks.

CAPTURE FLOW

To create a cinemagram, users start by recording a maximum of 5 seconds of video or importing an existing video. The recording state is shown as an orange strip at the top of the screen. Afterward, users have an opportunity to trim their video and turn the sound on/off.

EDIT FLOW

The bottom bar allows toggling between four tools: Mask, Loop, Speed, and Filter. Within each is the ability to configure in more detail if needed.

Mask: Painting the orange mask over parts of the video makes only those areas move. Users can pinch to zoom in and out for painting in higher fidelity. There is also an eraser, undo, and clear all buttons for quick editing.

Loop: Users can set their creation to forward loop, reverse loop, or continuously loop back and forth.

Speed: Using a slider, users can easily speed their video up or slow it down to achieve the desired effect.

Filter: Video filters are available as live previews.

FINISHED CREATION
static1.squarespace
MORE CREATIONS
tumblr_n3a7zcxaaY1qef46ho1_500
tumblr_p3h5pwskTK1u9ooogo1_500
tparisumblr_nvfz0iKrVw1qzcq51o1_540
tumblr_p9al1fKfdO1vlgtyvo1_500
tumblr_p2a0x8zNn81socg8zo1_500
ADDITIONAL APP SCREENS
cinemagram-more-screens
cinemagram-brand-2

BRANDING

I had the opportunity to redesign the brand, refreshing aspects of identity, mobile, and web. Our users had naturally cultivated a fun, creative, and playful space on the platform. The goal was to embody this personality aesthetically.

cinemagram-brand-4
CineBrandingFinal-4
cinemagram-brand-3
cinemagram-brand-1
NEXT PROJECT
© 2018 EUNICE JOUNG