Storyforming

It was only last week that myself and Ellen were brainstorming ideas for a combined workshop. Our enthusiasm got the better of us, and we said “Let’s just do it!” Before we could think better of it, the room was booked, and the calendar invitations were sent.

Workshopping

The topic was “story.”

No wait, maybe it was …”narrative.”

That’s not quite right either.

“Content,” perhaps?

Basically, here’s the issue: at some point everyone at Clearleft needs to communicate something by telling a story. It might be a blog post. It might be a conference talk. It might be a proposal for a potential client. It might be a case study of our work. Whatever form it might take, it involves getting a message across …using words. Words are hard. We wanted to make them a little bit easier.

We did two workshops. Ellen’s was yesterday. Mine was today. They were both just about two hours in length.

Get out of my head!

Ellen’s workshop was all about getting thoughts out of your head and onto paper. But before we could even start to do that, we had to confront our first adversary: the inner critic.

You know the inner critic. It’s that voice inside you that says “You’ve got nothing new to say”, or “You’re rubbish at writing.” Ellen encouraged each of us to drag this inner critic out into the light—much like Paul Ford did with his AnxietyBox.

Each of us drew a cartoon of our inner critic, complete with speech bubbles of things our inner critic says to us.

Drawing our inner critic inner critics

In a bizarre coincidence, Chloe and I had exactly the same inner critic, complete with top hat and monocle.

With that foe vanquished, we proceeded with a mind map. The idea was to just dump everything out of our heads and onto paper, without worrying about what order to arrange things in.

I found it to be an immensely valuable exercise. Whenever I’ve tried to do this before, I’d open up a blank text file and start jotting stuff down. But because of the linear nature of a text file, there’s still going to be an order to what gets jotted down; without meaning to, I’ve imposed some kind of priority onto the still-unformed thoughts. Using a mind map allowed me get everything down first, and then form the connections later.

mind mapping

There were plenty of other exercises, but the other one that really struck me was a simple framework of five questions. Whatever it is that you’re trying to say, write down the answers to these questions about your audience:

  1. What are they sceptical about?
  2. What problems do they have?
  3. What’s different now that you’ve communicated your message?
  4. Paint a pretty picture of life for them now that you’ve done that.
  5. Finally, what do they need to do next?

They’re straightforward questions, but the answers can really help to make sure you’re covering everything you need to.

There were many more exercises, and by the end of the two hours, everyone had masses of raw material, albeit in an unstructured form. My workshop was supposed to help them take that content and give it some kind of shape.

The structure of stories

Ellen and I have been enjoying some great philosophical discussions about exactly what a story is, and how does it differ from a narrative structure, or a plot. I really love Ellen’s working definition: Narrative. In Space. Over Time.

This led me to think that there’s a lot that we can borrow from the world of storytelling—films, novels, fairy tales—not necessarily about the stories themselves, but the kind of narrative structures we could use to tell those stories. After all, the story itself is often the same one that’s been told time and time again—The Hero’s Journey, or some variation thereof.

So I was interested in separating the plot of a story from the narrative device used to tell the story.

To start with, I gave some examples of well-known stories with relatively straightforward plots:

  • Star Wars,
  • Little Red Riding Hood,
  • Your CV,
  • Jurassic Park, and
  • Ghostbusters.

I asked everyone to take a story (either from that list, or think of another one) and write the plot down on post-it notes, one plot point per post-it. Before long, the walls were covered with post-its detailing the plot lines of:

  • Robocop,
  • Toy Story,
  • Back To The Future,
  • Elf,
  • E.T.,
  • The Three Little Pigs, and
  • Pretty Woman.

Okay. That’s plot. Next we looked at narrative frameworks.

Narrative frameworks as Oblique Strategies.

Flashback

Begin at a crucial moment, then back up to explain how you ended up there.

e.g. Citizen Kane “Rosebud!”

Dialogue

Instead of describing the action directly, have characters tell it to one another.

e.g. The Dialogues of Plato …or The Breakfast Club (or one of my favourite sci-fi short stories).

In Media Res

Begin in the middle of the action. No exposition allowed, but you can drop hints.

e.g. Mad Max: Fury Road (or Star Wars, if it didn’t have the opening crawl).

Backstory

Begin with a looooong zooooom into the past before taking up the story today.

e.g. 2001: A Space Odyssey.

Distancing Effect

Just the facts with no embellishment.

e.g. A police report.

You get the idea.

In a random draw, everyone received a card with a narrative device on it. Now they had to retell the story they chose using that framing. That led to some great results:

  • Toy Story, retold as a conversation between Andy and his psychiatrist (dialogue),
  • E.T., retold as a missing person’s report on an alien planet (distancing effect),
  • Elf, retold with an introduction about the very first Christmas (backstory),
  • Robocop, retold with Murphy already a cyborg, remembering his past (flashback),
  • The Three Little Pigs, retold with the wolf already at the door and no explanation as to why there’s straw everywhere (in media res).

Once everyone had the hang of it, I asked them to revisit their mind maps and other materials from the previous day’s workshop. Next, they arranged the “chunks” of that story into a linear narrative …but without worrying about getting it right—it’s not going to stay linear for long. Then, everyone is once again given a narrative structure. Now try rearranging and restructuring your story to use that framework. If something valuable comes out of that, great! If not, well, it’s still a fun creative exercise.

And that was pretty much it. I had no idea what I was doing, but it didn’t matter. It wasn’t really about me. It was about helping others take their existing material and play with it.

That said, I’m glad I finally got this process out into the world in some kind of semi-formalised way. I’ve been preparing talks and articles using these narrative exercises for a while, but this workshop was just the motivation I needed to put some structure on the process.

I think I might try to create a proper deck of cards—along the lines of Brian Eno’s Oblique Strategies or Stephen Andersons’s Mental Notes—so that everyone has the option of injecting a random narrative structural idea into the mix whenever they’re stuck.

At the very least, it would be a distraction from listening to that pesky inner critic.

Have you published a response to this? :

Responses

www.buymeacoffee.com

At Clearleft today, I ran through many new (and some familiar) things with Jeremy:

  • We talked about Jeremy’s upcoming event - Patterns Day (check out the site, it’s nifty - also, buy a ticket!), to be held on June 30th. Jeremy kindly invited me along and I’m really excited!
  • I found out where Clearleft got their idea for the 100 day challenge - Aaron Parecki’s 100 days of music!
  • I learned that these amazing color fonts won’t be available for a while (sadly).
  • I discovered a nice example of excellent forward-thinking. The creators of the font-weight CSS property use 100-700 for weighting type, not 1-7. This is because they anticipated that more values could be utilised in the future. Now they can, with variable fonts.
  • Microformats rel values (a question about these sprung up when I coached at codebar earlier in the week).
  • HTML5 link types.
  • XFN - The HTML5 Friends Network. Jeremy has nice examples on his own site including rel=”friend” and rel=”met” in his ‘bedroll’ section.
  • Examining what rel=”canonical” does (it helps Google reference original publications).
  • Twitter card validators.
  • I completed CSS Grid Garden. It was really fun and I like the specs a lot.
  • Jeremy has written things about CSS Grid. We dove into discussions about Grid, and also Flexbox. I learned how Grid and Flexbox were created by the same people and share a lot of vocabulary. This means they can both be utilised in the same stylesheet to suit different purposes.
  • I downloaded Firefox, as it has some nice developer tools for visualising a grid on the page.
  • I learned a little about product management in a ‘brown bag’ talk at Clearleft. Very interesting learning about exercises to coordinate teams and define roles (including those of clients) within a project and help everyone communicate better.
  • Talked with Jeremy about my upcoming Material conference talk. We brainstormed lots of great ideas that I wrote down. My next step is mindmapping to find some golden connections between ideas.
  • Chatted with Jeremy and Luke about roles that involve both front end development and UX. An area that draws heavily on both roles is performance, particularly percieved performance.
  • Jeremy recommended some books on writing - including Steven Pinker’s ‘Sense of Style’, particularly the chapter on ‘The Curse of Knowledge’, and ‘Bird by Bird’ by Anne Lamott.
  • I learned of the Open Library where e-books are lent out free of charge.
  • Talked with Jeremy and Hannah about cookies, caching, and public speaking.
  • I was introduced to a number of very useful thought exercises I can have a go at once I have some content for my talk.
  • I discovered Google’s Page Speed Insights tool for evaluating websites.
  • Jeremy set me homework - ‘What is the Difference Between HTTP and HTTPS?’
  • Jeremy suggested talks that could help me with mine from Render Conference 2017 - Ana Balica’s talk on HTTP and Frances Ng’s rise from Aerospace Engineer to Front-End Engineer.
  • Jeremy introduced me to @supports in CSS, plus a neat way to load fonts using JavaScript that improves perceived performance by customising font loading behaviour.
  • Jeremy showed me the difference between not using the font-loading method vs. using it. There was a really large difference in perceived performance (font loading was better, despite the page loading slightly slower).
  • Jeremy showed me 4 design boards (each from a different designer) that helped him design his event site for Patterns Day.
  • I saw some ‘page painting’ in chrome developer tools showing after a discussion on ‘janky’ sites. Jeremy told me he had to remove an image from his event site after he found it to be create this unwanted phenomenon.
  • I was introduced to CSS shapes and the browsers that currently support them.

An intense but fantastic day - I’d like to thank Jeremy once again for his time and great advice :)

# Thursday, April 13th, 2017 at 12:00am

amberwilson.co.uk

At Clearleft today, I ran through many new (and some familiar) things with Jeremy:

  • We talked about Jeremy’s upcoming event - Patterns Day (check out the site, it’s nifty - also, buy a ticket!), to be held on June 30th. Jeremy kindly invited me along and I’m really excited!
  • I found out where Clearleft got their idea for the 100 day challenge - Aaron Parecki’s 100 days of music!
  • I learned that these amazing color fonts won’t be available for a while (sadly).
  • I discovered a nice example of excellent forward-thinking. The creators of the font-weight CSS property use 100-700 for weighting type, not 1-7. This is because they anticipated that more values could be utilised in the future. Now they can, with variable fonts.
  • Microformats rel values (a question about these sprung up when I coached at codebar earlier in the week).
  • HTML5 link types.
  • XFN - The HTML5 Friends Network. Jeremy has nice examples on his own site including rel=”friend” and rel=”met” in his ‘bedroll’ section.
  • Examining what rel=”canonical” does (it helps Google reference original publications).
  • Twitter card validators.
  • I completed CSS Grid Garden. It was really fun and I like the specs a lot.
  • Jeremy has written things about CSS Grid. We dove into discussions about Grid, and also Flexbox. I learned how Grid and Flexbox were created by the same people and share a lot of vocabulary. This means they can both be utilised in the same stylesheet to suit different purposes.
  • I downloaded Firefox, as it has some nice developer tools for visualising a grid on the page.
  • I learned a little about product management in a ‘brown bag’ talk at Clearleft. Very interesting learning about exercises to coordinate teams and define roles (including those of clients) within a project and help everyone communicate better.
  • Talked with Jeremy about my upcoming Material conference talk. We brainstormed lots of great ideas that I wrote down. My next step is mindmapping to find some golden connections between ideas.
  • Chatted with Jeremy and Luke about roles that involve both front end development and UX. An area that draws heavily on both roles is performance, particularly percieved performance.
  • Jeremy recommended some books on writing - including Steven Pinker’s ‘Sense of Style’, particularly the chapter on ‘The Curse of Knowledge’, and ‘Bird by Bird’ by Anne Lamott.
  • I learned of the Open Library where e-books are lent out free of charge.
  • Talked with Jeremy and Hannah about cookies, caching, and public speaking.
  • I was introduced to a number of very useful thought exercises I can have a go at once I have some content for my talk.
  • I discovered Google’s Page Speed Insights tool for evaluating websites.
  • Jeremy set me homework - ‘What is the Difference Between HTTP and HTTPS?’
  • Jeremy suggested talks that could help me with mine from Render Conference 2017 - Ana Balica’s talk on HTTP and Frances Ng’s rise from Aerospace Engineer to Front-End Engineer.
  • Jeremy introduced me to @supports in CSS, plus a neat way to load fonts using JavaScript that improves perceived performance by customising font loading behaviour.
  • Jeremy showed me the difference between not using the font-loading method vs. using it. There was a really large difference in perceived performance (font loading was better, despite the page loading slightly slower).
  • Jeremy showed me 4 design boards (each from a different designer) that helped him design his event site for Patterns Day.
  • I saw some ‘page painting’ in chrome developer tools showing after a discussion on ‘janky’ sites. Jeremy told me he had to remove an image from his event site after he found it to be create this unwanted phenomenon.
  • I was introduced to CSS shapes and the browsers that currently support them.

An intense but fantastic day - I’d like to thank Jeremy once again for his time and great advice :)

# Thursday, April 13th, 2017 at 12:00am

5 Likes

# Liked by Gunnar Bittersmann on Wednesday, October 28th, 2015 at 6:19pm

# Liked by Adrian Zumbrunnen on Wednesday, June 28th, 2017 at 10:24am

# Liked by John F Croston III on Tuesday, July 25th, 2017 at 12:45am

# Liked by Sandra @ GDC 2018 on Wednesday, March 21st, 2018 at 5:55pm

# Liked by Ellen de Vries on Wednesday, March 21st, 2018 at 9:09pm

Related posts

Movie Knight

Why so serious?

Previously on this day

16 years ago I wrote Audio ga-ga

Safari is being a bit too clever with the audio element from HTML5.

18 years ago I wrote Taking back the Web

A grandiose title for a cosy unconference.

23 years ago I wrote Ireland

Jessica and I went to Ireland earlier this year. We spent most of the time in my hometown of Cobh.