Designing Travel Captions

Making a blog platform was supposed to be easy.

But making high quality things is always hard work. I mean… Medium spent a month perfecting link underlines. Here’s the highlights of my design.

Backstory #

Travel Captions is version 2.0 of my writing on Facebook. As I explained in the first post:

Last year, I posted photos on Facebook of my Japan trip. People asked me for photos, but photos alone could never capture my experience. There’s a lack of depth that almost antithesizes my vision of travel, so I posted photos with stories.

Facebook was best at showing photos on all platforms, while allowing people to read. I didn’t want to compromise that. After the success on Facebook, I built my own platform, which had to be better and and that’s a challenge in itself.

Photo #

I wanted one photo to be as prominent as possible. Only one photo, so there’s no visual competition. One way to do that is making it as BIG as possible.

Medium does that well, but the problem is the art direction, as it crops depending on the screen size. Medium sets an atmosphere with a photo, as the writing takes center stage. Looks great, but you can lose context.

So I took Medium’s design without the cropping and added arrows to move left and right between photos. For mobile, you can’t see details well in a small screen without zoom. This is where most web-only platforms fail. So I made a native photo view with the zoom and swiping. The back button works too.

Home page #

The goal of the home page was to make images as big as possible, while making the posts browsable. The one column design is the best I could do.

The images are greyscale to remove attention. The hard part is having a good image preview. I have to crop each one manually with an (ugly) UI to do that.

Paper #

I started with a paper texture background to resemble old Japan. I also mixed it with the greyscale image previews. The slow fade on hover gives a peaceful feel. The platform also shows Japanese or Korean dates depending on the post.

Writing #

I write in Markdown with Writer Pro and Dropbox for device syncing. I customized a Markdown parser to create footnotes, citations, and auto-emphasizes short first sentences automagically. I paste in the text and the server formats it all.

Typography #

I wanted a serif font that felt old, but was easy on the eyes. The debate was between Freight Text Pro, Kepler Std, and Arno Pro.

I chose Arno Pro. I love the uppercase Q. The Y hints to the letterpress days. I wish it was lighter in weight, but I couldn’t resist using it. Afterwards, I chose the logo typeface, Caflisch Script Pro, made by the same designer, Robert Slimbach. The logo could be better, but I’m not a graphic designer…

To be more Japanese, I based the font colors on the Pilot Iroshizuku inks. I’m a fan of the Shin Kai’s shading, so why not?

Fully fluid #

The entire site is fluid. Font and images sizes change dynamically based on the width and height of the window, which changes per device too. Makes a better reading experience and faster load times.

I was never so meticulous with the front end before. Maybe these little things don’t matter, but I wanted this to be my best visual work.

You can see the source and the website, Travel Captions.