This week I worked on a little internal project at Clearleft. We needed to put up an advert for our new internship which will be commencing at the start of Autumn this year. We wanted to do something a bit different and after throwing around ideas concluded we wanted it to show some idea of design process.
I began scribbling out notes and sketching ideas for a one-page promo. My initial concept was to have the page evolve as you worked down, the rough sketching/wireframes that I would do to conceptualise it at the top and as the page progress so would the fidelity ending with an enquiry form with some nice interaction points.
After a morning of doing this I began thinking about the idea of putting together a sketchnote for the internship and then breaking it apart to fit into a html layout.
I’m not sure where my mind went after that but I spent a large chunk of the weekend with my notebook a stack of Promarkers and began throwing things together on a page only find myself constructing a overhead camera cage out of various photography bits I have lying around the flat and then filming myself drawing and writing.
At first my intention was only to use this as the banner of the page, but after reviewing with some of my colleagues we chose to use it as a feature of a page under the clearleft.com domain.
The end result is here: http://www.clearleft.com/is/hiring/interns.
Key things I’ve learnt
The first dozen or so times I shot it I was rushing myself trying to fit it into the right length (I wanted to keep it under a minute). It wasn’t until I started to cut the films start and end that it dawned on me that I could of course speed up the shoot, this in itself added a nice flair to the video.
After this I took more time in writing and building shapes and thinking about how I wanted to move around the page. This also wasn’t without flaw, I spliced quite a few sections together to drop dead space where I was staring blankly at the page panicking that the camera was rolling.
It also meant that I had to speed the film up more to get it’s time down.
Part of the compromise with speeding up the film further was that the audio became an insane jumble rather than the sweet sound of Sharpie on medium density white paper that we all love. As such, I had to mute the audio track.
Mozilla you are more of a pain in the arse every day
It wasn’t until after I had launched the page that somebody kindly tweeted to say the video didn’t work in Firefox. Well no, it wouldn’t would it because there’s no support for playing MP4, instead you need an OGG. Why does this bother me? Because Mozilla are the only people wasting their time with the format. There is an ideal stack I know but at the same time – make it accessible and easy for anyone to create content yeah?
Even HTML5 Video isn’t responsive
It’s true! Pretty bummed, I’ve discovered that even though you can set width to 100% like with images to get video to scale into its container and allow more liquid layout it falls apart if the video doesn’t get going straight away. Why? Because your poster image needs to have the desired height otherwise all hell breaks loose, particularly in Internet Explorer.