Hire me — Looking for an experienced web and product designer? I’m available →

Geri & Simon

An engagment journey mapped in print and pixels.

Geri and Simon responsive engagement map
Geri and Simon responsive engagement map
Project details
WhoCollaboration with Geri Coady
WhatBrand, prototyping, front-end, design, writing, UX, print
Welp, Geri & Simon’s map is probably the loveliest use of Picturefill I’ve seen yet.
— Ethan Marcotte via @RWD

When a designer and an illustrator get engaged, pressure soon mounts to produce invites that meet expectations. Of course, Geri and I did everything we could to exceed those expectations.

Geri and I knew that we wanted our invitations to be unique, fun, and us. With the beginning of our relationship so dependent on travel, it was no question that we’d design a map to tell our story.

Geri illustrated and designed the invitation pieces, I created the intricately responsive website, and we both wrote the copy.

Printed material

We both spent some time storyboarding the map, writing and re-writing the copy, and Geri began finalising a set of beautiful digital illustrations in her trademark brush style.

Detail of the printed invitation material
Detail of the printed invitation material

Together, we chose appropriate font pairings (Love Potion No.10, and Livory) and paper stock. We needed several consultations with our favourite local printer as it was essential we choose stock that not only felt right but could also handle multiple folds.

Detail of the printed invitation material
Detail of the printed invitation material

We tied the complete invitation packages with green and white twine and packaged in custom brown paper envelopes addressed by hand with white ink.

Translating print to web

Work on the web version started early, so in many ways, print and web evolved in tandem. We wanted to emulate the printed invite experience closely, while also ensuring any visitor would feel welcome.

Web homepage
Web interactive responsive engagement map

The website needed a cover screen, our story map with links to individual location screens, the complete CMS-driven Nottingham guide, and a private registry area. Oh, and everything — including the complex folding map — had to be responsive.

Web Nottingham guide showing Ye Olde Trip to Jerusalem pub
Web detail of Newfoundland tradition with Simon kissing a frozen cod

Working with Geri is a dream because she knows the basics of building websites; she understands how to make illustrations for screen, and she knows how to export the assets I need in a responsive, retina world.

A responsive folding map

In all honesty, I can’t remember precisely how the super-complex map came together. I know that I couldn’t find any responsive maps of this nature anywhere online, so in many ways, it was a first.

Video capture of the responsive map.

I’ll nutshell it: the map has a masonry layout underpinning the reflow, and then various layers of illustration and transparencies positioned carefully to create a believable idea of a folding and unfolding paper map.

Geri and Simon responsive map full-width
Geri and Simon responsive map mid-width
Geri and Simon responsive map narrow

There’s a hedonistic party of media queries and pseudo-classes running riot to ensure it behaves appropriately on every screen. Notably, we used the Picturefill polyfill to serve the appropriately-sized image across a variety of screen widths.

I’m proud that we had this idea to make a believable responsive map, and we managed to do it. A rewarding side project that we’ll treasure forever.