Schipol Airport's web app, which lets you send a virtual goodbye, achieves pixel perfection across multiple devices. Here's how it was made.
Schiphol Big Wave Goodbye is an online tool that allows users to wave a virtual goodbye to friends who are travelling through Amsterdam's Schiphol Airport.
It was developed for FHV BBDO and Schipol Airport by digital production agency MediaMonks, creative director Jeroen van der Meer, art director Marius Roosendaal and designer Elbert Niezen. The development team consisted of Robert Slootjes, Mient-Jan Stelling, Stuart van Beek and Arjan van Wijk.
"Everything was built in HTML and the latest scripting techniques to make sure the application functioned well across multiple platforms and devices," Roosendaal explains. "We developed a new feature for LESS, a dynamic stylesheet language for creating complex grid layouts, which we then released as an opensource download.
Everything was built in HTML and the latest scripting techniques
"We also used CSS3 techniques for animation effects like zoom and blur. Next to that we used HTML5 video, Typescript for generating the javascript code, RequireJS for loading the javascript files, and finally Grunt to build the project to a clean package."
The power of Photoshop
The team also used Photoshop extensively for the creation of the site, says Roosendaal. "Apart from drawing initial sketches on paper, Photoshop was used to create mood-boards to explore various art directions, setting up the initial grid, and finally the entire design," he explains.
"For this project specifically, the grid and guide options played a big part. The whole design was really about pixel-perfect consistency on about 50 different states and pages across multiple devices, so that definitely helped a lot.
"Everyone has their own way of working, but I work best with an oversized canvas, to create more freedom in moving stuff around. With Auto-Select Layer enabled, so not really having to fiddle around in your Layers panel, it can really enhance your workflow and effectiveness."
Liked this? Read these!
Our favourite web fonts - and they don't cost a penny
