We’re fans of data visualizations and infographics at Tumult, so we’re naturally thrilled when we see Tumult Hype being used by news organizations like Reuters and the LA Times. We last explored infographics here with Bart De Neve’s infographics for De Standaard.

To continue the conversation, I (virtually) sat down with one of our favorite Tumult Hype creators to dig into his process.  Konstantinos Antonopoulos, the handsome man pictured on the right, creates infographics for in.gr, a popular news website in Greece. More than just visualized data, his documents lead users down a storytelling path, with more narrative than simply data. He was kind enough to offer his thoughts on

• Iconography for user interaction
• His testing process, and perhaps most importantly
• Starting with pen and paper.

I hope this conversation is helpful for others working with visual data. If you would like to explore his Tumult Hype documents, read on.

Daniel: Infographics can be so open ended, so I’m wondering how you approach the creation of clickable and tappable elements in Hype. I notice you use a lot of plus (+) and arrow iconography to encourage interactivity.

Konstantinos: The infographics I create for in.gr are usually structured in order to tell a story. They are not executed as data visualization, but as multimedia storytelling, where the data, the pictures, the text and the multimedia are there to support the story – but the narrative is in the spotlight.

And this narrative is, really, a bunch of decisions I have to take before I even fire up Hype: what do I want to say? How do I construct my story? How can I support my storytelling? How can I enrich it? How can I break it down, scene by scene, for the user to understand and better interact with it? How can I make sure that it tells the story AND it is clear and uncluttered, concise and to the point?

Iconography helps with that a lot: it is a guide for the users to take them down the storytelling path. The icons usually trigger timelines inside every scene, where each timeline has an extra element to the story: it may be more text, another picture, data or multimedia. This method helps me keep each scene clear on first visit (a title, a descriptive text and a picture) and have a lot of additional content available on a tap or click.

I try to use as little animation as possible, since I do not want it to be distracting from the focus of the story. These are news items and the story always needs to take the front seat. Hype is a fantastic story-telling tool that gives me much freedom to control the flow of information to the user.

What technical steps (if any) do you take to prepare your Hype document for display on the web?

Most of the technical work is a repeated process: the javascript to connect the scenes together (I am using different .hype files for each scene) and the editing of the .html files to include some specific code for the SEO and the Nielsen ratings are a daily routine.

Some of the elements are prepared in Illustrator (yeah, old habits die last…) and are exported as .png images, so that requires some attention.

Working with fonts is a routine that I am paying extra attention. While I have not finalized the infographics specs, I am using Open Sans in these latest graphics and I am paying extra attention to getting the typography right.

For a visual journalist who does not know html, css or javascript, I’d say that Hype itself, as well as its support, have simplified lots of technical processes and have taken the load off me many times.

But, overall, the thing that matters the most is testing the infographics out in all the browsers and all the formats. The text rendering in Firefox, for example, has produced some mistakes for me in the past and, from that moment on, I usually take all the time needed for previewing.

Konstantinos’ recent work.

And finally, do you have any tricks to share with other creators?

It is not a secret in the community that every infographic begins with pen and paper. The thoughts are becoming scenes and timelines and the narrative is built. Using a sketchpad or a visual layout tool before firing up Hype makes the job so much easier.

Mastering the timelines is essential in controlling the information. Timelines in Hype are a fantastic concept, are very easy to learn and a very powerful companion to the scenes.

For the moment, I am playing it safe and not using any of the Hype features that are supported only by modern browsers – but I will definitely try to incorporate some filter effects (blurs, especially) in the future graphics.

I am also looking for inspiration among the community and I’m trying to keep up with their creations – and, especially, the infographics artists among them: Les Hewitt, Cath Levett, Bart De Neve and the rest of the news artists and visual journalists are producing amazing stuff and I am very inspired by their work and thankful for them sharing it.

We hope you enjoyed this brief discussion. Konstantinos has made a few of his Tumult Hype documents available for download. If you have any questions for Konstantinos, you can find him at @konstantinosant.

The post Notes from an Infographic Craftsman: Interview with Konstantinos Antonopoulos appeared first on Tumult Company Blog.

NASA’s amazing contributions to our knowledge of rockets and space travel are just a small part of what they do. Decades of research have pushed materials science, health, information technology, and many unexpected fields to new frontiers. NASA’s Office of the Chief Technologist commissioned an interactive poster to present the 14(!) technology areas central to their technology roadmap:

I asked Dennis Bonilla & Tate Srey (who produced this document in Tumult Hype) how they approached this project, and what it was like to distill so many technology projects into one unified interface:

When we were looking through the technology area data, we had to think of each Technology as though it were a ride or an attraction. Some technologies lend themselves very easily to that idea—like Robotics or Launch Systems. Some are a lot more conceptual like “Thermal Management Systems” or “Energy Storage.” For all of them, we went through a lot of sketches and idea development. But we knew we had a lot of flexibility in how we represented the technology. It didn’t need to be literal. So some of our initial ideas were very science fiction. But we had to balance that freedom with keeping it grounded with actual NASA technology—though some of it actually borders on sci-fi. There are certain iconic images like the EDL (Entry, Descent, and Landing system) where the capsule enters the atmosphere–that’s similar to the system that was used for Curiosity to Enter the Martian atmosphere.

Since Tate and Dennis began with a poster, and later added interactivity to the project, their challenge became what they call ‘plussing’ the static poster:

We were looking for ways of “plussing” the infographic. Plussing is a term we’ve adapted from Walt Disney to mean “making an idea better and adding more value to it”. The spinning globe was part of that effort. Throughout our development process we talk a lot about how to “plus” a piece. When we’re blue-skying ideas—no budget or schedule or constraint, some of the things we come up with can be pretty crazy. After we’ve met all the requirements, we have to evaluate which of those are actually doable and will also be the most impactful. We have to walk the fine line of making sure that plussing an idea doesn’t become feature creep. But most importantly we want to engage the audience without distracting them.

What are you waiting for? — discover The Future Brought to You by NASA and don’t miss their past work: NASA’s Exploration Roadmap. This roadmap, as you may have guessed, explores where and how NASA plans to explore the great beyond in the near future. (Also see the ‘making of’ post.)

The post The Future Brought to You by NASA | Technology Infographic appeared first on Tumult Company Blog.

Inge Trondsen of Studio Design (Norway) just launched a site for the film Liv and Ingmar which he built with Tumult Hype. The film explores the tumultuous love between Liv and Ingmar Bergman (one of my favorite film directors). I asked Inge what he likes about using Tumult Hype:

As a designer, I love Tumult Hype because this wonderful software enables me to focus on design, not code. I can do pretty advanced stuff, and it works – even in my aunt Olga’s browser. And, most importantly, when I work Tumult Hype gives me a feeling of open space – not limitations.

Even Olga. If you’re in New York, Liv and Ingmar will be playing at the New York Film Festival today.

The post “Liv and Ingmar” – documentary film site appeared first on Tumult Company Blog.

Could you build an entire interactive storybook with Tumult Hype? Certainly. “Jack’s Secret Monster” just hit the app store, and its designer at Game Digits has told us he relied on Tumult Hype to develop the interaction. Here are a few of the book’s features:

• Multiple story paths
• Interactive characters and scenes
• Narration
• Bookmarking progress through the story

view Jack’s Secret Monster in the App Store.

The post Jack’s Secret Monster: A ‘choose your own adventure’ for the iPad appeared first on Tumult Company Blog.

The ‘Wonder of World Heritage’ site explores the many UNESCO World Heritage sites in Germany with an interactive map, videos, and tips for travelling through the country. Built in Tumult Hype. ☛ View this project

The post Wonders of World Heritage: UNESCO sites to explore in Germany appeared first on Tumult Company Blog.

Truman Capote published the non-fiction crime novel ‘In Cold Blood‘ in 1966, following six years of interviews and thousands of pages of notes. Capote’s access to local detectives made the story one of the greatest crime novels ever written. The signed first edition books and personal letters sent by Capote to the lead detective, Harold Nye are being made available for auction by Vintage Memorabilia in Seattle.

To highlight this historic auction, Vintage Memorabilia created an immersive website in Tumult Hype. The interactive site, complete with moody music, can be viewed here.

Bids start at $20,000.

The post Interactive Crime Memorabilia: Original Documents from Capote’s “In Cold Blood” presented in Tumult Hype appeared first on Tumult Company Blog.

It’s exciting to see Tumult Hype projects in unexpected places. Today we’re happy to share an interactive iPad kiosk in the Museum of Making Music’s ‘Sound of Sax‘ exhibit. If you’re near Carlsbad, CA, check it out!

B.J. Morgan, who created the setup, writes:

We used Kiosk Pro Plus which features the ability to automatically display local documents if there is no network connectivity… There are two versions of the project: One with Google Analytics employed into each scene and hosted on our web server, and another without (just in case the wi-fi signal is dropped) hosted locally on the iPad.

We tried using iBooks Author to create a similar document, but found that it was too open-ended, allowing the user to eventually make their way into areas we didn’t want them to go. HTML5 (easily created with Hype) + Kiosk Pro Plus was the perfect solution for creating an interactive user experience (and we barely scratched the surface of functionality of HTML5).

Future uses will include visitor feedback surveys, direct mail subscription registration, and future special exhibition interactive experiences (we rotate special exhibitions every 6 to 8 months).

View the animation (best on an iPad) here, or see how the project was built by downloading the original files.

If you’ve got a Tumult Hype project you’d like to share, please get in touch on Twitter or FB, or share it on our forums.

Gallery View

C-Melody Saxophone Scene on an iPad

The post Interactive Museum Displays: The Sound of Sax in The Museum of Making Music appeared first on Tumult Company Blog.

It’s exciting to see photographers, architects, fine artists, and musicians (see below) create beautiful and interactive sites for themselves in Tumult Hype. Seeing so many creative people make use of Tumult Hype as an expressive tool makes us extremely happy.

Today we’d like to spotlight a site Jimmy Gilmore created to showcase his drumming career. Jimmy writes that he first created his interface in Photoshop, and then tweaked his animations within Hype:

I’ve streamlined this project as much as possible by developing the overall look and concept with extensive work in Photoshop first, so that even without Hype’s brilliant animation and media ability my site would still look pretty interesting (at least, visually) on its own.

His site sports a beautiful retro theatre façade at jharleygilmore.com (And you can peek into how he built it by downloading his .hype file!)

More awesome Tumult Hype sites:

• The photographer Jeff Hargrove’s site at jeffhargrove.com
• Musical work by Aaron Jaffe at novacainestudio.com
• Clayton Kimball’s architecture portfolio at claytonkimball.com
• Adam C Gordon’s Fine Art & Illustration at adamcgordon.com
• Another site by J Gilmore: A tribute to Freddie Gruber

Looking for more? Check some of the other Tumult Hype creations shared on our forums and submit your own or holler @hypeapp – #madewithhype.

The post Artists and Tumult Hype: J Harley Gilmore’s Interactive Musical Minisite appeared first on Tumult Company Blog.

“How far can you drive with a budget of 10 euros (from 1970 till now)”
“New fashion trends for summer” (with links to www.standaard.be)
“Financial support for energy efficient living in Flanders”
“Republican primaries in the United States”

Sometimes digging into project files is the best way to learn new tricks so we’re pleased to make Bart’s project files available for download. To explore the infographics, click the images below, or visit the links immediately following.

Here’s a few more links to Bart’s work for Standaard (he’s a busy guy):

http://www.standaard.be/extra/conflicten_2012
http://www.standaard.be/extra/gezichtstransplantatie
http://www.standaard.be/extra/Laura_Dekker
http://www.standaard.be/extra/elfstedentocht
http://www.standaard.be/extra/kredietratings
http://www.standaard.be/extra/brandstofprijzen
http://www.standaard.be/extra/atoombunker
http://www.standaard.be/extra/begrotingsakkoord

We’re also pleased to share  a few high quality infographics from Modesto Juan Carrasco Castro of El Mundo, a major newspaper in Spain:

• Armada invencible
• Sonda a Marte
• Meteosat
• Submarino Cameron
• Titanic

The post Create quality infographics by exploring original Tumult Hype project files appeared first on Tumult Company Blog.

It’s an exciting time for web animation. The accelerating development and adoption of web technologies are turning Flash developers, motion graphics professionals, and even print designers to create rich animations and interactive content for the web. Animators and designers of all backgrounds are turning to device-agnostic animation tools like Tumult Hype for creating interactive web content.

In the hands of a skilled animator, Tumult Hype is a powerful tool for creating engaging and interactive content. Our hope is that Hype enables talented animators as they move towards cross-platform web technologies and away from technologies like Flash, which is losing support from Adobe on mobile devices.

Today, we’re showcasing an animated ad banner created by Sasha Zivanovic, the animation director at Pixelpusher. Sasha produced the animation above in the first two hours after installing Hype. As Pixelpusher’s senior animator & animation director, Sasha has 10 years of award winning animation experience behind him. It was a treat to see his first production in Hype. It’s worth mentioning that this banner looks virtually identical on the major desktop and mobile browsers.

In this post, I’ll be going through Sasha’s Tumult Hype document to expose some of his tricks. Don’t worry, we have his permission

You can rewatch this animation by refreshing the page, or viewing it on its own page.

The Puff of Smoke

The brief cloud of smoke was achieved by briefly enlarging a transparent PNG. The element is quickly made visible by adjusting the opacity from 0 – 100% opacity in the timeline, and rapidly increased in size. In the image below, you can make out minor movements in the X and Y axes as well, which give the puff a bit of a shake over the puff’s 4 frames, which comes out to about 1/10th of a second:

Shooting the ducks

As the gun fires, the ducks appear to fall at the exact same time, then quickly descend below the water. To accomplish this, Sasha created two duck images: one upright, and one laying down. After the gun is shot, the normal Duck’s opacity is reduced to zero, and the ‘Duck_laying’ image appears in its place. You’ll notice a few other effects: the water and the pussy willows on stage left and right quiver after the shot is fired. The ducks also quickly move below the surface of the water, which is illustrated by the red animation path in the image below:

Animating the Lights

Sasha added a nice touch: blinking lights along the top area to follow through with the mock-carnival game aesthetic. Sasha switched from an ‘off’ version of the lights, and alternated two separate blinking versions:

You can view this animation on its own page here or download the original Tumult Hype document to get your hands dirty. If you don’t have Hype, take our 14 day trial for a spin.

Want to show off your Tumult Hype document? Please get in touch.

The post The anatomy of an advanced HTML5 banner created in Tumult Hype appeared first on Tumult Company Blog.