It’s a Hollywood party in the mid-1920s. Among the small jazz orchestra, the gold and black dresses, and white and black bowties, a man with slicked-back gray hair raises his hands and asks for the crowd’s attention:
“Listen, everybody, I’ve got a few little surprises for you tonight. All right, everyone, sit down, sit down. Listen, this is gonna hand you a lot of laughs.
“There’s a madman coming into my office now for months, and well… you got that gadget working, Sam? OK, let her go.”
The silver screen shines with a bent Rhett Butler mustache, only this one is surrounded by a few wrinkles, two cavernous slits of eyes, and, to everyone’s surprise, a slitheringly rich voice.
“Note how my lips and the sound issuing from them are synchronized together in perfect unison.”
No, there’s not a man behind the screen speaking the lines. This is a talking picture, at which the partiers thumb their nose. Now, when this scene from Singing in the Rain first played in 1952, moviegoers laughed at the partiers’ ignorance.
Fast-forward to today, though, and you’d think parts of the web were silent films. For sites with multimedia, much of the internet’s motion and sound lives behind play buttons. However, with better support for audio and video elements within HTML5, we’re seeing more and more examples of great multimedia-infused sites.
While designers and developers need to consider longer load times, and desktop computers offer a better platform than mobile for these applications, multimedia can offer users a full sensory experience.
For more on how audio and video can propel interactive infographics, read Lemonly’s e-book Why Interactive Infographics?
Now plug in your headphones, grab some popcorn and explore these great multimedia-infused sites:
Welcome to Italy. The Grand Hotel a Villa Feltrinelli shows off its decadence through background videos, which serve as landing pages for more expansive, photo-driven sections.
The infinite quality of sun-dappled water rippling, candlelight flickering and curtain swaying offers just the right amount of environment, without taxing your computer. If the loop is too seamless to catch at first, scroll down to the “Precious Taste” section, and you’ll see how long each clip is: just a few seconds.
Everything is detailed and simple, from the loading screen turned golden frame, to the elegant bell icon in the top-right. Go ahead, we’ll let you daydream.
Boom. Wake up from that siesta, because we’ve got an orchestra of sights and sounds for you to control.
Patatap is an immersive soundscape triggered by keystrokes, with each audio bit linked to a geometric pattern. It’s a site designed by you, the conductor of a symphony you’re writing. Inventive and two-dimensionally fun, it’s another world, albeit digital, in which to step and lose yourself.
We wonder what Mavis Beacon and her typing prowess would think of it.
Another extraordinary concept, 15 Seconds on Air allows musicians to upload a jingle for Norweigan radio station Øvingshotellet.
The best part? All submissions are aired, and monthly winners earn free rehearsal time, plus a play of one of their own songs on the show ROX FM. While this site’s background video doesn’t loop, its out-of-focus aesthetic allows for type and graphics to sit cleanly and legibly on top.
Offering smooth connection to SoundCloud for uploading and easy playback of submissions, this is a well-executed great idea.
With our last two sites, we enter the future of music videos.
For the first, the band Brightly connects to Twitter and presents recent tweets that match the lyrics of their song “Preflight Nerves.” While lines like, “I heard a lark ascending,” aren’t often available to fetch, this social experiment succeeds in grabbing snippets of unrelated statements, and coloring the song with thousands of new unknowing perspectives.
The video complement helps set the scene, and the band reaches its ultimate goal — getting you to hear their song — by lending just enough visual interest to keep you engaged, while most of your attention remains on the words and music.
Depending upon the time you click the link to see Pharrell Williams’ “Happy,” you’ll see a different start point.
That’s because this is a 24-hour music video. No, we haven’t watched the whole thing. Each minute is linkable, and each play through the song warrants a new main character. Although the song could grate on you after a few scene changes, the innovation here is something to behold.
Just one question: Do you feel like a room without a roof? Clap along, folks.
This concludes our three-part series on interactive elements done superbly. We started with some simply beautiful GIFs and moved to sweet uses of CSS animations before these great examples of multimedia-infused sites.
Lemonly is on the leading edge of the medium that can weave all three into one strong, data-driven site: interactive infographics. For more on the future of data-driven stories, read our e-book Why Interactive Infographics? here.