8 months ago



ANGELIC AIRPLANES DESIGNING FOR DREAMS “Every aspect of the website was about showing what the client wanted to communicate out into the world,” revealed Red Collar’s Creative Director Denis Lomov. “So even every animation we created was done and chosen for areason. For instance, all the texts appear on eachscreen with amovement that is reminiscent ofhowanidea comes to mind. We wanted to create a special atmosphere on the site sowepaid considerable attention to all the animations and sounds. Suchas the sound of rustling paper making the action more immersive while making it more realistic, and the background melody helping to evoke the feeling ofimportance around the moment when a dream is being launched. We chose gold and a deep blue colour that was intended to be representative of a boundless space for opportunities. We then created all the content ourselves from training and performing airplane folding gestures, buying blue cardboard, applying golden body paint and capturing more than 1,500 shots for stop-motion video.” though we are assured no amount of that particular product was used Goldfinger-style to makeup the star of this latest URL! Intrigued? Well read on to discover how the story of inculerate. “THE MAIN QUESTION WAS HOW TO EMPHASISE THAT THE COMPANY INVESTS IN ANY PERSON INDEPENDENTLY OF GENDER, NATIONALITY, SEXUAL IDENTITY” com ‘unfolded’ to launch an angelic website worthy of investment. TAKING FLIGHT If you don’t already know them, Red Collar are an exciting digital agency from Voronezh, Russia, with a keen sense of the unique and innovative. Recognised by a passionate attitude and an impressive list of industry awards, the team insist on a principle of helping to make a client’s wishes come true. “Creative vision, technology and digital experience are the main principals of our agency, so it’s important for us to stay ahead of market strategies, technologies and creativity. Design and front-end development are our strength and so that’s why in every project you can see exclusive design and interesting decisions of front-end development.” These guys love what they do and the process of the work involved, and this enthusiasm was undoubtedly what drew Inculerate to a Soviet solution. “We always start think about the main idea of the website just after the contract is signed,” begins Creative Director Denis Lomov when explaining perceptions of Inculerate’s requirements. “The main question was how to emphasise that the company invests in any person independently of gender, nationality, sexual identity and so on. That was really important along with an insistence they didn’t want a classic investment website.” What followed was a gathering of Red Collar’s managers, designers and front-end developers to establish what that meant and brainstorm a fundamental concept right away. “Lots of ideas came to our mind but after a while we came up with an idea of an airplane to represent the kinds of startup businesses that Inculerate support. The great thing here was that the client absolutely trusted in us and were willing to let us create whatever we wanted.” 28 __________________________________________design diary

ANGELIC AIRPLANES INTO THE FOLD So the core idea that underpins the finished site was established early and very much from all that initial creative brainstorming. This work in idea generation was however also informed by some competitor analysis that confirmed certain things that the client wanted to avoid. “We came through dozens of sites looking for good solutions,” confirms Lomov. “And after that we realised that all the investment websites are absolutely similar. Given that the client had already said they didn’t want to have a classic investment website, we centred around the take-off theme most enthusiastically.” The freedom Red Collar had to pursue this direction was aided by an admirably loose reign from Inculerate, who encouraged the team to go its own way throughout the project. Such an open attitude was made even more refreshing given the long-distance proximity between client and agency – an international relationship that hasn’t always been so trusting. “After the brief our Junior Designer made sketches and we showed them to our client,” continues Lomov. “It’s important to say that the company is from the USA and we’re in Russia, but in spite of different state of mind we managed to establish a very good and trusting relationship. They trusted in our professionalism and let us create at our discretion. They liked our idea and so we started to implement sketches into a real website. On every stage of design and front-end development we presented what we did and the client was really excited.” That front-end work would involve some inventive animation work, with lots of attention paid to creating an atmosphere with the visuals and sound too. Visitors to the finished site today will immediately appreciate the dedication to an idea, the choice of colours and the stop-motion gestures all performed lovingly by the team. HOVER CRAFTING The front-end development of the site was all written in PixiJS with the images and animations etc rendered onto Canvas. This approach consciously ensures that the content is displayed using the fastest and most flexible 2D rendering of WebGL while ensuring consistency across devices. “PixiJS allows us to make cross-platform sites that open on almost any device and browser, so the site is 100% optimised for all these types of devices,” Lomov confirms. The main interaction with the site of course happens via an interactive “THE FRONT-END DEVELOPMENT OF THE SITE WAS ALL WRITTEN IN PIXIJS WITH THE IMAGES AND ANIMATIONS ETC RENDERED ONTO CANVAS” slider, dragging a point on the screen to symbolise the ‘do-it-yourself’ effort associated with a startup. This makes the whole site more like an interactive story; in a few steps a paper plane is folded and launched like a business. “We have thought out all the details to make the UI most effective,” says Lomov. “When you hover the cursor to the start point it sticks to the element like a magnet because of a 60-pixel invisible hover zone around the starting point. To not confuse the user we created a ‘running’ light spot on the guideline in order to direct visitor’s interaction. The stop-motion shots automatically play thanks to TweenMax (GSAP) technology ABOVE: No red collars and no trousers for a few members of the team design diary _________________________________________29