4 Web Design Tips for Motion Graphics Sites

(Photo from muteboy)

Here at Motionographer HQ, we spend a lot of time looking at motion graphics websites from around the world. Over the last four years of running this site (and its predecessor), I’ve seen a few ideas that work—and a few thousand that don’t. This is a short list of my best advice for creating useful, enjoyable web experiences that showcase your motion work.

1. Use QuickTime (with Fast Start).

While Flash may be the most ubiquitous media player on the web (more on Flash later), QuickTime is still the industry standard format for distribution. Some reasons for this:

  • Easily downloadable
  • Easily scrubbable
  • Huge array of supported codecs

Perhaps the biggest reason, tough, has to do with your audience. Your site is targeted at designers, producers, agencies and other video-savvy clients. Call it brand fascism, but QuickTime is currently the expected choice for distribution. Anything else (AVIs, FLVs or, god forbid, OGMs) are regarded with a mixture of suspicion and disdain.

It’s like wearing pink to a black-and-white party. Sure, that inner rebel in you wants to do it, but you’ll be standing alone in the corner nursing a stiff martini most of the night.

Using Fast Start with Compressed Headers
One more thing on the QuickTime tip: For god’s sake, please use fast start. If you don’t enable the fast start option when compressing your video, your viewers will have to wait for your entire video to load before they see the first frame. For longer form projects, like music videos and short films, this can be reason enough for someone to skip your project entirely.

Using Fast Start is easy, but it requires QuickTime Pro (or Compressor). Here’s how to do it:

  1. Open your video in QuickTime.
  2. Go to File > Export…
  3. In the Export drop-down, select Movie to QuickTime Movie and click Options….
  4. Configure your video and audio compression settings however you like.
  5. Here’s the crucial part: Make sure to check Prepare for Internet Streaming and choose Fast Start – Compressed Header from the drop-down menu.

The compressed header option losslessly crunches your movie’s header information and allows for an even quicker playback experience than fast start alone. The only reason you wouldn’t want to use the compressed header option is if you expected someone to watch your QuickTime using a player that doesn’t support compressed headers (like Quicktime for Linux and/or older, lesser known players).

2. Put the work up front.

I don’t care about your mission statement. I don’t care about your innovative interface. And I really don’t care about your cute intro animation. I want to see your work. Fast. Two rules of thumb:

Your reel should be accessible in one click or less.
Either put it on your site’s entry page or prominently linked from there. There’s no compelling reason to bury it any deeper.

A single project should be accessible in two clicks or less.
You might want to categorize your work. That’s cool. But one level of categorization should do the trick. I don’t want to click through “Portfolio > Motion > Abstract > Blue Period > Post-2001 > Containing the letter “J” in the title” just to see “Juggling Blueberries” (which I’m sure is totally awesome).

Cut down on the navigation levels and push the work to the top. If you find that you have too much work for that approach, then you probably have too much work on your site. It’s a portfolio, not a basement. Only put your shining examples of brilliance online. A searchable archive is fine, but don’t put it at the same hierarchical level as your other stuff.

3. Use 640 x 480 resolution or greater for your videos.

It’s 2008, people. Two thousand and EIGHT! 320×240 video was all the rage in 1999, but increasing monitor resolutions mean that 320×240 videos appear smaller than ever. (And they were damned small to begin with.)

The good news? Thanks to better codecs (specifically H.264 and Flash’s On2 VP6), faster servers, cheaper hosting plans and widespread broadband penetration, you no longer have to reduce your beautiful videos to postage stamp proportions.

Do yourself and your visitors a favor: Go big. If your current host can’t handle it, find another one.

4. If you use Flash, do so wisely.

I love Flash. I worked full-time as a Flash designer/developer for four years before I got into motion, and it seems natural to exploit its growing motion graphics capabilities for a motion graphics website. Just keep these things in mind:

Provide direct links to projects
Don’t make me send an email saying, “Click on Work and then scroll through the projects until you see a little red bird. It’s the video to the right of that one.” That’s crazy. Give me a link, just like Blacklist and Nervo do. It encourages people to share your work and that’s good business.

Provide downloadable versions of your videos
“But I don’t want people stealing my stuff!” Trust me, encoding your video in Flash and not providing a QuickTime version isn’t going to stop people from stealing your stuff. There are countless ways to nab files without your permission. Instead, why don’t you step into the 21st century and provide a downloadable QuickTime that’s watermarked with your logo?

Technically speaking, my favorite way to achieve this on a Flash site is by calling a PHP script with code like this or this.

Don’t forget search engines
Unless you explicitly take measures to avoid it, Flash content is hidden from your little invisible friends, the search robots. Widespread adoption of Adobe’s Search Engine SDK could alleviate this issue in the future, but for now, do what you can to help the search engines out. It’ll come back to you.

There are countless other bits of advice I could offer, but they’re more about general web design practices, not about motion graphics websites. Up next in this series: the secrets of a successful reel and tips for compressing your videos.

About the author

Justin Cone

/ justincone.com
Together with Carlos El Asmar, Justin co-founded Motionographer, F5 and The Motion Awards. He currently lives in Austin, Texas with is wife, son and fluffball of a dog. Before taking on Motionographer full-time, Justin worked in various capacities at Psyop, NBC-Universal, Apple, Adobe and SCAD.

Join Motionographer on Patreon!

For as little as 7 cents a day, join our Patreon community and shape Motionographer's future!

28 Comments

daftcain

Great information here. Coming from a both interactive and motion based college major, I ended up going with a flash based portfolio. There is something to be said for the ease of use and simplicity of one page portfolios though. http://www.onepagefolios.com/

I look forward to similar posts like this one

justin

I’m a big fan of one page portfolios. They don’t work well if you’re trying to embed several QT’s on page, but they can be nice launchpads for pop-up players.

Dyllan

Dude! your site and articles are bomb-diggady! I thoroughly enjoy the way you write. big ups! O yeah, and one small thing I’ve picked up; many flash sites do not incorporate the history button, or commonly known as the BACK button, google it people, there are many implementations of doing this. o yeah? maybe one more little one: logical consice button descriptors, will never go out of fashion, forget the slang, you’ll be amazed at how many people from different countries are ‘checkin yo site’.

adios mucha-chos

noel

With the latest release of the Flash player, you are able to play the same h.264 videos which are playable in Quicktime. I would think your best bet would be to compress your videos in h.264, play the videos on the web through the Flash player, and simply create a link to the same video for download (for playback locally in quicktime/windows media player/whatever).

justin

That is a pretty good idea. One problem I’ve run into, however, is the finicky relationship between available processing power and Flash video playback quality.

If, for example, I’m rendering a huge After Effects project while trying to watch a flash video with a high data rate, I’ve noticed choppiness and choking can sometimes occur. Maybe that’s just me and my slow-ass machine, though…

dek

> Maybe that’s just me and my slow-ass machine, though…

Nope. Same on my PC. I can play HD720 clips smoothly with VLC, and not very smoothly in Quicktime, while with Flash things are unwatchable even at 480 (why do they call it HD anyway?)

felix

All great tips! As a flash developer however I would disagree with ‘use Quicktime video always’. In some cases flash video is better as it integrates better with the rest of the site.

Flash video playback quality is improving all the time, also now you can encode your video to a H.264 QT MOV and play it directly in flash. wyldstallyons.com is a good example of nicely done flash video

justin

That Wyld Stallyons action is nice, but I still miss being able to scrub around a video in my browser. Most embedded Flash movies just let you scrub keyframes, not every frame. (I’m a nerd, what can I say.) :-)

And the fact that the controls for Flash video are often non-standard means that I have to put a great deal of trust in the designer to build an interface that a) works, and b) make sense. The Wyld Stallyons one is pretty nice, except for the fact that changing the volume or hitting pause means bringing up a box that partially obscures the animation.

I hope I’m not coming off as a prick here. I totally agree with the essence of what you’re saying; I just think that QuickTime makes more sense in the vast majority of cases.

Joe Clay

I agree with all of this wholeheartedly. I’ve told people the QT issue plenty of times. I want to be able to easily download it (it only helps business if people can save it to their desktop) and I want to be able to look it over frame by frame.

By the way, I like the new commenting system.

Justin

Cool, I’m liking the new system, too. Wish I would have implemented it sooner.

Paul

nice one.

nothing new … common sense. but good read anyway.

thanks.

Omar Muhammad

Thanks man. Your wisdom is much appreciated.

Mike

Great post, especially since I’m planning on doing my first website over the summer. Also looking forward to the other installments in the series.

sebbo

thanx for your hints :) and feel good about our site
http://www.blanx.de

but i think flash video makes more sence because quickitme is no standard in big companies with radical admins.

gl

The major problem I have with using QT as a web playback technology is that the d/l is huge. Most users who go to d/l it get the full version that includes iTunes and it weighs in at around 20mb. Flash is far more convenient for the web user. Also, if you encode your flash videos correctly, you can scrub them as well as QT.

-gl

Rob

Good post, I agree with a lot of it.

Regarding using QuickTime; although it has my preference over Flash Video, I can not understand why Apple is not fixing the H264 gamma-shifting bug.

It strikes me as odd that I hear no one in the industry about it, as well. There is enough to be found on the topic, and it seems that certain people within the industry are actually choosing the Sorenson 3 codec over the H264, presumably because of the issue. Yet Apple doesn’t seem to be working on a fix, as the bug has been around for as long as I can remember.

Because of this, I really thought about using Flash Video instead. In the end I did go for QT and it’s H264 codec as it seems to play okay on OSX/Safari, which is what my target audience will probably be using (and Sorenson 3 producing a 50% larger file). But it really does annoys me.

Also, I wish there was a QT codec that could encode noise and smooth subtle gradients in a proper way!

Alvin

Nice post Justin, looking forward to the post about reels and compressing videos.

Article about Search Engine Optimization for Flash Websites by Blitz: http://labs.blitzagency.com/?p=171

Jase

Wow…A Sam Coupe home computer in the feature pic. Its been a while seen ive seen one of those. I might have to dig mine out now. ive gone all nostalgic!

Meljane

Great tips! It’s what we need! Thanks. And really looking for the next series.

Meljane

compressing my videos always makes me headache. How to compress a big resolution video in to small size and don’t lose much quality….
Please…

yates

I would also suggest for those deciding to go the flash route to create a directly linkable site.

Blacklist has a clever solution, but in the age of Mod Rewriting I really never want to see a PHP include in my URL ever again.

Great tips Justin.

French reader

Sorenson and h264 quicktime exports always looks either whashed or oversaturated when they are done from my pc and viewed on pc. H264 and on2vp6 flv matches original colors better.

stefan

i hate that “washed out problem” with quicktime. I made this little site:
http://www.monostep.org/quicktime/

Apple/Quicktime told me that it’s a problem with the graphic Card and that i should enable the “DirectDraw acceleration”.

But thats not really a solution if you want to play quicktime files in fullscreen you need “Direct Draw”.

The VLC Player plays h264 mov files correct.
It’s just the Quicktime Player that sucks.
Apple ignore my mails… and i left the mailinglist… which also sucks.

The Problem is: if you work on a website and the people want quicktime files… you have to tell them… that the files looks “washed out”. Some people think that you are just a bad in the job you are doing.

I whish Apple will fix this bug. I mean… how old is this bug…. 10 years??? – they will never fix that.

Felipe Valenzuela

Awesome! Great advice

Miracle studios -- web design company

Hmm nice blog post …..

Thanks a lot for those tips …..

Take a glimpse of our award winning website : http://www.miraclestudios.in

Sennynha

Cool. This helped me much. Thanks!

Ray Creations - Web Designer

Thanks for sharing your great tips on embedding videos on websites using Quicktime.

Comments are closed.