Designing an experimental media gallery
A design note about an experimental photo and video gallery for The New Europeans by National Geographic Magazine.
This is a brief design note about The New Europeans project by National Geographic Magazine. Its purpose is to record my thinking process and recapitulate what we could improve in future projects.
When I joined this project to design and develop an interactive multimedia gallery, I was immediately fascinated by the powerful portraits and stories told by the interviewees. The images were impressive enough to attract viewers’ eyes. The interviews were strong, peculiar, and often, heartbreaking.
The main focus of this project was to create an article about the latest immigrants and refugees in Europe, with a series of portraits and interview videos. I wanted to present the article as visually attractive and emotionally eloquent, rather than emphasizing the politically sensitive nature of the topic. So I began to think about a special media gallery design that would be enticing enough to attract people, and fun enough to let them keep clicking. In addition, the gallery should look lively so that readers would feel more intimacy with the interviewees.
After several rounds of design and prototype experiments, three key features were included in the final design.
1. Custom grid layout
As the goal was to create a media gallery for photos and videos, there had to be a grid or list section to view all of the content at once. The biggest challenge while designing the layout was to avoid monotony. Conventional grid layouts on the web often become boring due to the repetitive sizes and layouts. We experimented to find the best grid sizes, and decided on a grid system with three thumbnail size variations. Every item was manually positioned by hand (or by keyboard) unlike other auto-generated grid layouts.
For various screen sizes, we designed four adaptive grids — mobile, tablet, desktop, and larger desktop — instead of liquid grids. By applying an adaptive layout, we could keep the same design look and feel in most screen sizes.
2. Moving images as thumbnails
The set of short video clips repeating in the grid has become one of the most enticing features. Many people mentioned “Harry Potter” looking at the figures moving in the frames, though feature was not explicitly inspired by the movie.
From the early stage of the project, displaying animated GIFs in the grid was discussed. It was a fun, smart idea, and everyone liked it. But GIFs are not a great format for video due to loss of quality and file size. After a few prototypes, Kathryn Carlson, our enthusiastic video editor, and I began to experiment with actual video clips. We wanted to run at least eight video clips at the same time and had to optimize lengths, qualities, and resolutions of each clip by trial and error. We finally figured out an acceptable formula for the article, but we ran into performance issues playing many small videos simultaneously. We still need to do more research on HTML5 video performance.
3. Seamless transition between thumbnails and large images
While working on the design of revealing big images from thumbnails, I was obsessed by an idea to make the grid look like a real photo wall. Imagine being invited to a friend’s house and finding a wall of family photos. You would slowly walk along the wall looking over the many faces in the frames. Then, you would find an interesting photo and stop in front of that, picking it off the wall and bring it closer to your eyes. If the portrait grid were a photo wall, the expanding transition animation would be a metaphor of bringing a photo closer to your eyes. In that virtual experience, a viewer hopefully would feel more intimacy with those in the grid.
Due to limited time and resources, there still remained a handful of glitches and issues: HTML5 video is not yet stable enough; there are glitches on mobile while playing videos; CSS3 transformation is sometimes quirky on certain browsers; and many more. It is functioning and communicating well in general, but there is a room for improvement for sure.
This project is a result of collective efforts from dozens of talented people. I got a lot of help while working on design and development. Vitomir Zarkovic gave me great design help and feedback. Brian Jacobs lent me a hand in debugging and inspired me with front-end development.
