Life of Man
Micro-site for 80th anniversary of Esquire magazine
Overview
I was a subcontractor on a team project with tight deadlines. My primary tasks were general R&D and implementation of the site's front end, which was a static web application that had to interface with a proprietary server API and a cloud-based image service. I worked with a Project Manager with task items and issue resolution, as well as multiple graphics designers on both site content and the design for the site (which was meant to work well regardless of the device used to browse it).
Research and Development
Early in the project I was tasked with researching hosting options for the site. This was a straight forward list of well known virtual and dedicated server providers. I was also tasked with researching options for image services. In addition to simply hosting the images, it was required to have a service that could also apply changes to each image (e.g. resize, crop, adjust contrast, apply filters). I also did research to support adding images via upload, phone camera, and webcam capture.
Static Site Generation
I created a simple Python 2.7 script for generating the static site content, using Jinja2 templates.
UI Implementation
The site consisted of two galleries; one was of 80 professional photographs along with profiles and videos (most of these were of celebrities). The second one consisted of user generated content. Anyone who wanted could fill out a short profile and add their image.
Both galleries shared a lot of logic. They were fully responsive layouts, with specific cutoff points for number of images displayed and dynamic sizing adjustments in order to fit any give resolution. Infinite scrolling was utilized to continuously load and display additional profiles (which for the user gallery, was in the many thousands). Users could use swipe functionality for navigating profiles. As users progressed through the app, page-level transitions were displayed.
To support user-generated content, we allowed users to manually upload pictures, use their phone or tablet's camera, or use their webcam to capture an image. To capture information, we used a multi-step wizard.
