Labocine (labocine.org) is an Imagine Science Films initiative to extend their film programming to a broader and diverse audience. By November 2016, Labocine will have approximately 1,000 film titles from 200 countries for all ages brought to you by artists, scientists, filmmakers and educators.


During the months of May to August of 2016 (approximately 4 months), I worked as a full-stack developer for Labocine, doing everything from design of the website and logo, as well as the creation of the website itself. When I was asked to create the website, it was merely an idea, and by the end of July 2016, it was ready for beta testing.


After discussions about what the main page of Labocine was to look like, the client and I decided that it would embody the look an feel of a magazine, as Labocine was to have monthly issues of films picked out around a single topic / keyword.




Labocine is a combination of two words: "laboratory" and "cinema". Together, it embodies the experimental approach it has in the way that films are showcased. It also emphasizes the fact that Labocine is a viewing platform for science-related films. This is why I decided to create a very simple and clean logo, by using a thin sans-serif font and replacing the "o" of Labocine with a abstract and simplified symbol of aperature of the camera.


Below are some wireframes that I had created during the design phase of the website. It again, carries on with the clean and simple look throughout the website.






Most of the webpages on Labocine are auto-generated when information for a movie is entered in on the admin website. I created a content management system (CMS) tailored to the needs of Labocine, using a php-based MVC platorm tool, CodeIgniter. All of the wireframe pages were created pixel-perfect for each template, and using the individual film's information entired using the CMS and saved on a MySQL database.


Below are some intro videos of some of the issues of Labocine, which also includes how to navigate around the website. It also shows the core idea of the website which was to show that all film playlists shouldn't necessarily have to be linearly played. As shown through the web of connections, a film may be connected to multiple films all at the same time, in a multi-dimentional way, and for each issue, a network of films are created and connected to their common keyword tags. A viewer may view the series of the films in a given issue by exploring around the network, or by clicking on the tags underneath each of the film viewing pages.