WEB DIRECTIONS TITLE SEQUENCE.

ENCAPSULATE THE CREATIVITY AND DIVERSITY OF DIGITAL NATIVES.

THE BRIEF

GREAT WORK IS RARELY THE RESULT OF A SINGLE PERSON.

INSIGHT

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.

IDEA

THE PEOPLE BEHIND THE PIXELS.

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.

PROCESS

PROCESS

CONCEPT STILLS

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

HOW WE DID IT TECHNOLOGY

WEBGL

HOW WE DID IT TECHNOLOGY

CANVAS

HTML/CSS3HOW WE DID IT TECHNOLOGY

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.

THE INVISIBLE ART

IN THE WORLD OF FILM, TIMING IS EVERYTHING. BUT, IN THE WORLD OF JAVASCRIPT, TIMING ISNT PERFECT.

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

MUSIC!

WERKIN

WERKIN

SNEAK PEEK

WHATS NEXT?

SEE THE FULL ANIMATION AT... PEOPLEBEHINDTHEPIXELS.COM

THE TEAM

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