During the summer of 2018 I had the pleasure of participating in the Frontend Design Apprenticeship at Sparkbox. For four months, I worked on real-world projects, paired with industry-leading designers and developers, and honed my expertise in topics ranging from how to use accessibility as a design constraint to how cleanly code randomness into a CSS animation of bubbles.
My final challenge as an apprentice was to create a marketing website for A Modern Eden: a line of artful products for style-savvy parents who care about what goes into their kids’ rooms.
I took a multidisciplinary, lead role on the project, tackling everything from copywriting to visual design to frontend web development.
During the discovery phase of the project, I learned that A Modern Eden began as a passion project for illustrator Ryan Clark. Back in 2011, he was on the verge of becoming a dad — and he wanted to fill his new nursery with beautiful, meaningful objects. Yet he couldn’t find anything that spoke to his sense of style. So he began drawing animals in his free time, in the style of mid-century illustrator Charlie Harper.
40+ drawings later, when it was clear the idea had legs, Clark teamed up with his coworkers and launched a series of print and digital products under the A Modern Eden name: including a series of handmade, screenprinted posters printed on 100lb French paper.
I quickly fell in love with the bold, minimal feel of each print. And after doing a little research into the paper they are printed on, I knew that I wanted to find a way to incorporate the feel of the French Paper product line into the new website.
I ended up remixing French Paper-inspired pastels into a color palette that would help communicate A Modern Eden’s playful attitude and their appreciation of paper craft and artful print products.
Before digging too much further into the design process, I needed to define the voice of the website’s content. As a brand, A Modern Eden is relatively high-end — but not exclusive. It is playful, but with well-coiffed elegance.
So how playful could the copywriting be? A couple of brand vocabularly phrases helped establish the appropriate tone. A Modern Eden is “clever but not overly cheesy” and “fun but with an educational slant.”
With these phrases in mind, I was able to strategize an adventure-oriented narrative for the brand, and create a series of headlines, short introductory paragraphs, and product descriptions that together tell a cohesive yet entertaining story about what makes the company unique.
Pulling It All Together
The primary target audience for the website was wholesale buyers: and the art direction couldn’t get in the way of them quickly understanding what actual products they could order.
At the same time, it was still crucial to think creatively about how to introduce the A Modern Eden animal kingdom in a creative, unconventional way.
To satisfy both goals, I structured a single-page website around a series of color-blocked, illustrated environments. Each one introduced curious new faces, gave visitors an understanding of different key brand differentiators, and provided the relevant product information that wholesalers needed.
I’m exceptionally proud of the minimalist landscapes, which were remixed (and recolored) from some of the digital assets for A Modern Eden’s wall decals — and which tile seamlessly regardless of the aspect ratio of the browser window.
Designing with Emotion
With the aid of Ryan Clark’s artful illustrations (and Mark Simonson’s masterful Mostra Nuova typeface, available on Typekit) the website now had serious personality.
But there was still room to use art direction to convey additional emotion — and I decided that CSS animation was the perfect avenue to pursue it.
With only inline svg code and simple CSS keyframe animations, I made a series of animals and objects — including seaweed, grass, bubbles, clouds, and even cute penguins on icebergs — appear to shift with the flow of unseen environmental forces.
These could have been expensive animations to produce from a web performance standpoint. But I was often encouraged throughout my apprenticeship to quickly come up with multiple approaches to the same problem — and so I set out to discover how complex, physics-based animations might be “faked” with a few lines of clean code.
You can learn more about how I produced the bubble animation — which incorporates Sass @for loops and the Sass Random() function — by watching the video of a recent demo I gave at Sparkbox.
Illustration: Ryan Clark
Client: A Modern Eden
Fonts: Avenir, Knockout, Mostra Nuova
My Role: Visual Design, Web Development, and Copywriting