I make websites and stuff.

Varun Chopra's Portfolio

varunchoprafilms.com

Varun Chopra is a Cannes-nominated filmmaker, student and director studying in Loyola Marymount College in sunny Los Angeles, California. His first film—God on a Leash, is selected to be showcased at the 2016 Cannes Film Festival. I was tasked with creating a website for him and his projects.


The scope of the project was pretty clear, and there was a lot of flexibility and freedom—Varun (the client) didn’t need the site right away, so I had a fair amount of time to experiment and flex some design muscles .

1. The Content

The site structure was going to be understandably simple, so I quickly whipped it up and got it approved so we could move forward.

We agreed on a standard homepage-about-work-ish model and started to move to the visuals from there on.

2. Visuals

Varun was pretty clear from the start that he wanted the first impression of the site to give a subtle indication what it is that he does.

I tried mocking up some draft looks for how the visual language of the site might look like:

Varun agreed with the general aesthetic I was looking to go with, but he still couldn’t see that intuitive message that this was a filmmaker’s website. During one of our conversations, we came up with the idea of playing a short looping video in the background—that would have something to do with filmmaking, or films in general.

Thanks to the fact that Varun had access to all the equipment we might need to shoot the video, I had the opportunity to art-direct my own shoot. The general direction of the video was to shoot equipment or scenarios that indicated something "meta-film".

As Varun worked on the clip, I worked on a prototype and experimenting with the vertical navigation with a free stock video with a similar color tone from Mazwai.

Early prototype of the animated background homepage.
Early protype on mobile viewports.

The Background Videos

We had an option between the 3 clips that Varun put together and produced

1. The Director’s Chair

The director's chair as a background video for the homepage.

Apart from being inherently symbolic and aesthetically pleasing, the director’s chair video had a couple of problems.

  • The name appearing twice: That seemed sort of counter-intuitive and didn’t make sense, when it sat together on the page with the other content.
  • Viewport Change: When the site will be viewed with devices of different screen sizes, the video will resize, stretch and shrink to fit the screen—and when that happens, parts of the chair might become hidden which runs the risk of people not recognizing that this is director’s chair, and hence, making its essence of no use.

2. Film Set Equipment

Film set equipment background video for the homepage.

This clip adds the right amount of color and vibrance to the page and also looked aesthetically pleasing. The motion was also smooth, and resizing and snapping of this video didn’t rob it of its essence.

3. Final Website

Fid. 2.10: The final piece.

Hi, I'm Prabhav Khandelwal. home

I'm a Delhi-bred freelance designer currently studying Cognitive Design, Human-Computer Interaction, and Design at the University of California at San Diego. My vices include typographic pornography, obscure Indian music, Manchester United and (thinking about) writing.

I've been freelancing making websites & stuff since high school, and somehow am still managing to do it through college. On campus, I'm co-founded UC San Diego's first student-run design consultancy, Studio 1346 and also served as a studio lead with Design for America.