ÉDINTV

Client work 2008–09.

Close-up of ÉDINTV’s website top banner.

Close-up of ÉDINTV’s website top banner.

ÉDINTV (http://edin.tv) is the online video archive of talks given a the School of industrial design of the Université de Montréal. We basically wanted to create a (much) smaller-scale TED-like website.

In May of 2008, Luc Courchesne, then director of the School, offered me to work on building a website with a double purpose. On the one hand, the objective was to build a proper archive of the great talks that were given at the School and to share these talks with the rest of the world. On the other hand, this site could serve more or less as a marketing tool for the school (both to attract other speakers and to attract new students).

I was heavily involved with virtually every bit of data that is on the website: from coding the website to creating the graphic layout to composing a little jingle that accompanies the introductory video animation.

The website

ÉDINTV website screen-shot

ÉDINTV website screen-shot (24/08/2009).

The layout

As my first big (anyway, for me) web design contract—meaning that I would have to create the graphics and the coding—I tried to keep the graphics quite simple and straightforward. The main navigation is situated on the right and depending on the nature of the page, either a sub-menu is positioned towards the right (video and bio pages), or towards the left (home, theme, and conference pages).

Below are a few example web pages.

‘Video’ page.

‘Biography’ page.

‘Theme’ page.

Coding

I coded everything using HTML, CSS and the Smarty template engine. I also designed a custom ‘skin’ for the video player.

Opening credits video animation and its sound theme

For the videos that would be on the website, I figured that a short opening credits animation was necessary to introduce all ÉDINTV videos for various reasons. One being that it would create a strong graphical symbiosis between the various elements that are comprised on the website. Also, since we upload the videos on iTunes U, it simply gives them a stronger and unified visual language.

Designing a jingle

Since an opening credits video aniation isn’t as interesting without a sound theme than with one, I figured that I would try my hand at being a musician (that is, typing notes with my laptop keyboard in GarageBand). I tried several ‘jingles’ (some of which were downright spooky) and came up with a little bass riff that, well, does the job. (You can hear it playing along with the video two paragraphs above.)

The videos

I was also the one in charge of capturing, editing and compressing the videos. To this day (August 2009), a total 22 talks are online. Big thanks to Camille Moussette for the compression settings (and web coding!) advice and to the Umeå Institute of Design for letting me use the Mac Pro to compress the videos in the Interaction Lab.

The logo

ÉDINTV logo

The final version of the ÉDINTV logo.

Since ÉDINTV is entirely about video, the visual language that the website requires is one that needs to be sober. Likewise, the logo needed to be visually ‘quiet’.

So the logo is quite simply a typeface used in two different cuts so that the words ÉDIN (short for École de design industriel) and TV are visually separated.

The flyers

I designed almost* all the flyers on the website. Designing these is usually one of the most fun parts of the work I do for ÉDINTV. I give myself no more than 5 minutes to design and output the images that appear on the website. Since they were always an ‘extra’ (as in not in my initial mandate), I always treated them as small design exercises. The first idea I get, I do.

Below are a few flyers.

As one can observe, there is no visual correlation—or any commonness in the graphic and typographic treatments—in the flyers above. Just rapid experimentation in the hope of creating compelling visuals to accompany the texts.

*Except the ones for the Voices of design, and DESCO 3 conferences. Furthermore, the design of the flyer for Bill Buxton was directly derived from the poster of the conference (which was done by someone else).

Writing

I wrote virtually all the texts that are on the website—from the bios of the speakers (sometimes research ain’t that easy!) to the news snippets on the homepage.

Ending words

It was a true blast and incredible learning experience to work on the ÉDINTV website and this for numerous reasons—the main being that I had total creative freedom to do whatever I thought would be most suitable for the School to have as an video archival website.

I thank Luc Courchesne and the School of industrial design very dearly for trusting me in doing this beautiful project.