An engagment journey mapped in print and pixels.
|Who||Collaboration with Geri Coady|
|What||Brand, prototyping, front-end, design, writing, UX, print|
Welp, Geri & Simon’s map is probably the loveliest use of Picturefill I’ve seen yet.
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.
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.
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.
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.
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.
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.
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.
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.