LOOKING AT OUR CITY
THROUGH A NEW PERSPECTIVE
The Huntsville Grid Project is a documentary photography site for students at the University of Alabama in Huntsville’s Art Department photography program. Inspired by the Portland Grid Project, the project focuses on documentary photography, where no editorial adjustments are made to a photograph once the shot is taken. The area of the project is divided by five columns and five rows, to create 25 grid areas. Students participating in the Documentary Photography course are assigned two grids each within which to photograph. The HGP is bounded to the North by Pratt Avenue, the South by Governor’s Drive, to the West by Memorial Parkway, and to the East by California Street. The project started in 2012, and is an ongoing documentary effort.
DRAWING UP THE GRID
DESIGN AND PROMOTION
As a UAH student project, I needed to stick to that theme and brand as closely as possible. With the help of some of my graphic design colleagues, we came up with some ideas for the logo and copy on the site. Additionally, I used UAH's colors and linked back to UAH Art Department for promotion. For simplicity, I wanted all the secondary information to live on one page of the site while the other pages hosted the primary content, photographs.
THINK INSIDE THE BOX
IMPLEMENTING THE GRID THEME
I wanted to find an interesting ways to implement the grid through the site. On the home page, I first came up with an old school ImageMap that shows a different image every time you hover in over a grid to look like a hover effect. Yet, this ended up feeling a bit clunky and I knew their was a better answer. So, I found a tutorial on an interactive SVG map on Codrops and manipulated it into a grid format in illustrator. Next, I lined up the SVG points to a map of downtown Huntsville using viewpoint factors in the JS provided. After this, I made adjustments to opacity and how points were hidden and shown on the grid.
On the photo gallery page, I used Flex to make the columns on the 5 rows flex against each other when hovered over. This creates a simple and engaging way for users to navigate this page. When the viewport gets too small, the columns disappear and each image becomes a row with a set height.
PHOTO GALLERY PAGE
Lastly, on the individual grid page, I tweaked a demo I found on Codrops for a Masonry grid gallery with overlay effects. I ran into a usability problem with the grid as it would construct itself only after all the images were loaded. After tweaking the Masonry grid and using the ImagesLoaded library , I was able to make the grid adjust itself after each image is loaded which allows the users to start viewing images instantly. When viewing an image, EXIF data is extracted from uploaded image and shown to user using the EXIF.js library. The data included for these images includes: camera model, focal length, aperture size, exposure time, and the date taken.
INDIVIDUAL GRID PAGE
AN ONGOING EFFORT
NEW PERSPECTIVES AND FACES
With new students joining this project, the Huntsville Grid Project needed a way for users to upload their photos looking at our ever-changing city. By using CouchCMS, a simple and open-source CMS, I was able to create a back-end system to allow teachers and students to make an account, login, and upload their new photos to their respective grids. Users upload new images to the grid by creating a new "page" through a php template which has an HTML embed inside for each respective grid. By installing a new addon for Couch, I was also able to add some user control to the admin-access panel which allows only the super admin to change settings and certain elements tagged with PHP that they may want to edit in the future.