clock menu more-arrow no yes mobile

Filed under:

Talk Travel Design To Me

It's easy to fear designing a travel feature, in my experience. The scenery for a travel piece usually starts with the destination itself, but is often foreign to those don't have strong knowledge of the area. For a guy from Wyoming like me, it's not always easy to call upon memories of lush landscapes, seaside views, or open valleys.

I've had the great pleasure to try and take a few different runs at this kind of process, both on the internet and in print. And it was in the latter that we found the most immediate inspiration for a longform piece, Zero To Mandalay, written by Spencer Hall for SB Nation. We wanted to share the process of how we used those influences to create the final Mandalay piece, along with insights into aspects of its completion.

Getting started

We do a lot of project kickoffs on the editorial products team at Vox Media. Editorial team members, designers, developers, and project managers join these meetings to talk about a new piece. We talk through particular requests or visions any one group may have, and how we might best collaborate to get the outcome we want.

And then it's off to paper and pencil. Here's a sketch that stood out from our first set of wires:

myanmar sketch

Dylan Lathrop

For the "Zero to Mandalay" art and aesthetic, SB Nation editors wanted to avoid the visuals of colonialism, or anything else stereotypical for the topic. That made sense—we wanted a direction that felt fresh. We toyed with the idea of doing original illustration, and how that might play for over 12,000 words. Ultimately it wasn't feasible, due to our resources and timeline. This can be blessing, a chance to tease out new solutions through raw materials and research.

Looking for inspiration

We explored our back catalog of apps and previous longform work, looking to find a second life for old design concepts or patterns. Nothing seemed to provide the right starting point, even when we looked for inspiration from digital stories published outside of the Vox Media universe.

Many of those publications design for travel narratives in fascinating ways, but we pushed to bring the experience to life in something closer to print work. Print and travel pair well together: books and periodicals can transport you to other areas of the world, and they can can just as easily join you on the journey. Print travels well.

While reading through Spencer's drafts, it was clear we wanted something akin to that sensation, an experience that the audience could travel with. We were drawn to print work seen in the COLORS travel issue, and Eros Magazine layouts.:

COLORS Travel special

COLORS Magazine

COLORS Travel special

COLORS Magazine

Eros Magazine

Something clicked as we looked at these, a feeling that a potential language was emerging, and that we had enough inspiration to move forward.

Building an experience from assets

We often start with type, to set a foundation of tone. We settled on a narrow gothic sans— a face called Nimbus, in this case; comps used Trade. Knowing that original illustration wouldn't be possible, we sat with all the photos that Spencer had provided. I pulled out three main colors that appeared frequently from the photos, to serve as a palette baseline. Once these decisions were made, we worked to align these aesthetic directions and explore how assets would work within the SB Nation longform structure.

Nimbus Sans Condensed



Spencer Hall

We looked back at our pencil sketch, and began assembling elements in Photoshop. Our studies were desktop-focused, but collaborator Graham MacAree and I knew we could lean on the known flexibility of the longform template to account for mobile. So we focused on bringing art direction to a series of components that would scale naturally across breakpoints.

The cover image came to me after looking back through some old visual stuff I had pulled from the internet, and found this vintage Camera cover:

Camera magazine

Fit and polish

Many of the photo alterations and layout choices came out of necessity. The photos captured Spencer's travels really well, but the quality wasn't ideal for publishing. We settled on dropping a black-to-white gradient map on all the images, blowing out the whites a bit, and adding a print tone. We set the images onto color blocks pulled from the original palette, and ran tests to see much variety we could get from those few, simple elements.

Maynmar layout wire

Vox Product

Myanmar photos

Vox Product

Myanmar photos

Vox Product

Myanmar photos

Vox Product

We relied on SB Nation's resident Jon, Jon Bois, to make some gifs that helped illuminate the Spencer's travels, and the rest fell into place about smoothly as it can for a 12,000 word piece. We hope you can take some time to read the finished story.

The approach for every piece is different, and we know we can always improve our process and our page performance. We're always looking for ways to explore new art & design territory with our approach to longform and editorial apps, and it will be nice to have another big travel piece to draw on for inspiration and design patterns next time around.

Have you seen any compelling longform or travel design lately? Please share in the comments.