That Blue Square Thing


The CIDA and DIDA courses are now finished and will not run anymore.
I’ll keep these pages up for a while as there are some useful resources for me on them. Any future resources will be on the Creative iMedia pages.

It's vital that storyboards and other designs are done up front - i.e. before you start to make a product. It's absolutely fine if your finished version looks very different to your storyboard - that's part of the design process.

I have lots of different storyboard templates. I'll try and bring them together here so they can be downloaded and used (along with some examples perhaps).

One important point to make is that I firmly believe that the best storyboards and designs are done by hand using a pencil or pen. The best designs which have the most detail on and score the most marks are consistently the ones done by hand. Trust me with this. That's the reason these are likely to be PDF documents. Print them off and write on them - and then scan them (my students: I have a scanner available...).

There's stuff on development diaries on the Free Images page

Basic storyboards and Sketch grids

These generally need annotation to add detail. Make sure you explain what you plan to do and why. It's always useful to refer to the target audience when talking about why...

PDF iconBasic 4 box storyboard - good for simple designs such as digital posters

PDF iconBasic 6 box storyboard

PDF iconSimple 1 box storyboard - useful for sketches when they're needed

PDF iconExample design sketch using the 1 box storyboard

PDF iconBanner storyboard - a long, thin banner (the sort you can make with Flash)

Movie Style Storyboards

These split into outline storyboards, which are ideal for basic planning tasks, and timelines, which are generally required for movies or audio storyboards.

PDF iconOutline storyboard - 4 frame - this has plenty of space for annotation

PDF iconExample of outline storyboard in use for a movie

PDF iconOutline storyboard - 20 frames - good for planning a whole movie really quickly

PDF iconTimeline storyboard template

PDF iconExample movie timeline 1 - I can't remember where this comes from but I think it was free to use... It's old - nowadays the use of images in the storyboard would be more questionable (does it mean the movie was made first and then the images added to the storyboard?)

PDF iconExample movie timeline 2 - a fairly simple one. Note that neither of these have annotation on them

Detailed Storyboards

Sometimes you need more detail. These are good for story screens and other designs where a list of assets is needed.

PDF iconDetailed storyboard sheet

PDF iconEffective storyboard example - for a story screen