Paper Planes by Active Theory 19 DEVELOPER
Total Page:16
File Type:pdf, Size:1020Kb
No designers were hurt in the making of this book. In collaboration with: We have many faces. We are the THIS EBOOK UNCOVERS recognition and prestige given to your TASTEBUD TINGLING website for your hard work and creativity, we are the expert jury that scores your INTERACTIVE ILLUSTRATIONS projects, we are the blog featuring the MADE WITH WEBGL latest on design and development, we are SHADERS, ARTWORK MAKING the inspiring conferences uniting the best of the digital industry in iconic cities all WEB AUDIO APIS, HIGHLY over the world. CONVERTING ECOMMERCE LOOKBOOKS, GLITCHY WEBGL We are Awwwards. Never stop evolving. The following case studies are true BUBBLES, UI AND THREE.JS stories. They reveal the secrets and steps SCENES RENDERED AS PIXI. taken by top digital agencies to create JS TEXTURE IN THE CANVAS, some of the most unique websites of the year. Be warned, what you are about to AND GLOBALLY CONNECTED witness may severely inspire you. MULTI-DEVICE EXPERIENCES. Protest Sportswear By Build in Amsterdam 06 ECOMMERCE Paper Planes By Active Theory 19 DEVELOPER Cavalier: Conqueror of Excellence By Your Majesty 30 EXPERIMENTAL KIKK Festival 2016 By Dogstudio 40 USER’S CHOICE Falter Inferno By Wild 45 SITE OF THE YEAR Sound in Color By Resn 52 AGENCY Conference DIGITAL THINKERS CONF. LOS ANGELES JUNE 1 - 2 Join top tech and design agencies to discover the future of the web, make inspiring connections and immerse yourself in the best talent of the digital design community. E-commerce Site of the Year 2016 Protest ProtestSportswear Build in Amsterdam is an award winning design Sportswearand development shop. Build in Amsterdam As our name implies, we love to build things. Simple things. Beautiful things. Crazy things. Intuitive things. Things that don’t exist yet. Things that make even the most cynical, seen-it- before people say “hey that’s pretty cool”. We make things 100% tailored for the project at hand. We dig deep to build things that are actually useful instead of things that just lay there and look pretty. We build these things because we love to build. Build in Amsterdam was founded by Tim Weers and myself, two advertising veterans on a mission to close the gap between branding & eCommerce. We work in small teams of passionate builders — designers, developers, writers and strategists — to create award- winning work for both local and international brands. At their annual award ceremony, Awwwards rewards the talent and effort of the best web developers, designers and agencies in the world. In this year’s edition, early February, Build in Amsterdam won the prestigious award for eCommerce Site of the Year, for Protest Sportswear. Build in Amsterdam’s Creative Director Daan Klaver explains the ins and outs of this case. Introduction Sportswear brand Protest asked us to create a site that would bridge the gap between story and store. They wanted to combine an immersive brand experience with an incredible eCommerce platform. Woocommerce and Wordpress We prefer working with Woocommerce and Wordpress, because they enable the combination of storytelling and eCommerce in one user friendly CMS system. Furthermore it’s an open source platform, giving our clients the freedom to choose another agency along the line. We want our clients to stay with us because they want to, not because they have to. An example of a product detail page Concept: Shoppable Lookbook Every aspect of the website was built for conversion. Therefore we turned the entire website into one big shoppable lookbook. Whenever you see a campaign image, that image is clickable. Then the products in that image appear and can be placed in your shopping bag immediately. This innovative combination of branding and sales creates a seamless shopping experience in a highly converting eCommerce platform. Design Protest is an ‘affordable sportswear brand’. This implicates that the design should be qualitative, but accessible. We wanted the design to stand out from the competition, so where most fashion brands choose black and white, we went for color. You will find no black on the website, not even in text. The typo is inspired by the blue ball-pen ink that fills countless pages of travel journals, diaries and notebooks around the world. The simple aesthetic of handwritten notes reverberates in the blue texts and the highlighting captions (yellow marker) on the website. The key elements of the website are in modern, soft-toned colors, and for every product we used a unique background color, extracted from the image next to it. Social Wall To further this seamless experience, we created a Social Wall where visitors can see and shop the latest products straight from the Instagram overview. Team Riders Protest has a big group of top athletes, they call their team riders. On the “Team page” you find their favourite items, music, and action pics and clips. Once again; the action pics and videos are clickable and the products in them can be purchased directly. Animation To add to the seamless user experience, we integrated animation that is not only beautiful and intuitive, but at the same time very functional. On an eCommerce platform of this scale the use of animation is an absolute rarity. Animation throughout the entire platform Mix and Match Tool Choose a product and swipe your way to the perfect matching items, using our intuitive and fun-to- use tool. You can even Mix and Match on colours. And to make it more fun we added a Shuffle function. Choose your combination and shop it straight away Mobile Mobile is key for a good converting eCommerce platform. So for our mobile design we stuck to our shoppable lookbook concept, but we rethought every interactive element and focused on fast functionalities to make it feel like an app. The platform is fully responsive, for all phones and tablets. The Results Since of the launch of their new platform, Protest increased their online turnover by 150%. And that is what satisfies us the most about this project. Winning awards is absolutely fantastic, but improving the business success of our clients is the primary goal in every project we start. Developer Award of the Year 2016 Paper PaperPlanes Active Theory is a creative digital production studio based in Venice, California. Planes They focus on making polished and innovative digital experiences using web technology. Paper Planes started as a simple thought - “What if you could throw a paper plane from one screen to another?” After gradual work and brainstorming, we shared the idea with our friends at Droga5, who helped us bring it to the biggest possible stage: Google I/O 2016. The heart of our concept was to bring people together from all over the world, using the power of the web - an instant connection to one another by a simple visit to a website. Modern web technology, specifically JavaScript and WebGL, powered the experience on every screen. From the 50-foot screen on stage at I/O to the thousands of mobile devices in the crowd, one codebase was written which drastically reduced Fans simply visited a URL on their mobile device and were prompted to create their own plane by adding a stamp that is development time, allowed for more iteration, and increased pre-filled with their location. time available for polish and animation. Once a plane is created on mobile, a simple throwing gesture Launched publicly on Peace Day 2016, Paper Planes is available launches the plane into the virtual world. During the pre- on the web at paperplanes.world and can also be downloaded Keynote, attendees would immediately see their planes fly into as an Android app on the Google Play. the 50-foot screen on stage. Users at home or an I/O viewing party would see their planes fly into a desktop screen, browsed to the same URL with no syncing required. Introduction Paper Planes was featured at Google I/O 2016 on May 18th, Later, users could come back to the mobile site and see where 2016 as a pre-Keynote event, bringing together attendees and their planes were caught around the world. Each stamp on the outside viewers, in the 30 minutes leading up to Sundar Pichai plane read like a passport and a 3D earth highlighted flightpath taking the stage. and distance travelled. Besides making their own planes, users could gesture their Flocking phone like a net to catch a plane that had been thrown from As planes were thrown into our world, they began to flock elsewhere and pinch to open it, revealing where it had visited. together and fly around the Earth. In order to animate a large number of planes at once, a technique called Instanced Buffer Geometries was used, which allowed us to render thousands Look & Feel of planes with a single GPU draw command, manipulating each The aesthetic of paper planes aimed for a feeling of child- plane’s position on the GPU in shaders. like playfulness and relaxation. We used a blend of pink, blue Flocking is a complicated mathematical process that is tricky to and teal pastel colors to create a sky gradient that constantly changed during the experience. The earth was shaded with similar tones but we used specular lighting and a teal rim glow to help distinguish it from the background. The earth and sky were a constant mixing and changing pair that needed to look good regardless of the earth’s rotation or sky hue. Taking advantage of the strong graphics card, we polished the big screen rendering with a few extra details such as gentle performantly implement in code. Two techniques were tested: first, computing the entire flocking simulation in a number of shaders, waves on the ocean by moving each vertex along the face of the running on the GPU, and second, creating a simulation on the CPU Earth’s sphere using polar coordinate math.