Translating a website into a book, and vice versa, requires careful consideration. Our main goal is to preserve the "flavour" of the design while translating it across the two media, where user interaction is substantially different.
This project was made in collaboration with Marc Porter Magee, Lisa Gibes and Kate Duval at 50CAN. Here's a quick overview of the process:
Since annual reports are pretty standard in terms of audience, reach and intention, we focused on telling a fun story, starting with two design concepts—(i) cards and card-games, and (ii) botanical illustrations and charts. For years, Marc in particular has toyed with the idea of an oak tree as a metaphor for his organization; an old-growth oak is strong and inspiring, but it was once just a little seed, much like 50CAN was a five years ago. Today, they're one of the strongest voices in the education reform movement in the US, but they also have the wisdom and humility to understand that they're still a young tree with a lot of growing to do. (This single ethos is perhaps what we find the most inspiring about 50CAN: the idea that there is always room to grow and more to learn.)
The botanicals idea always made more sense from the beginning. We developed the narrative and visual language using pinterest. Here are a few highlights from that board, clockwise from upper-right:
Next: making it come to life! Justin started by making sketches and piecing them together into a landscape. This is an early draft.
Since the tree represents 50CAN, we deconstructed the various departments into the trunk, branches, leaves, roots, etc. Of course, the tree of 50CAN can't grow without the help of outside forces—the sun, the rain, birds who scatter seeds and worms who turn the soil, and the companion plants who encourage each other to grow.
Trivia: A couple friends of Farah's—Em Ledo & Katie Green—suggested replacing the dandelion with acorns, to represent the fellows program. That single discussion ultimately pulled the entire metaphor together.
Once we finalized the artwork, while Kate and Lisa made sure all the copy was written and proofed, we added Max to the mix: "Here's the site, what can we do?" As always, Max has wonderful ideas beyond simply (and flawlessly) coding the designs: one example here was the suggestion that we add subtle movement on the landing page (look at the birds and leaves on the tree, the rays of the sun and the rain drops).