CrafTED Storytelling

What if we could craft a TED talk that tells our professional story to prospective employers or audiences? What would we say? How would we say it? How can we take that story further and make it scale to online audiences everywhere? This 60-minute workshop breaks down the template, tools and text prompts that can help us reclaim our narrative.

Pre-Requisites

• Have a Google account. We'll use Google Spreadsheets.
• Have a GitHub account. We'll use a GitHub repo so save our work.
• Have a Story to tell. We'll use Timeline.js and StoryMap.js to tell it.
• Have a Pen and Paper. We'll learn to sketch some elements.

Learning Objectives

Everyone has a story to tell. In this workshop we want to explore this from multiple perspectives:

• Why do we want to tell our story?
• What is the story we want to tell?
• How can we tell our story to different audiences?
• How can we tell our story in different formats?
• How can we use visual storytelling to draw audience attention?
• How can we use generative AI to build our creative skills?

Questions To Ask Yourself

Try to keep it simple to start:

1. Think of 3 moments in time that were meaningful to this story.
2. Think of 3 locations that were meaningful to this story.
3. Think of 3 growth moments that were meaningful to this story.
4. Think of the next destination you want to reach with this story.

Here are some questions to help you think about this:

• What was the date? Was that date important?
• What was the location? Was that location important?
• How did you feel? (then and now)
• What did you learn? (then and now)
• What did you do (to celebrate or to move forward)?
• How does that contribute to your hero's journey?

Think not just about what to include - but what to leave out. Declutter timelines and story maps to keep the desired journey in focus. We can then use the key dates, locations, insights and emotions - to build a narrative that resonates with our audience.

Exercise 1: What is your story?

1. What is the journey you want to share?
2. What are the key locations in your journey?
3. What are the key timestamps in your journey?
4. What are the key growth moments in your journey?
5. Why do you want to share your story?
6. What do you want your audience to take away from your story?

Exercise 2: Collect Story Elements

1. Collect 10-15 photos that tell your story
2. Write down the key locations for each photo
3. Write down the key timestamps for each photo
4. Write down the key growth moments for each photo
5. Write down a "title" for that milestone. Make it memorable and share context.
6. Write down yoyr "story" for that milestone. Make it personal and share insights.

Exercise 3: Build a Timeline

Is the story best told as a chronological narrative?

Use Timeline.js to build a timeline of your story.

1. Create a new Timeline project
2. Make a copy of their Spreasheet template to your Google Drive
3. Drop the dates, titles and links to your photos in the spreadsheet
4. Change only data in rows. Don't change or delete columns
5. Don't leave any rows blank. Delete any rows you don't need
6. Publish the spreadsheet to the web to get a URL
7. Paste the URL into the Timeline.js project
8. Publish your Timeline and share the link in the chat
9. Copy the embed code and paste it into your GitHub docs

Note:

• You can update the spreadsheet any time and the timeline will update automatically.
• You can add any kind of link to the timeline including videos, audio, images, etc.

My Example:

• StoryTL: My first year in Developer Advocacy

Let's Discuss:

1. What worked with that approach?
2. What didn't work with that approach?
3. What would you change to make it better?

Exercise 4: Build a Story Map

Is the story best told as a spatial narrative?

Use Timeline.js to build a timeline of your story:

1. Create a new StoryMap project
2. Pre-work: Collect 10-15 photos that tell your story
3. Walk through the StoryMap tutorial
4. Add your photos and text to the StoryMap, with location annotations
5. Publish your StoryMap and share the link in the chat
6. Download the StoryMap as a ZIP file, extract as static website

Let's Discuss:

1. What worked with that approach?
2. What didn't work with that approach?
3. What would you change to make it better?

My Example:

• StoryMap: My first year in Developer Advocacy

Exercise 5: Build a Static Site

Use GitHub Pages with basic Markdown and Mkdocs

• Install pip install mkdocs-material = Create new site under "docs/" mkdocs new .

Exercise 6: Let's Visualize IT!

So far we've worked with photos you either took yourself, or found online. But what if you want to be more creative and have visuals that tell your story in new and interesting ways? Let's talk about 2 options:

• Sketchnoting = hand-drawn illustrations that you learn create
• Generative AI Art = computer-generated illustrations from your prompts

Wrap Up & Next Steps

1. What did you like about this workshop?
2. How can we make it better?
3. Would you like to keep going with this project?

Resources

1. Astro View Transitions Photo Gallery - Maxi Ferreira (2023)
2. Astri Bkig Template - Maxi Ferreira (2023)
3. Timeline.js - Documentation
4. Timeline - Examples
5. StoryMap.js - Documentation
6. StoryMap - Examples

Build a Blog

Grid Of Photos

Timeline.JS