Project 1c: Coding monkey

It was at this stage that I decided to take advantage of the situation to gain an invaluable insight. Communication between designers and developers has always been hard, even with the amazing work from Invision, the simple act of communication will always result in a loss of fidelity. I therefore acted as a developer would to try to empathise with their role, to help me communicate with them in the future. I only asked questions when I needed to, not when I wanted to. I took the design I was given and built it without questioning the decisions made. With a couple of exceptions, I did measure the contrast between the colours for text and I did not go with the Typograph typeface Ran recommended, rather going with Futura.

Pinhole camera project webpage design • Ran Cheng

As it currently stands the site is divided into two parts. The main at the top, is the implemented design from the team. Hidden at the bottom are the additional ideas that came to me post ideation. I took all I could from the developer role play phase, but a creative can’t just switch off and sit back.

Screenshot of pinhole camera webpage 1 • David Valente

The main widget revolves around orange 4 dots representing each of the 4 experimental photographs. A button above the graph allows the user to toggle the graph from representing the shooting order to displaying them in ascending order of brightness for the negative images. A brief animation of the dots moving to their new location of the chart emphasises the relationship between these two representations of the original data. The user gesturing their mouse over the chart is naturally a graceful motion, which is juxtaposed with the instant change of informational data to the right. Though both fast in a macro observation, provide vastly different experiences. To the right is an informational section that changes the data displayed to correlate to the dot that the user hovers over. 

Screenshot of pinhole camera webpage 2 • David Valente

One of my first ideas was to illustrate the main images in the order they were taken, demonstrating the narrative progression of our process and success in pinhole photography. The last two stagger out when the user hovers over.

Screenshot of pinhole camera webpage 3 • David Valente

Even during my tangential extension of the original idea, Ran was kind enough to create this patterned background for this chart. This, similar to the original includes the images in the diagram, and shows the exposure time when the user hovers over each image.

Screenshot of pinhole camera webpage 4 • David Valente

Finally, the final image. The successful one. For this one, it was established among all who saw it, that the orientation, let alone the subject if the image, is unknown. For this reason, this final widget rotates the image whenever the image is clicked. Plus don’t think I was kind enough to orientate the image correctly be default.

‹ Part b
Part d ›

Next project ›