Web_Designer_UK__May_2018

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