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