Shoot for the Moon: A Creative Journey in Storytelling Through Design

Elwyn takes a deep dive into the art of storytelling in web design and why it matters.

Storytelling is a powerful graphic communication tool equally pivotal in web design.

The journey from first contact to forging lasting relationships with your audience hinges on how effectively you can narrate your story. But why does storytelling in web design often feel like trying to fit a square peg in a round hole?

It boils down to communicating visually. Imagine placing a product amidst a sea of hundreds. The crux is in highlighting its salient features, addressing any concerns, and encapsulating its essence in a way that resonates with the audience’s emotions. Take, for example, Don Draper’s iconic Kodak Carousel pitch in Mad Men - where a simple feature-based product was transformed into an emotional time capsule for family memories.

The likes of Steve Jobs seamlessly blended storytelling with product launches. The Apple products weren’t just gadgets but an extension of our daily lives. They were designed to represent simplicity, inspired by the Bauhaus theme. The common thread in all these storytelling examples is the shift of perspective - it's not about you; it's about the audience.

In most cases, the story must resonate through the eyes of the viewer.

Embracing the Storytelling Challenge

With the advent of AI and technological advancements, creating engaging advertisements and stories has become more accessible. So, I decided to embark on a mini adventure to write, record and edit a Television Advert (tv commercial) in under six hours.

This endeavour is paving the way for an upcoming online course (Storytelling in Design), and in-person bootcamp with the same name. Both will be aimed at helping aspiring creators in weaving storytelling videos or content, be it for websites, YouTube or even event posters.

When working through this process, I often remind myself that this is not my story; it is yours!

The 6-Hour Creative Marathon

So, with a challenge in mind and the determination to accomplish it, I embarked on a creative marathon: Six hours to write an original story, record a voice-over, and compile it into a 1-3 minute video. The tools of my trade were Descript for the voice-over, audiogram, assembly and editing, then Midjourney for the visuals, with a 1950s retrofuturism theme running throughout. A crucial aspect was incorporating a twist that connected the narrative to the product - in this case, our β€œMoonshot: Become a Squarespace Web Designer” course.

Here’s the video to promote Moonshot: Become a Squarespace Web Designer (don’t forget to subscribe!)

A love letter to the Pioneers, the Dreamers, the Creatives

In an era when JFK’s We Choose to Go to the Moon speech sparked imaginations and set a nation's sights on the stars, science fiction and 1950s retrofuturism painted dreams in technicolour.

When conceptualizing the video script, the overarching theme was to pay homage to pioneers, dreamers, and creatives, reminiscent of a time when humanity's gaze was fixed on the stars. The inspiration was drawn from JFK's iconic "We choose to go to the moon" speech, which was not just about the literal moonshot but an ode to human ingenuity and determination. Similarly, the video script evokes the relentless spirit of those who dare to dream big.

The 1950s retrofuturism comes into play here as it reflects an era filled with infectious positivity and a sense of boundless possibility, which shaped much of the science fiction of that time. The script represents this sentiment through the character's imaginative and wondrous outlook as they embark on the Moonshot Challenge. The use of 1950s retrofuturism links this creative wonder with the unyielding spirit, enthusiasm, and transformative journey of those venturing into the world of web design through the course.

Ultimately, the video script aims to resonate with today's creatives and pioneers, encouraging them to see themselves as part of an enduring legacy of dreamers who, with vision and perseverance, can sculpt the contours of tomorrow.

Off Topic: I regularly use JFK’s Moon Speech as an example of the perfect company mission statement, or Big Hairy Audacious Goal (BHAG), as Jim Collins would put it. This particular mission was aspirational, challenging and had a clearly defined target date.


The Product

Stealing all the best bits from 20 years in the web design industry, PixelHaze Academy's "Become a Squarespace Web Designer" is a dynamic, challenging and rewarding 6-week course designed to fast-track your career in web design. The program covers everything from fundamentals to advanced Squarespace techniques, including a live project for hands-on experience. Students also gain lifetime VIP access to PixelHaze Academy Campus for continuous learning, plus three custom Squarespace templates by PixelHaze included within the fee.

This course is an investment in your future, equipping you with the essential tools and knowledge to excel as a Squarespace web designer in the digital world.


Crafting the Story

The first step was to create a compelling narrative. It had to be enchanting yet grounded, ambitious yet relatable. I aimed for a story that embodied the spirit of space exploration and adventure, throwing off the gloomy shroud of the 9 to 5 humdrum and striving for a new career and life. At the same time, this scenario can also reflect the experiences of graphic designers often searching for new creative avenues.

The script begins as an earnest letter from what appears to be an astronaut in space, penning down his thoughts to a loved one named Eleanor. The tone is pensive and melancholic, reflecting a lonely figure yearning for a connection. As the script unfolds, the language transforms. From a solemn opening, it graduates into a compelling portrayal of ambition and dreams. The astronaut seems to be on a β€œMoonshot Challenge”, a metaphor that hints at a journey of self-discovery and aspirations.

The narrative bears the influence of poetic greats. The repetition of the name β€˜Eleanor’ gives a nod to Edgar Allan Poe’s β€œLenore”. The themes evoke the resilient spirit of β€œInvictus” (My head is bloody, but unbowed).

Off Topic: Coincidentally, I read some of my favourite poems (displayed in the form of canvases on my cabin wall) as a warm-up before recording a course or YouTube video - it is a little silly, especially if I am overheard, but it works wonders for the volume and confidence of the voice-over.

Tools of the trade: Voice-over, Assembly & Editing

Recording a voice-over is an art in itself. The tonality, pause, and emphasis are vital in how the story is perceived. I used Descript to record my narration with a one-take approach, doubling up on lines and discarding the versions I didn’t like. With more time, I would have run through this process 4-5 times to perfect the voiceover.

I aimed to portray the passion of the protagonist through my voice in an attempt to make the viewers feel like they were embarking on a journey through space and time with him. I am sure renowned Welsh actor Michael Sheen played some part of the inspiration for this narration style. Pop over to YouTube and watch his reading β€œDo not go gentle into that good night” to see what I mean. I have a long way to go, clearly. But in my defence, acting is not my profession, and he had more rehearsal time!

Now, let’s talk about how this script took shape. I utilised Chat GPT, which helped develop the flow; however, most of the ideas were my own. AI tools have become so powerful that it is easy to let them do the heavy lifting; when this happens, I fear that our work loses a little of its soul, its individualism.

On the flip side, using a natural language processing model like ChatGPT allows us to quickly move past any dreaded creative blocks in the same way that Midjourney or Dall-e can help shape visual ideas. This brings us seamlessly to the visuals for this video, created in a series of different aspect ratios (1:1: 16:9 21:9), meaning that there was plenty of canvas to add subtle movement to the videos. My trusty Shure MV7 microphone played a vital role in capturing the voice-over, combining with Descript’s ai-driven studio sound feature to add clarity and depth.

Visuals: A Journey through Retrofuturism

I wanted the visuals to complement the otherworldly feel of the narrative. I turned to Midjourney’s text to image magic and immersed myself in the realm of 1950s retrofuturism. This era was marked by its optimistic and sometimes whimsical visions of the future, often characterised by advanced technology, space exploration, and a belief in a better world. This imagery perfectly echoed the adventurous spirit I wanted to capture. With a bit of persuasion, Midjourney nailed the aesthetic I was after.

The Twist: Linking Narrative to Transformation

But a story without connection is like a spaceship without fuel. The essential twist was linking the narrative to the Moonshot course. This 6-week intensive program is designed for graphic designers and creatives seeking a career in web design.

I wanted to communicate that this course is akin to a space odyssey. It’s challenging, no doubt. But it’s also transformative. The Moonshot course is for the pioneers, the visionaries willing to invest time and energy to explore new horizons. Just like the adventurers in the story, the students of the Moonshot course have a shot at something monumental and potentially life-changing.

And here comes the twist: Throughout the video, we are led to believe that the protagonist is on a lunar base, lost in the infinite wonders of the cosmos. However, as the story unfolds, we discover he is actually in his home office, where his creative mind has carried him to a different world. This conscious choice reflects how our imagination can know no bounds when we are passionate about something. Then, as the video reaches its climax, Eleanor enters the scene. Eleanor is not a lover, but his daughter (portrayed by my own daughter, Amelia, who is making her voice-acting debut for PixelHaze Academy!). After the knock on the door (a metaphor for our protagonist hitting the ground) she shouts her innocent query - β€œDaddy, are you still in there?”, she becomes the anchor that brings the protagonist back to reality, back to land.


Conclusion: An Ode to The Pioneers

This final part of the video encapsulates the essence of the Moonshot course; it's about diving into your imagination and creativity, and even though you might get carried away, there's always a sense of purpose and grounding. It's a transformative journey, not just for your career but for the soul. As dreamers, creatives, and pioneers, the course beckons you to unleash your imagination's untethered energy while staying rooted in the practicalities of mastering web design. This interplay of fantasy and reality is what I hope makes the Moonshot course a launchpad for aspirants to create a world of their own design.

This 6-hour creative endeavour was a whirlwind. It was an attempt to harness storytelling, visuals, and a twist to create a symbiotic relationship between narrative and product. Through the lens of retrofuturism and the ethos of space exploration, I sought to parallel the journey of the students in the Moonshot course - the modern-day pioneers, ready to chart unknown territories in the vast web design universe.

Look at me getting carried away; no prizes for guessing who the protagonist was based on!

Previous
Previous

Introducing PixelHaze Pilots: Empowering UK Teachers and Schools

Next
Next

Apple's Vision Pro: A Spatial Computing Game-Changer for Web Design?