The ANDY is an international award for advertising creativities, recognizing and encouraging craftsmanship within the industry.
Its campaign website, nicknamed "The Best Web Experience", is a continuous work of art, encouraging the public even beyond the creative community to include their own personal touches through video, photos, music, and more. By its very nature, the site will become perfected and event more interactive as time goes on.
At Wieden+Kennedy, my mission was to develop the creative concept for the 2016 ANDY Awards' campaign website and produce it with relevant technologies covering both front- and back-end developments.
Technology
JavaScript, WebGL, Node.js, WebSocket, MongoDB, Amazon Web Services
Framework/Libraries
React.js, jQuery, GSAP, Express.js, Socket.IO, Mongoose, Compass, Susy
Team
User Experience Lead - Kate Bauer
Art Director - Andre Poli
Prana is an LED installation interactive art communicating with human’s breath. At B-REEL, I owned the privilege to be appointed as the lead developer for the custom software of the experience.
The software development of Prana covers web front-end, server-side programming for the LED controller, which translates stateful animation scripts to physical illumination of 13,000 LED lights. As unique as the concept is, Prana also integrated Xethru hardware, a non-contact breathing monitor designed for chest-movement tracking.
Technology
JavaScript, WebGL, DSP, Node.js, WebSocket
Framework/Libraries
Google Closure, Three.js, GSAP, Socket.IO, FadeCandy LED Controller
Team
Technology Director - Eric Heaton
Creative Director - Mike Potter
Developer - Charlie Clark
Project Lens is a pro bono work conceptualized and prototyped at Wieden+Kennedy. The idea was to develop a learning tool about the brands the agency works with through an immersive experience that attracts people and shows them various perspectives and brand insights.
Technology
HTML5, JavaScript, WebGL, PHP
Framework/Libraries
React.js, Three.js, Hammer.js, Traer.js, GSAP
Team
User Experience Designer - Mynseok Kang
Art Director - Andre Poli
Motion Graphics Designer - Eden Weingart
Feng Shui Real-Time is an educational web game uncovering several useful tips of feng shui — a mysterious oriental philosophy people use to improve their living space.
The user plays pretending to be a feng shui advisor. He visits two households and discovers the feng shui-related problems in their room design. The user is challenged by a series of small interactions to determine how to fix them. Each time he's correct, he’s awarded a short read about the solution he arrived at, which he can share through social networks.
Additional credit goes to Grace Fan, who led the research and design. From start to finish, it was a refreshing process involving the study of feng shui and extracting what pieces would be suitable for the game. Our team of two is responsible for the entire visual design, modeling, texturing, copywriting, and 3D game programming.
Technology
HTML5, CSS, JavaScript, WebGL
Framework/Libraries
Google Closure Tools, Three.js, Howler.js, GSAP
Design Tools
Photoshop, Sketch, Blender, After Effects
Team
UX, Visual Design, 3D Design - Grace Fan
I'm always keen on exploring the correlation between sounds and visual. And I love to see creative visualizations for sounds resonating with listeners’ emotions.
The Hsin-Lei portfolio website is a moody online listening experience for her artwork, portrayed primarily photographically. The site has an unusual navigation system for her albums mimicking the act of flipping through gramophone records.
With Craft CMS, he composer found uploading hundreds of songs and infographics easy. I'm also fond of the tight integration between the CraftCMS back-end and the HTML5 front-end I designed and developed.
Technology
HTML5, CSS, JavaScript, WebGL, MySQL, PHP
Framework/Libraries
Google Closure, Pixi.js, GSAP, Compass, CraftCMS, Twig
Design tools
Photoshop, Sketch, After Effects
Team
UX Design - Grace Fan
Photography - Luo Lao
The Motorola RAZR and RAZR i smartphone series required a campaign website. It was conceptualized around the idea of showing key features of the new Android OS shipped with RAZR at different times of day.
Technology
HTML5, CSS, JavaScript
Framework/Libraries
Google Closure Tools, Zynga Scroller, GSAP, Compass
Team
UX, Visual Design - Claudio Guglieri
Developer - Henrik Porseland
Rhizome is an online digital art archive where new-media artists exhibit their work. At Wieden+Kennedy, I worked with the studio team to develop an artistic, digital-oriented style guide for Rhizome in order to promote its brand identity.
Technology
HTML5, CSS, JavaScript, WebGL, Web Workers
Framework/Libraries
jQuery, GSAP, Parallel.js, Pixi.js, Compass, Susy
Team
Art Director - Serifcan Ozcan
Styleguide Design - Maja Cule
Visual Design - Priscilla Gomez
A flying-through-clouds simulation telling the story of the Smartwater® product.
Inspired by the way nature purifies water (like in a cloud), Smartwater® advertising emphasizes on its purification process. Conceptualized with the use of clouds, the web experience idea first came from a CSS 3D experiment for clouds simulation. After several prototypes re-implementing the same visual effects using Canvas or WebGL, I discovered the possibilities of making it a storytelling experience.
Awards
ADOBE THE CUTTING EDGE PROJECT OF THE WEEK
Technology
HTML5, CSS, JavaScript, WebGL
Framework/Libraries
Google Closure, Three.js, Pixi.js, GSAP, Compass
Team
Creative Director - Oscar Tillman
Art Director - Irena Milev
Visual Design - Mathias Eriksson
Developer - Jaume Sanchez
Developer - Roger Pala
Story of Send describes a Gmail message’s journey from sender to recipient through Google’s data centers. Some of the key perspectives illustrated are security measures taken to guarantee the integrity of the message as well as the environmentally friendly technology the company used.
Awards
Technology
HTML5, CSS, SVG, JavaScript
Framework/Libraries
Google Closure, Google Swiffy
Team
Visual Design - Jessie Bustin
Developer - Henrik Porseland
Every year PNC Bank calculates the cost of Christmas by adding up the prices of the gifts in “The 12 Days of Christmas” carol — a fun, financial report called the "Christmas Price Index". In this educational scavenger hunt built with Google Street View, the user travels the world to track down the 12 gifts and determine their prices.
Awards
THE CUTTING EDGE PROJECT OF THE WEEK
Technology
HTML5, CSS, JavaScript
Framework/Libraries
Google Closure Tools, Create.js, GSAP, Google Maps StreetView API, Compass
Team
Creative Director - Oscar Tillman
Visual Designer - Jessie Bustin
Motion Designer - Emil Karlsson
