FilmFeed

Personal project


  • Branding
  • Photography
  • Front-end development
  • 2019

Introduction

As I started shooting film in 2018, I needed a way to share my work with others. While Instagram and Flickr are some valid options, I wanted to create a more personal experience. It was also the opportunity for me to combine my 2 passions: photography & design.

Logo and branding

In order to add some personnality to the project, I explored a few ideas for branding. The logo is composed of two “f”, the symbol used to indicate an aperture value in photography. The background showcases a color spectrum with vibrant tones. A subtle noise is present to add more texture and represent the grainy aspect of film.

Logo of FilmFeed

An optimized experience

Personal projects are a great opportunity to focus on delight. Often, projects in a professional context have to follow tight roadmaps and are restricted by technical limitations. Not beholden to anyone but myself, I took my time to focus on the initial loading experience to set the tone for the website to follow.
By default browsers will try to load images as fast as they can, not providing the user with a sense of progress. This is especially true here since the browser tries to fetch a large number of images on first load.

Light Table at Oakland Museum of California’s Eames exhibit

The grid view is directly inspired by a light table I discovered at the Eames exhibit at the Oakland Museum of California. I found it to be a great way to provide a preview of the photos while the main feed was loading.

Loading grid

A personal photo feed

This website is a very personal project and I didn’t wanted to show too many information that would make the website look complex and busy.
By removing distractions, I wanted to convey the simplicity of shooting film with an old camera.
Simplicity does not have to come at the cost of information; I wanted to show the location, film stock, and focal length for each of the photos but I made the choice to only showcase them on hover (web) / tap (mobile) to keep the interface as clean as possible.

Multiple posts
Side menu
Anatomy of a post

Outcome

This project allowed me to create a very personal and minimalistic experience - It was also for me the opportunity to control the full user experience and make every design decision very intentional, something that's not possible on traditional social media platforms. It also allowed me to improve my rusty front-end skills and use some new layout features (CSS Grids).