Above Transition from the homepage to a whale’s page is a wave, which was hand-drawn by
one of Red Collar’s designersHow we built
homepage is amazing! How did you
come up with that idea and how
difficult was it to implement?
One of the main rules for this project
was to ensure we made use of the
insights and practices that different
team members already had, in order to
aid coordination between the specialists
within the tight timeline.
One of the developers had a slider that
resembled a wave (or, as many people
perceive it, a periscope). So we decided to
work with that to create a sense of huge
ocean waves: a phenomenon that draws
in and mixes together everything that
stands in its way.
One of biggest challenges was to
make the scrolling of these images
seamless. To achieve this, we used the
displacement map effect: the edges of
the pictures are blurred and they flow
along with the slides.
What technologies did you use to build
the site and what were the biggest
technical challenges overall?
One of the main tasks when you are
working on any website is to optimise it
to the fullest so that it runs really fast
on any device. To help achieve this aim,
we used modern image formats such as
WebP: this meant that the images would
get compressed without suffering any
loss in quality.There’s also background loading of
media resources and transitions between
pages. To ease the browser load, we
transferred the animations to HTML5
Canvas: volatile SVG animations are
heavy to render.