So, in my spare time I’m currently working on an animated explanation video about visual thinking that shows examples of types of visual thinking and provides a preview of some of the kinds of things that may be discussed during local VizThink events.

I’m currently in the animation phase of this, as well as seeking permission from several visual thinkers to use some of their content in the examples/montage section of the video. So, far I’ve got Sunni Brown’s permission (Thanks Sunni!) to use for an example of graphic recording and hopefully this week I’ll have time to contact some other prominent visual thinkers to get their permission.

In the meantime, I thought it might be fun to share some of my pre-production sketches with the visual thinking community. So here’s some of the sketches from the storyboard showing examples of how people are using visualization and visual thinking every day.

These are also on Flickr.

I’ve also put these sketches and some Keynote slides together to create a rough animatic (series of still storyboard images edited together and displayed in sequence) of the project.

This took a bit longer than I had hoped, but still much less time than full two or three minute explanation video.

The picture superiority effect, or pictorial superiority effect is the term that resulted from experiments that have shown that in human memory recall, pictures outperform text dramatically. When information is presented orally, after 3 days, people will only remember 10% of it. But if pictures are added, memory recall improves to 65%.

Nelson, D.L., Reed, U.S., & Walling, J.R. (1976). Pictorial superiority effect. Journal of Experimental Psychology: Human Learning & Memory, 2, 523-528.

It was exciting to be part of a community of people who believed in visual thinking. But since the VizThink conference and VizThink.com seem to have fallen into neglect I haven’t found an active community of visual thinkers to learn from. I’ve been following key visual thinkers like Dan Roam, Dave Gray, Karl Gude, Nathan Yau, Nancy Duarte, Sunni Brown, Lee Lefever, and others on Twitter, and their blogs, but I just haven’t found a good online visual thinking community that came close to the experience of attending the conferences.

I made a comment to this effect on the Duarte blog post about the Visual Thinking Revolution and VizThink NYC co-founder Steve Cherches suggested that local VizThink groups are the main driving force in the VizThink community currently and suggested I start a VizThink Hawaii group and offered his help.

So, thanks to Steve’s nudge of encouragement and tips, I’m in the very preliminary stages of planning one or more VizThink Hawaii groups. We’ve got a relatively small population here but geographically we’re very spread out. I’d like like to do a group that encompasses all of Hawaii, but since we’re all on different islands here, it may be more practical to do island-specific groups. I’m not sure how that will play out, but since I’m on Maui, I’ll focus on organizing the first meeting here, but will welcome anyone, not just Maui residents. Honolulu has a much larger population, so I’ll be interested in finding any visual thinkers there who might want to contribute in organizing workshops there.

What is a VizThink group?

Borrowing descriptions from a couple of other VizThink groups:

VizThink NYC Hawaii is part of the VizThink global community. We are a group of professionals who believe in the power of “visual thinking” – using pictures, sketching, imagery, graphics, and other visual approaches to help people more effectively communicate, problem-solve, and understand complex issues. We host workshops exploring various aspects of visual thinking, and organize assorted Viz-related events.

VizThink is a global community of people who are interested in:

1. Cross-pollination between visual thinking disciplines like information design, information architecture, data visualization, graphic facilitation/graphic recording, comics/graphic novels, architecture, etc.,

2. Cross-pollination between those from any discipline who want to explore visual thinking as a method for increased effectiveness and performance.

So, whether you live in Hawaii or not, if you’re interested in visual thinking and have any suggestions, tips, etc. in starting a VizThink group, I welcome your feedback. If you live in Hawaii and you’re intrigued by the idea of workshops and a local community about visual thinking, let me know. I’m looking to gauge the level of interest in order to determine venues, workshop frequency, etc.

If you’d like to leave feedback, either leave a comment in the form below or contact me directly via email.

Mahalo and Aloha!

Quit Talking and Start Thinking

Grammar Ain’t Just for Words Anymore

Are You a Fox or a Hummingbird? Dan Roam Explains Your Brain

Dan Roam and Nancy Duarte Compare Notes on the Creative Process

All of these and more great visual thinking goodness is available on Duarte’s blog.

Now, off to read Dan’s book, Blah Blah Blah…

I’ve outlined my basic process of creating simple motion graphics videos using Keynote previously in another post. For this project I wanted to primarily use Apple Motion. Keynote is great for simple basic animations, but can’t compare to infographics animation in Apple Motion or Adobe After Effects for complex motion graphics.

Storyboard

My process was somewhat iterative but the basic flow was:

• Ideation – come up with the idea for the topic
• Topical research – gather information and data about the topic to use in the story
• Identify a visual style and tone for the piece, create a mood board
• Write the script
• Brainstorm and sketch visuals to accompany the script and tell the story
• Create rough storyboard
• Create mock-ups or more refined storyboards in Apple Keynote
• Create graphic and image assets in PhotoShop, Illustrator and Keynote
• Production of scenes in Apple Motion
• Assemble rough cut in Final Cut Pro
• Narration
• Edit scenes to narration
• Edit audio in Soundtrack Pro

The presentation below contains scans of my sketches and hand-drawn storyboard as well exports of Keynote storyboards and mock-ups. Those interested in the process can compare the original sketches and storyboard with the final video. Some portions came out very similar to the original concept but I found that a lot of my original ideas where difficult or time-consuming to produce. So, some portions of the final product are very different from the original idea.

And here’s the finished video:

Click here to view the embedded video.

Lessons Learned

Perhaps the biggest lesson learned was one I’ve come across before. You need to spend a lot more time refining, distilling and honing the script up front before you jump into production or even storyboarding. It wasn’t until I was well into sketching and storyboarding that I realized my script was too broad. I initially started out with a broader idea of discussing the trends of what some people have termed the Post-website era, but it turned out that there were too many issues at play for such a broad topic and so I decided to narrow it down to the mobile revolution. I think the video still suffers a bit from this mid-course correction, not being as focused as it could be.

Another  key lesson learned here is to generate several alternative visual ideas to explain a given element of the video and to be flexible and not too locked on to one particular graphic or edit idea. You might have an idea for a really cool transition from one scene to another, but it may be technically difficult to produce or may not add to the effectiveness of the explanation.

Apple Motion

The project turned out to be a fantastic tool for learning Apple Motion. I had used Apple Motion before in other projects, but not for anything near the scale of this project. If you’re just starting out creating motion graphics or animated infographic videos, whether you’re going to use Apple Motion, Adobe After Effects or even Keynote, writing, editing and producing your own video on a topic of your choice is a great way to not only learn the process, but also the software tools you’ll need.

One aspect of the video I’m least satisfied with is the narration. Many people aren’t really satisfied hearing themselves speak, and that certainly applies to me. Beyond that, I’ve learned from narrating several videos over the past year just how badly I tend to slur words together in my normal speech. It takes quite an effort for me to slow down and enunciate.

Additionally, if you’re going to be narrating your video, I think it would be useful to do at least a rough narration early on the project before getting too attached to storyboard and visual elements. By laying down a narration track early on, you can get a better of idea of the timing of your animations.

A good example of this in my video is at 0:40 in the video, talking about mobile becoming “integrated into our lives.” The scenes showing mobile being an integral part of daily life had to be sped up to match the pace with the narration. Of course, I could have slowed down the narration or left a long pause, but I wasn’t happy with that result either. Had I layed down even a rough narration earlier on, I would have realized that wasn’t much time to visually show much here and could have come up with some different concept for depicting that.

These are just a few of many lessons learned throughout the journey of this project. There’s a quote by American author Greg Anderson that applies here.

“Focus on the journey, not the destination. Joy is found not in finishing an activity but in doing it.”

If you’ve got some key lessons learned from creating animated infographics videos, please share by commenting below.

Click here to view the embedded video.

Acknowledgements and sources

Transcript

For years, consumers have gotten information about brands and their products by sitting at a computer and going to the brand’s website.

But social networks changed how consumers get their information about brands and their products, and now, another change is happening, that, combined with the social media revolution will bring massive change to how consumers interact with brands.

In the Social Media Revolution, consumers gained enormous control through their ability to have conversations with each other about products and brands via blogs and social networks like Facebook and Twitter.

The Mobile Web Revolution is setting up to leverage that power by distributing it even more across new channels and devices in the hands of consumers anywhere, anytime.

The days of going to the Internet by sitting at a computer, looking at a brand’s website are numbered. Increasingly, we don’t “go” to the Internet anymore. It’s integrated into our lives. Our connection to the Internet is moving from the desktop to the pocket, and as it does, the context in which we access the web is radically changing.

1.3 Billion people already use the mobile Internet and mobile browsing is set to skyrocket in the next few years. By 2013, the combined installed base of smartphones and browser-equipped enhanced phones will surpass 1.82 Billion units, surpassing the total of 1.78 Billion PCs.

This ability to access the web anytime, anywhere is already having a dramatic affect on consumer behavior.

• 81% of smart phone users use them to browse the Internet
• 48% use them to watch video
• 63% use them to access social networks
• 80% use mobile during miscellaneous downtime
• 76% use mobile while waiting in line or for appointments
• 79% for help while shopping
• 62% while watching TV

As consumer web access becomes more mobile they interact differently with your brand, 26.5 They are typically on the go, in an unpredictable environment, often distracted, interested in quick, glance-able information, and focused on discrete individual tasks.

How can brands adapt to this mobile revolution? Here’s some Ideas:

• Move into the mobile space
• Focus on content first
• Keeping context in mind
• Design for mobile before desktop
• Learn to create distributed content & experiences quickly and responsively
• Content shouldn’t just sit idly on a corporate website and Facebook page.
• It flows through a distributed ecosystem of touch points, utilities and conversations across many channels and available on a wide diversity of devices
• Consumers will interact with brands at different points in the day, wherever they are, rather than a destination they consciously visit.

It’s the Mobile Web Revolution, and it’s happening with, or without you.

Let’s say you’re just starting a small business and you don’t really have any content to put on a website yet and you’re not ready to start blogging. You might want to just start out with a single page website with a contact form on the home page so that people can contact you. This is really easy to do in WordPress. Let’s walk you through it.

Transcript

I’ll start with a test WordPress site that’s just been installed. By default, WordPress installs with a sample blog post. Let’s first delete that.

Next, I’m going to create a new page that will serve as my home page. I click on Page Add New, enter the name of the page and down below I put in some intro text and this is where I’ll also paste in some code for our contact form in a little bit. When I’m ready, I click the blue Publish button.

Next, I’m going to need a contact form plugin so I go to Plugins and I don’t have any contact form plugins installed yet so I need to find one by typing in the search field. Here I’m going to look for a very simple and basic contact form plugin called Contact Form 7. It’s at the top of the list of the resulting page. I click on Install Now and when prompted to, click the OK button.

Next I activate the plugin by clicking the Activate Plugin link.

Next, I’ll need to get a bit of bit of code from the plugin’s settings panel to paste into my page. For this plugin, it’s right up at the top. I select it and copy the code.

Then I go to the Home page that I created, and paste the code where I want the form to go. Remember to click the blue Update button.

Now if we go to check out our site, we won’t see quite what we want yet. There’s one more important step.

We need to go to our Settings > REading and specify that we want a static home page and select the page we created from the drop down menu for Front Page. Don’t worry about selecting anything for the Posts page dropdown. Click the blue Save Changes button, and now when we go back to view our website and click to refresh, we should see our form.

Now you’ll notice that in this example the comments form is also showing. This could be a bit confusing for readers, so let’s disable that. Go back to your page, click on Screen Options near the top right of your page, and select the discussion check box. Now a new Discussion panel will appear on your page with two check boxes that specify whether or not this page should allow comments or trackbacks and pingbacks. Unclick the Allow comments box. The other doesn’t matter for this, but I’ll unselect it anyway and then click the blue update button.

Now when I go back to my website and refresh, that comments box is no longer there. Now we have a very simple, website with a contact form on the home page.

One last thing, let’s delete that default Sample Page that WordPress gave us. Go back to your admin panel, Pages > All Pages and hover over the Sample Page item until you see the links underneath it and click the Trash link.

Now we should have just a single page website. Not very exciting but it might be just the thing some small business need when they’re just starting out.

My original creative brief called for:

“A 2 – 3 minute infographic video explaining the basic concept and points of the Maui Smart Grid Project,” and outlined roughly how this would be done,

“Simple graphics and animations using available graphics and photo imagery, along with simple animated typographics. No narration. Quick to produce. Doesn’t answer all questions, but intrigues the viewer to want to learn more on the website (call to action).”

The final product that you see here is actually missing the first third of the video that I created – a section that explains the current situation about energy use on Maui with some basic facts from the U.S Department of Energy. The intent was to show the pain, the need, where we’re currently at. Unfortunately, I was asked to cut that, and I feel that the story of the video suffers as a result. This part of the story established why the viewer should care. Without it, the story isn’t as effective and doesn’t communicate as well as it could have.

So, I have mixed feelings about this video. I’m glad it finally got published and I enjoyed working on it, but I feel that it’s watered down and that the best graphics and editing were actually in the first third that was cut. So, I feel that it doesn’t represent my work as well as it could have and I’m disappointed about having to remove it.

The lesson-learned here is that I should have made sure I had approval from all interested parties (and there are A LOT of interested parties in this particular project) much earlier in the process – at the script and storyboard stage vs near the end of production. It reiterates again the importance of those early stages in the process – the script and storyboard and getting things ironed out and approved at that stage before starting production.

As video infographics content becomes more prevalent on the web, we’ll naturally see more and more people trying to create their own videos. If you’re new to creating infographic videos, you’ll naturally want to find some resources to help improve the quality of your videos.

Currently, you’d be hard-pressed to find a book dedicated exclusively to teaching the craft of creating infographic videos. But, that’s not to say there aren’t abundant resources available to help learn the craft – from books on creating static infographics to books on motion graphics design, data visualization and information design. Here’s a sampling of some the books in my personal library that I’m using to try to improve the quality of my videos.

Visualize This – Nathan Yau 

I’ve followed Nathan’s blog, Flowing Data, for years. Just got his book. Haven’t had a chance to get into it much, but if you want to get better at data visualization, this is an excellent resource.

Design Essentials for the Motion Media Artist – Angie Taylor

A great resource if you’re new to motion graphics. Angie explains the process of creating motion graphics and essential elements such as composition, animation, type, color, editing and more.

Motion 4 Designing and Animating Motion Graphics in Final Cut Studio – Mark Spencer

Animated informational videos require motion graphics. Adobe After Effects is the go-to software for most professional motion media artists, but Apple’s Motion software may be easier to learn. Motion is where I turn for serious animation (for now, until I invest in After Effects). Mark’s book is a great resource for learning motion graphics in Motion. Note: The most recent version of Motion is Motion 5. Some people claim that Apple dumbed the software down and that it’s not as useful. This book relates to the older version.

Motion Graphics Design – Jon S. Krasner

I’m finding this book to be an incredibly valuable resource to learn the principles of motion graphics design from spatial and temporal considerations, pictorial and sequential composition, storyboarding, animation, compositing and more. Absolutely essential for anyone interested in creating infographic videos.

Slideology – Nancy Duarte

Though Nancy’s book deals with presentation design it’s very applicable to informational videos. This book is essential reading for anyone aspiring to create infographic videos in my opinion.

Visual Language for Designers – Connie Malamed

The popularity of video infographic can no doubt be traced to the meteoric popularity of static infographics on the web.  Malamed’s book outlines the fundamental principles of visualization including how to organize graphics for quick perception and directing the eyes to critical information.

Wall Street Journal Guide to Information Graphics – Dona M. Wong

Dealing mostly with data graphic like charts and graphs, Wong’s book is great reference if you need to communicate quantitative information.

Edward Tufte Books

Edward Tufte is the king of information design. He’s known for being dismissive of “cutesy” graphics in infographics, labeling them “chart junk.” I personally don’t lean as conservative as Tufte. I think that the general public needs more engaging graphics than what the conservative information design camp believe in. Nevertheless, anybody interested in data / information design needs to read Tufte’s books.

Envisioning Information

The Visual Display of Quantitative Information

Visual Explanations: Images and Quantities, Evidence and Narrative

Beautiful Evidence

Teaching Motion Design – Steven Heller and Michael Dooley

Since I don’t have the ability to go back to school to study film or motion design, I thought this book would help get a good idea of what I might get if I did.

Creative Motion Graphic Titling – Yael Braha

Online infographic informational videos have a lot in common with movie title sequences, both employing animated graphics and typography. If you want to create infographic videos there’s a lot to be learned in this book.