Adobe Creative Cloud

May 22, 2015 /

How To Create Compelling Narratives Through Web Design

You start by typing your worries into a large star. Soft music plays in the background as the user is guided through a short, gentle meditation. As the story unfolds, the star becomes smaller and smaller, as does the problem within it. Eventually the problem and the star completely disappear into the galaxy, reminding the viewer how small one problem can be in comparison to the vastness of the universe.

Created by San Francisco-based web developer and designer Marc Balaban, Pixel Thoughts recently soared to the front page of Reddit and quickly amassed almost one million unique visitors.

The mindfulness project took Balaban less than 36 hours to create. It’s an example of how powerful simple web design can be in telling stories and connecting with an audience.

“Marshall McLuhan said the medium is the message, and right now the web is the ultimate medium,” Balaban said. “The reason why I love web development is it gives you instant access to tell stories and to create feelings and emotions out of people.”

“The web combines a really unique way to tell a story and to have a captivate audience,” he continues. “You can tell some really engaging stories in a very short period of time because so many people have access to it.”

Six Ways To Make Your Narratives More Effective

1. Know What Your Message Is

It can be hard to understand at first what your message is, Balaban said. “I wanted to create something for myself to help remind me that as stressful as a thought may be at any given moment, the universe and the world is so much grander.”

He was inspired by another Reddit user who posted in the meditation subreddit about how small he feels when he looks up and realizes the magnitude of the size of the moon. Balaban realized the potential of this message and wanted to capture and share it with an audience.

2. Keep It Simple

“Keep it minimalistic, keep your point very succinct and make sure you don’t clutter the page with useless information or things that are not necessary. Only include elements that are necessary for your narrative or your tale,” Balaban said.

3. Combine Design and Text Elements

“Initially for Pixel Thoughts, I was just going to [have the stars fade] away without the text, but when I tried it I felt it wasn’t engaging. It worked a lot better when people were guided with my message or the point I was trying to drive across, which is that this thought is small compared to the entire length of the universe. People instantly said it helped them understand what my point is and it helped the story.”

4. Do It Quick

“This is something I built in a very short period. I made the project a little bit of a hackathon where you build a project in two days. It wasn’t perfect, but it was good enough, and so I posted it [on reddit] and sure enough it skyrocketed it to number two.”

5. Keep It Short

“You don’t need a long time to really engage people and to really touch them. A whole bunch of people [have emailed me] talking about how much they wept when they saw the application. One girl tweeted me and said, ‘For a moment, I forgot I had MS.'”

Like a short story, it is possible connect with people’s emotions within constraints.

6. Don’t Worry If You’re Not The Best Designer

“I wouldn’t consider myself the best designer,” Balaban says. “I think there are a lot of elements you can look at and borrow, and understand how to combine elements to tell a really interesting story in a very short period of time.

“I think it’s very easy to do, a lot of people just need to understand exactly what they’re trying to present then go ahead and do it.”

If you want to play with designs and get a feel for visual storytelling, try using Adobe’s free Slate app, which turns text-heavy content into beautiful visual stories.

slate

The Future of Storytelling Through Web Design

“As we progress further with web technologies, we’ll see a lot more interactive storytelling on the web,” Balaban said.

“Right now storytelling has always been a one-way flow where the viewer is taking in the author’s point of view and there’s no two-way communication, but I think we’re at a point where the user can start typing in things and helping unfold the narrative as it comes.”

Join the discussion

  • By Jack - 8:32 PM on May 23, 2015  

    This was very interesting and I look forward to reading more. Thank you.

  • By Steve Mark - 6:51 AM on August 19, 2015  

    Thanks for post this unique idea for look forward on narrative.