SocialTimes Allfacebook AllTwitter MediaJobsDaily more TVNewser TVSpy GalleyCat AppNewser UnBeige AgencySpy PRNewser FishbowlNY FishbowlLA FishbowlDC semanticweb.com

audio

Kinetic typography as a storytelling technique

by Lauren M. Rabaino

You’ve seen the technique before. On TV commercials, on viral music videos, as user-created fan art — words swooping into the screen with flashy graphics while a narrator speaks over it. The technique is called kinetic typography (fancy way of saying “moving text”) and it’s an engaging way of relaying words and stats to your audience.

Put simply, kinetic typography is the practice of telling a text-based story through animated words, supplemented by graphics, charts, photos and/or video.

How journalists can apply the technique to storytelling

There’s huge value in being able to tell a story that people will read all the way through– from start to finish– and then share with all their friends and family. Kinetic type lends itself to exactly that kind of attentiveness and shareability.

I’m not alone in watching those videos all the way through, every time. We’re of a visual era. We like seeing content in a way that engages us, a way that attracts our full attention. These videos are addicting — but not just because they’re fun. You walk away from them with a new wealth of knowledge that is easily digestible and thus easily retainable.

From a journalistic standpoint, kinetic type has the most potential for effectiveness when used for stories that have massive amounts of data and statistics.

There are a few examples of news outlets already using kinetic type as a form of storytelling. GOOD Magainze (disclosue: I’m a huge GOOD fangirl), does it best in videos that integrate graphics, typography and other animation with narration and text:

News21, a student reporting project led by 12 of America’s leading research universities, does an incredible video series on “A Changing America,” and last year’s intro video made great use of kinetic type (focusing more on the graphic aspect that the typography):

The Economist and Shift Happens partner every year to do a “Did You Know?” video which includes statistics focusing on the changing media landscape. This example shows the power of pure text and graphics without any narration:

Kinetic type has been proven as an engaging format for storytelling in other arenas already:

  • Mainstream advertisers: I first saw the technique used on a Ford F150 ad and fell in love with it. Starbucks also used kinetic type for an ad promoting their free coffee on election day.
  • Random people just for fun: Just search “kinetic typography” on YouTube and you’ll find tons of examples from people who make fan-art style videos using scenes from their favorite movies or excerpts from their favorite books. As a testament to the viralness associated with kinetic type videos, take a look at the number of views per video– some have hundreds of thousands.
  • Public relations and advocates: Kinetic type is especially powerful as a means of persuasion. If you have an agenda or viewpoint to push, kinetic type can be mixed with the right typeface, graphics and background music to make it particularly compelling. (Update: a great example of this is from Mindy McAdams in the comments — The Girl Effect– a video about a solution to poverty).

How to do it

To create a kinetic-type-style video with all the bells and whistles, you ideally need Adobe Illustrator and Adobe After Effects. This will allow you to do all the cool zooming, blurs and other effects. (Note: You can mimic the same effect using a series of images and adding a new word to each subsequent image, then dumping them into iMovie or SoundSlides, but it’s not efficient and I don’t recommend it.)

From experience, I have a few tips and tricks for saving time while creating a kinetic type video:

  1. Before you get started, fully flesh out the exact copy you want to use. It’s a pain to go back and change even one word, especially if you’re going to narrate.
  2. Keep the text simple. Short sentences. Think about which words and phrases are important from the start so you can later highlight them with a different color or motion.
  3. Watch a few tutorials to get a feel for how it will all come together in the end. There are kinetic type tutorials all over the web. I recommend this thorough, step-by-step video tutorial as a starting point.
  4. Record the narration after you’re absolutely sure of the text you want to use. After you have a good working version, mix in your audio loop (I prefer getting free loops from Flashkit). Then match the text animation to the narration and the music.
  5. I also recommend storyboarding. Do it by hand on a piece of paper or use a quick and easy mockup tool like GoMockingbird to get the general gist of which graphics/photos you want to include through the sequence.
  6. Update: In the comments, Jeremy Pennycook notified me that you can also do this same technique using Apple’s Motion application which comes with Final Cut Studio.

You don’t have to be a graphic designer to be able to pull this off. You will need a few hours’ free time, a lot of patience, a spark of creativity and a story worth telling.

No resources? No problem: How a local Russian paper took on the New York Times

A large number of the ambitious or innovative digital journalism stories featured on 10,000 Words are produced by larger newsrooms with more resources to devote to more elaborate projects. One in 8 Million, a multimedia look at some of New York City’s interesting residents, is one such project.

As part of a training workshop I recently conducted in the Russian city of Berdsk (view photos from the sessions here), I showcased interesting slideshows and online journalism, including the New York Times feature.

The staff of the local paper Курьер.Среда (Kurer-Sreda) were immediately intrigued by the project and set out to replicate it in what they called “Один из 97000″ or “One of the 97,000,” a nod to the Berdsk’s 97,000 residents. The number of staff was less than you can count on two hands, yet within hours they began reporting and capturing photos and audio, despite a considerably fewer resources than a major news organization like the Times.

Also unlike the New York Times, there are no Flash developers in the newsroom so the staff took a low-tech approach. They built photo slideshows with the free program Windows Movie Maker, uploaded them to YouTube and posted to the site. They also created photo stories accompanied by text. The slideshow below centers around an employee of a local tanning salon and her advice on getting a good tan.



 

Instead of featuring all of the individual photo stories in one package, the paper’s staff decided to feature one or two a day on the front page of the site so as not to overwhelm readers. The result is a compelling series of multimedia stories that offer insight into the lives of the citizens of Berdsk. Best of all, the reporters had a fun time putting them together. All of the stories are in Russian and even if you don’t speak the language I’d encourage you to check them out here, here and here.

The lesson here is to be inspired by some of the large-scale projects produced by major news organizations but don’t be so intimidated that you don’t attempt to create them for your audience. Also, don’t just copy what other newsrooms are doing — make a project your own and create interesting multimedia stories that will appeal to your readers or viewers.

 
Also on 10,000 Words:

10 Inspirational New York Times multimedia and interactive features
5 Creative uses of Flash and interactive storytelling
8 Ways to save money on your next multimedia project

Spice up food journalism with multimedia and interactivity

As newspapers and magazines shrink and the resources of television and radio stations dwindle, food journalism is often the first section to get the boot. The web, however, presents a unique opportunity to explore food, recipes, and cooking in new and captivating ways.

For example, this past Thanksgiving, The New York Times served up one of its signature interactive projects that visualized what people are eating. The map illustrates what classic holiday dishes are most popular in various sections of the U.S. The Times Online tracked what Britain eats in an interactive infographic that measures the popularity of certain foods over time.

To track the location of local farmers markets, The Washington Post created an interactive online map that readers can use to track local food and produce. If you prefer your vegetables on a burger or burrito, you can also use fastfoodmap.com — an interactive map of the locations of McDonald’s, Burger King, Taco Bell, and more — to satisfy your food cravings.

CHOW.com, a site for recipes and other food-related resources, also has a mix of food-related video that teach users to make food and other stuff. In just a few minutes, you can learn to how to fold a wonton, how to prevent an avocado from browning, and how to clean a cast iron pan.

Food journalism and especially recipe guides are ripe for slideshows. BBC News paired photos and audio to explore the wild, yet edible foods found in the British countryside. The Times-Picayune whipped up “12 Dishes Under $12″ a video guide to great dishes from local restaurants. DNAinfo.com, the newly launched hyperlocal site covering the NYC borough of Manhattan, recently presented an interactive slideshow of dishes available during the city’s restaurant week.

Food journalism, as with all news subjects, can be invigorated with a little bit of multimedia and a lot of creativity, which in the end makes the topic more interesting for readers and viewers.


Also on 10,000 Words

5 Creative uses of Flash and interactive storytelling
Exploring the human body with Flash and video
10 Inspirational New York Times multimedia and interactive features

10 Incredible interactive audio experiences

Audio isn’t just for podcasts and slideshows. The following sites are using audio in new and creative ways to make create unique interactive experiences.

BBC: Save Our Sounds

The BBC map is indicative of the latest trend in audio: collecting user-generated audio and displaying it on a map. For this ambitious project, visitors are invited to upload sounds from all over the world, which anyone can listen to by navigating around the interactive map. This means you can hear the purr of a cheetah in South Africa or listen to a wrestling match in Mongolia without ever leaving your couch.

Tracks on a Map

Tracks on a Map takes the user-generated audio concept in a different direction and lets users from all over the world upload music to the site, which allows the viewer to hear great music and how it differs from country to country.

Vocalo.org Local Music Map

The aforementioned maps are powered by complex databases, but the Local Music Map shows that audio and maps don’t have to be grand productions to be good. The map mashup catalogs the music scene of the Lake Michigan area and provides photos and links to some of the area’s local artists, venues and other music-related landmarks.

Soundtrack

This series of maps takes audio to a new and innovative level by taking the viewer or an audio tour of various locales. As the audio plays, the adjacent dynamic map moves to indicate where the audio was recorded. The technology is a combination of Google Maps, Quicktime and Javascript and is reminiscent of Vidmap which combines maps and video in the same way.

Cold War Kids: I’ve Seen Enough

Indie rock band Cold War Kids used the web to create an interactive music video where fans can toggle on and off each member of the band as they play the song “I’ve Seen Enough.” The effect is sort of like a mixing board where the viewer can listen to one or all of the band members play at the same time.

Interactive Band

The Flash-animated band is a lot like the Cold War Kids experience, only with more instruments and a groovy samba beat. Users can again toggle between the different band members and, if neither French or Spanish is your first language, learn a few bits of the languages as well.

Buckle Drum Set

This virtual drum set is proof that interactive audio experiences don’t have to be all fun and games. If you want to learn the basics of how to play the drums but aren’t yet willing to drop the cash on a whole set, you can use this Flash-based interactive to learn the various parts and sounds of a drum set.

dothedaft.com

If electronic music is more your thing, The Daft Punk Console allows users to recreate and remix the Daft Punk hits “Technologic” and “Harder, Better, Faster, Stronger” (famously sampled by Kanye West) using an interactive interface.

in Bb 2.0

This online collection of YouTube videos combines both user-generated content, an interactive audio experience and just plain fun into one cool project. A variety of musicians recorded themselves playing individual instruments and uploaded the video to YouTube to create one big collaborative song. You can play any combination of the embedded videos to create a unique harmony that sounds pretty great no matter which video you choose.

Economía musical

This last project is proof that news infographics don’t have to be boring. This series of charts from lainformacion.com takes what would otherwise be another sad bar chart about the failing economy and turns it into a fun interactive, musical experience.


Also on 10,000 Words

How to create, edit and embed audio for free
9 Tips for recording audio for the web
5 Creative uses of Flash and interactive storytelling
A is for Audio: The ABCs of Multimedia

7 Essential multimedia tools and their free alternatives

Why spend money on expensive multimedia tools when you can use comparable alternatives for free? They may not be an exact replacement, but how can you argue with the price?

PHOTO EDITING: Photoshop
Free: Splashup

Photoshop may be the industry leader when it comes to photo editing and graphic design, but Splashup, a free online tool, has many of the same capabilities at a much cheaper price. Splashup has lots of the tools you’d expect to find in Photoshop and has a similar layout, which is a bonus for those looking to get started right away. Splashup isn’t the only free online photo editing program, check out this list of 20 more.

WEB DESIGN: Dreamweaver
Free: KompoZer

Looking to create your next web site without paying big money for programs like Dreamweaver? KompoZer, a free web design program available for immediate download, is great for both novice web designers and professional webheads who need more advanced editing features.

VIDEO: Final Cut, Adobe Premiere
Free: iMovie, JayCut

Many video editors, both novice and professional, use iMovie to create professional-looking videos and an amateur price. The program is included on modern Macs as part of the iLife package and has the basic features editors need as well as few advanced extras such as detachable audio and image stabilization. JayCut is an online video editor that lets registered users upload and edit their video for free. You can even add photos, audio and effects to your project. The final edited video can be shared on the web or downloaded directly to a computer.

AUDIO: ProTools, Adobe Audition
Free: Audacity, GarageBand

Audacity is a comprehensive audio editor with many of the capabilities of its costly competitors. The program, which is available for a free download lets users record and edit everything from simple audio tracks to complex professional work. GarageBand, which is included on modern Macs along with iMovie and iPhoto, takes a simple approach to audio editing and has the added capability of creating enhanced podcasts with photos, chapter markers and more. Find even more free audio editing programs here.

SLIDESHOWS: Soundslides
Free: PhotoPeach

Until recently there was no other slideshow tool that could compete upload Soundslides’ flexibility and easy-to-use interface…until now. PhotoPeach lets users upload and order photos using a drag and drop interface, upload an MP3 audio file from a computer, add captions for individual photos and embed the final slideshow anywhere on the net. All this is familiar to anyone who has ever used Soundslides, but PhotoPeach offers all this and more for free, making it a strong substitute for Soundslides.

INTERACTIVE MEDIA: Flash
Free: Effect Generator

Effect Generator, a free online tool, lets anyone create common Flash elements such as slideshows, graphics, and embedded videos. Once you’ve created your effect the generator emails a link where you can access the Flash file you created. The layout differs from Flash and takes some getting used to but is a great alternative, especially for those just starting to learn Flash.

WORD PROCESSING: Microsoft Office (Word, Excel, PowerPoint)
Free: Google Docs

Many of the programs and tools on this list are substitutions for existing program. With Google Docs, you’ll never want to touch Microsoft Office again. The free online tool lets anyone with a Google account create documents, spreadsheets and presentations as well as share the document for collaborative editing or viewing. Google Docs is accessible from any computer with an internet connection or you can work offline or download your finished work directly to your computer. You can even upload your existing documents into Google Docs.


Also on 10,000 Words:

21 Free online photo editing tools
Where to find free sound effects and royalty-free music
How to edit your video online for free or cheap
How to create, edit and embed audio for free
Essential multimedia tutorials and resources for do-it-yourself training

<< PREVIOUS PAGENEXT PAGE >>