This animation originally inspired the attendees of Web Directions 2014. It's a title film featuring all the conference's speakers, rendering in real time in your (Chrome or Firefox) browser. See it live at http://peoplebehindthepixels.com

1. WEB DIRECTIONS
TITLE SEQUENCE.

2. ENCAPSULATE THE
CREATIVITY AND DIVERSITY
OF DIGITAL NATIVES.
THE BRIEF

3. GREAT WORK IS
RARELY THE RESULT OF
A SINGLE PERSON.
INSIGHT

4. INSIGHT
It takes the combined and focused efforts of
many to create a great product or service.
The “many” are those who imagine, design,
create and build these digital products. Web
Directions brings together the individuals who
passionately labour over the tiny details and the
subtle interdependencies behind the scenes to
the forefront of the digital world.

5. IDEA
THE PEOPLE
BEHIND THE PIXELS.

6. HOW WE DID IT – CREATIVE DIRECTION
Using geometry as a look and feel and taking
inspiration from the Web Directions logo mark,
we visualise the ‘pixel,’ a representation of the
detail as the individual.
Each speaker redefines the ‘pixel’ according to
their area of expertise/profession, evolving the
original shape into playful geometric forms, but
always hinting at its original form - the element
that ultimately binds everything together in a
single purpose.

7. PROCESS

8. PROCESS

9. CONCEPT STILLS

10. As with all ill-defined technical endeavors,
you skip the documentation and jump to
‘Hello World.’
For the developers, this meant creating simple
proofs of concepts that could help inform the
designers and give us a chance to delve into the
technologies.
HELLO WORLD

11. HOW WE DID IT – TECHNOLOGY
WEBGL

12. HOW WE DID IT – TECHNOLOGY
CANVAS

13. HTML/CSS3
HOW WE DID IT – TECHNOLOGY

14. EMULATION VS ANIMATION
How do we represent the implicit dynamic nature
of animation? Do we create simulations, or do we
tween individual elements of each scene?
The solution lay in embracing both simulated
systems and scripted tweens. Combining these
techniques resulted in visuals that appear smooth
and realistic in motion, while still providing
developers with tremendous flexibility when
creating bigger and more complex sequences.

15. THE INVISIBLE ART
IN THE WORLD OF FILM,
TIMING IS EVERYTHING.
BUT, IN THE WORLD
OF JAVASCRIPT, TIMING
ISN’T PERFECT.

16. THE INVISIBLE ART
We took it upon ourselves to create a seamless
experience for the viewer. This requirement for a
precise timing mechanism lead to the exploration
of several aspects of timing in the browser.
JavaScript clock
CSS clock
Web Audio API clock

17. MUSIC!

18. WERKIN’

19. WERKIN’

20. SNEAK PEEK

21. WHAT’S NEXT?
SEE THE FULL ANIMATION AT...
PEOPLEBEHINDTHEPIXELS.COM

22. THE TEAM
Code & development: Michael Ngo | Daniel Creamer | Pete Rawlings
Design & Creative Direction: Melissa Baillache | David Brown
Music: Pete Rawlings