Webflow at Work: Primer Stories

Find out how Tim Lillis and Joe Alterio use their visual communication superpowers — and Webflow — to beautifully explain complex ideas.

John Moore Williams
August 26, 2016
Inspiration

If you’re looking for stories told in ways you’ve never seen before, you might want to start at Primer Stories.

As the Wall Street Journal’s Christopher Mims has written: Primer Stories is web-native storytelling. Its guiding lights, Joe Alterio and Tim Lillis, make the most of everything the web has to offer, from the mesmerizing power of the animated GIF to the ability to make you start a story where they want — including the middle, as in their story “You Are Here.”

But there’s something reminiscent of early- and even pre-internet storytelling about Primer’s site. Its individually hand-crafted stories combine textual content and graphics in meaningful ways that remind me of both children’s books and longform journalism.

Something about this synthesis of the purely digital and the immemorially engaging makes me think: These guys have found the way out of the trap of homogenous design.

They build Primer Stories for the content, not with it. They map out the story they want to tell, and then they visualize it, in both handcrafted GIFs and custom-made layouts. Everything you see in Primer story is designed to immerse you a little deeper in the narrative. And thus, no two pages look alike.

So when I discovered that Tim and Joe build Primer Stories with Webflow, I knew I just had to speak with them. (And you should probably sign up for their newsletter, so you never miss a new story.)

Can you each tell me a bit about your background?

Joe I came at interactivity through the motion side – I went to USC for animation, worked in the Flash animation industry for a while, and when that fell apart, I continued on with illustration, storyboarding, and comics, though my foot was always in the interactive space, making a few projects that made waves. In 2003, I flew down to Fox’s new mobile content company to pitch them the idea of regular digital deliveries of mobile comics. They laughed me out of the building. Oh well.

Tim As a kid I mailed drawings to Hasbro for new Transformers. They were not produced. My official training is in industrial design, commonly known as product design. Generally it’s the study of how people use things, and encompasses objects, places, experiences, and really anything else that people interact with. I was always very drawn (pun incidental, but retained) to the visual side of things, incorporating graphics as much as possible to convey my concepts. After college I spent a few years working at Kaiju Big Battel (sic), a monster wrestling league, where I began to work in video production and really started to grasp some of the concepts behind a good visual narrative. For the last decade, since moving to San Francisco, I have worked as a freelancer, concentrating on design and illustration that tells a story, or elucidates a point or concept.

How did you each get into web design?

Tim For me, it was a natural progression of my interest in graphic design + illustration, and my background in product design. I had been creating assets for the web for someone else to put together, so why not dive fully in? I’ll be honest, I love a good press check (there are probably two or three readers who know what I’m talking about), but the freedom afforded by the digital design process is certainly freeing.

Joe My illustration and storyboarding stuff got me noticed by the digital community, and as I started working with them, I realized my narrative and pacing background from animation and comics was a huge boon when it came to concepting web experiences. I just started treating every web project like an animated short, and things started to gel in a nice way.

What was the impetus for Primer Stories?

i.e., What made you want to create a story-driven website in an age when many people think everything’s going visual? As you say on your site, “the currency of the web these days is instant visual stimulation and shareability.”

Joe I think in the past 2 or so years, the template-ization of the web has really distressed both of us. For guys of our age, the web back in the Weird Old Days had the flavor of a punk zine — each page was different, each web designer messily hacking away at something that approached their inner vision. With both the rise of platforms and the demands of devices that have such prescriptive specs, the idea that the web could be a place to explore seems to have faded a little bit. There’s obviously still amazing stuff out there, we just wanted to be on the side of Good and Light, when the Design Gods come to wreak vengeance upon us all for our sins.

Weirdly, the space for storytelling in other media (premium TV, podcasts) has exploded and gone in wild and interesting places that would have been unthinkable 20 years ago. Why is web storytelling moving in the opposite direction? Why are most newspapers laid out like papers-on-the-web? I dunno. NYT is the only site that consistently pushes the medium forward. There is such a huge amount of talent over there.

We just wanted to be on the side of Good and Light, when the Design Gods come to wreak vengeance upon us all for our sins.

Tim I think Joe nailed it here, but I’d like to add that we want to make sure that the web that we want to see survives. To further reference the podcast explosion, consider all the different topics covered by some of the best podcasts out there. There are huge swaths of the public who want engaging stories, well told, and crafted with care. They aren’t satisfied with listicles on Buzzfeed, and at the other end of the spectrum, they might have interest in the topic of a whitepaper or scientific journal article, but lack the access or time to really get into it. Generally speaking, they are curious, intelligent people with real-life constraints on their time and attention. We understand where they’re coming from, because they are us. (flatters self)

Christopher Mims of the Wall Street Journal said of Primer Stories: “Oh wow. Now this is web-native storytelling.” What do you two think it means to tell “web-native” stories?

Joe A useful thought experiment I always come back to is to compare where we are in web exploration now with where film was, approximately 25 years into its common existence. That brings you roughly to King Kong, in 1933. There’s so much we haven’t done yet with web storytelling, I almost find it more useful to list what we can’t do.

Telling web-native stories means working with a medium with a potentially infinite canvas, up to 4 dimensions, and no limits on word count, hue or tone, ink availability, quality of paint brushes, light meter readings, binding glue, or any of the other things that have limited artistic ventures in the past.

More specifically for us, the use of heavy visual language combined with the written elements allows us to really tell two stories, one with the text, one with the images — sometimes they support each other, sometimes they don’t. It’s a similar tension in podcasts between the sound/music and the spoken element.

Tim Thanks, Christopher Mims! I think Primer Stories is a product of the times we live it. Something like inserting a quick animation into a linear story wasn’t feasible when all stories were in print. While a fold-out flipbook would be an insanely cool component of a book, it would basically never happen. I feel like we get to reimagine the idea of collage as much more than a creative integration of different images, and more as a juxtaposition of entirely different narrative techniques. Only the web allows for so seamless an integration coupled with such a broad reach at a reasonable cost, created by people who might not even be close to one another geographically. Amazing times for creative collaborators.

The use of heavy visual language combined with the written elements allows us to really tell two stories, one with the text, one with the images — sometimes they support each other, sometimes they don’t

What are the characteristics / components of a “web-native” narrative?

Joe The most useful additional factor for us is the base idea of interactivity. We’re big believers in asking the audience to heavily engage, and that deeper engagement means a meaningful experience. A story controlled by, paced by, and even sometimes altered by an audience member has the potential to be way more memorable.

Tim I got into this a bit in the previous question, and Joe has honed in on it here pretty well. I’ll add that I think the eclecticism we are known for is something that has worked as a calling card for us, but in older times may have been a liability. We don’t have to worry as much about targeting a specific demographic in order to produce the work that we do.

Can you walk me through the Primer Stories process, from pitch to publish?

Joe It usually starts with a call or chat with an author we’ve decided to work with. We’re lucky to know great authors and have been approached by great authors, and since we are a rather bespoke venture, we can take our time and not rush to publish a half-baked idea.

After a first draft is submitted, Tim and I will take a look and try and see if it already sort of fits our model, or if some massaging is needed. Some authors get it right away, others need some guidance. It really is closer to a radio script than a reverse-pyramid traditional journalistic piece – we need that moment of ‘Ah ha!’ or surprise to really bring it home.

After we get text locked, Tim and I will bang ideas back forth about palette, structure, clever interactive elements, or even just inspiration. There’s been times an entire Primer has been influenced by a single illustration found in a magazine, or a vintage library card.

We make the elements in Photoshop or Illustrator, and the GIFs in After Effects, and then we start building putting it all together in Webflow.

Tim We have a rough format, but not a rigid formula. It’s super important to us that each story is presented in a way that best suits that narrative. We create a unique environment for each story to live in that’s informed by the mood, content, and pacing of the piece. So we start to consider that as soon as we get the text of the story — is it a breathless account of a dramatic event or a more meditative consideration of a topic? Neither is better, but each requires their own approach to fully respect the writing. We don’t want the art to detract or distract from the story but rather to enhance it, and the reader’s understanding of it.

There’s a lot that can be conveyed alongside the story through the world that we build for it. If the story is a plant, we are the garden — we support it and provide things that the plant alone could not.

Ok, so you guys live pretty far apart. How do you overcome the difficulties of remote collaboration?

Joe My wife calls Tim, “my other girlfriend.” We text probably 50–75 messages each a day. On top of daily calls and being on Skype together all the time. Suffice to say, I wish he would give me my space already.

Tim I cut my hair and Joe didn’t even notice.

Communications technology is so good these days that sharing files is a breeze and discussing things remotely is super easy. It helps that we have known each other for about 100 years, so there is an innate trust in each other’s judgement and skill.

Tim has mentioned an interest in “indirect collaboration.” Can you talk a bit about that idea, especially in relation to the more direct collaboration you guys practice in building Primer?

Tim It’s something that Joe and I have been batting around as a concept for a few years. It’s about creating or doing something with someone else, but not together. You see it in a lot of crowdsourced activities — Aaron Koblin’s Sheep Facing Left, or Riley Crane’s solution to the DARPA Red Balloon Challenge. With Primer it is a bit more direct, so I’m not  sure I’d put it in the same category, since everyone involved has signed up with a specific idea of what the outcome will be, and with a clear definition of what their own role will be. We do encourage our writers to share thoughts with us on visuals or other components to include, but our collaboration with the writers is probably more like that of a (non-auteur) film director and an (on-set) screenwriter.

If the story is a plant, we are the garden — we support it and provide things that the plant alone could not.

What’s the perfect Primer Stories pitch look like?

Joe When we first conceived of Primer, we told ourselves our subjects would be things that you think you knew about, but when pressed, you actually come up embarrassingly short, hence, the ‘Primer’ moniker. I think we still try to hew to that idea — we love esoterica and strange tales, but they need to be relatable enough that someone can jump right in without needing a lengthy explainer beforehand. It also helps if the story has an element of surprise to it — a remarkable tale, an unexpected history, or just a very strange creature in the sea.

We’re science-ish, but we also do topics on words, history, and art, so it really is more about the tale to be told rather than the specific genre of subject matter.

It also helps if the author likes what we do and has read some of our previous work, since that takes some of the adjustment time out of it.

Tim Historically, a pitch has consisted of us contacting people whose work we admire, and asking if they’d like to write a Primer. This means that we are fans of their approach to a topic — we know that they see more than one dimension of the subject at hand, whether it’s a cultural tie-in, a hidden meaning, or something else. In terms of people pitching us, sometimes folks send a finished piece, but since writing is a lot of work, we don’t ever suggest that unless we’ve gotten a chance to read some of their other work and chatted with them about our particular format.

On your Primer&Co. page, you mention that you’ve spoken “about the imperative of inclusiveness on the web, especially when it comes to big ideas and bigger goals.” At Webflow, we’re also very much into the idea of making the web more inclusive, so I’d love to hear more about that.

First, how do you see Primer making the web more inclusive?

Joe Well, neither I nor Tim are coders. And we’re kind of proud of that. Early on, we got some crap from trolls on a dev forum about how we shouldn’t dip our toes in these sacred waters. But we really started this project from an art-and-design first point of view, and we’re really proud of that. In so many gigs I have had in the tech world, design is dismissively thrown on at the last second, or thought of as mysterious voodoo that has neither value nor metrics associated with it. And with this project, we’re trying to prove we can make really engaging content that takes a reverse stance.

Tim We are trying to make the best possible use of the tools that have emerged on the web in the past few years with the goal of democratizing creativity.

Second, and on a larger level, how do you see the web becoming more inclusive, and what do you think a more inclusive web looks like?

Joe Frankly — and no, I’m not getting paid to say this — but I hope more people use tools like Webflow to make their visions known on the web, regardless of CTRs, or SEO rankings.  And as the web gets more inclusive, it may get messier, it will also get more representative of the entire human experience, which, in our eyes, is a good thing.

Who makes the amazing GIFs? Can you share some tips on how to create GIFs like that?

Joe We both do! GIF-making tools are still surprisingly arcane. We shifted to using After Effects last season, after using the god-awful UI in Photoshop to make them the first two seasons. It’s easier, but the process is still a little pain-in-the-necky.

We like GIFs because, much in contrast to their notional category of a "moving image," they actually slow down time – they remind me of those setups in kid’s science museums, in which you can use a strobe light to examine falling water. In their endless looping, they encourage examination, and reflection. And if you can loop them perfectly, it becomes endless, which is nice.

Tim When creating GIFs, subtlety goes a long way. I’m still trying to take that to heart.

In their announcement about moving over to Medium, Electric Literature said:

We believe this new publishing platform will help Electric Literature remain a vibrant and independent organization, with a publication that matches our vision of where literature is headed.

What do you guys think about Medium and its vision of “where literature is headed”?

Joe I am never gonna knock another publisher, and I don’t know the financials or strategy of other publications. However, we have the luxury of both being tiny enough we don’t have to generate a lot of revenue,  and also that we don’t post much content that often. We’re more like an art gallery than a magazine stand. If I had to publish every day, a CMS-partner like Medium might make a lot of sense.

But yeah, we just view that as an opening for us. As more publishers are put into a set of boxes, we’re able to differentiate ourselves in the marketplace even more.

With each of your stories having such a unique layout, do you ever find it hard to bring it all together in the overall design?

Joe I think we’re more successful in later Primers than earlier ones. The early ones had a kind of ziney, punky feeling that was cool but a little insane.

Tim It’s always a challenge to present a cohesive body of work, but I’m super ok with each Primer feeling like its own thing. Another film comparison — I certainly enjoy and appreciate when filmmakers bring the same level of craft and care to each film they make, but if the films looked too similar, they’d be boring and formulaic.

Why do you guys use Webflow?

Tim We are not developers, but we have grand visions for the web, and having Webflow in our toolbox has been a real plus. We can concentrate on the narratives and creating a highly-art directed environment for the stories, knowing that we’ll be able to build the things we envision by ourselves.

Joe I’ve been in the in the UI side of the interwebs for about 10 years, and one of the biggest frustrations was watching my designs have the fine edges and nice details sanded off because the front end devs either didn’t understand or didn’t notice the small things that turn a piece of good design into a piece of great design. I’ve been beating myself up to work on my front-end skills for years, but the reality is that there is only so much time in the day. As you get older, you start realizing that you should spend time on the things you’re good at, and hire others to do the things they’re good at. With Webflow, I can still be in complete control of the design, but my powers are enhanced times 10. It’s an exciting time to be an interactive designer. I’d much rather be a designer that is given a tool like this, than being a dev that suddenly has to learn how to design.

As you get older, you start realizing that you should spend time on the things you’re good at, and hire others to do the things they’re good at.

What are some specific benefits of using Webflow?

Tim There’s always a great satisfaction to using a WYSIWYG tool. It helps with just getting a draft up to look at, and iterating and improving from there, you don’t have to wait to work in regimented phases. I think that’s especially handy for a small team, being able to start with broad strokes, and then working more granularly as the concept evolves and coalesces.  We can just get going right away. Additionally, new features are rolled out pretty often, so that’s nice.

Joe Quick changes and updates published on the fly is HUGE. API integrations make it a breeze to roll out new experiments with very little process. It’s also just designed beautifully. Using the UI of Webflow is a really enjoyable process.

What other tools are part of your design process?

Tim We use a lot of After Effects, Illustrator, and Photoshop. We’ve been using Sketch a bit more, and we are messing around with Hype and a few other tools. And of course pen and paper. We storyboard all the Primers on paper ahead of time. Since it’s a collaborative endeavor, with both of us creating art, the storyboarding process is vital to maintaining good pacing, avoiding unnecessary repetition, and crafting engaging narratives.

Joe We watch a lot of movies and TV shows, and read a lot of books and comics. Honestly, that’s a huge part of our process–just trying to consume as much as we can and trying to process and manifest it in a way that makes sense to us and the narrative, so we can come up with stuff that is totally unique and pleasure to engage with.

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.