狠狠撸

狠狠撸Share a Scribd company logo

Web Directions 2014 Title Sequence

?
?
Tim Buesing
Tim Buesing

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 of 22
Download to read offline
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/CSS3 HOW 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 ISN’T 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!
奥贰搁碍滨狈’
奥贰搁碍滨狈’
SNEAK PEEK
WHAT’S 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

More Related Content

Web Directions 2014 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.
  • 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.
  • 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
  • 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