Top Cytora’s existing brand identity dictated the project’s isometric style
Above A simple, story-based narrative was used to explain the complicated subject matterHow we built
elements without diluting the messaging
behind it.
The site has a distinctive isometric
style with lots of individual buildings;
how much work went into creating all
of this?
BW: We were lucky in that Cytora already
had a comprehensive brand identity
created by Pentagram. The blocks are
the primary graphic device so using
isometric projection was a no-brainer.
While we needed to further develop the
illustration style to tell the story, we
tried to keep it as true to the original
positioning as possible.
PB: All of the illustrations were drawn
in Adobe Illustrator – I used the SSR
technique and an isometric grid to keep
everything nicely aligned, with subtle
gradients and lighting to add depth.
Artworking this isometric style took up a
lot of the design time but once we had a
system in place it was relatively painless
to roll out assets.
Animation is key to explaining Cytora’s
work effectively. How did you go about
making it?
CB: We prototyped a large number of
animations within a small boilerplate
environment, which enabled us to iterate
quickly. This also helped us to figure out
what would be technically feasible within
the timeline of the project. To ensure
we could time/control the animations
successfully, we wrote a small wrapper
on top of the anime.js library. This has
the concept of ‘scenes’, which would
enable us to queue and link sets of
animations together and then trigger
them on demand.
What technologies are running the site?
CB: The site is built as a single-page
app using React for the interface and
bundled with webpack. We used PixiJS
heavily for the rendering of the isometric
scenes. This gave us a large performance
boost thanks to the built-in WebGL
renderer. Some of the texture caching
and spritesheet features came in handy
when trying to keep the site at 60fps
across all devices. We had to extend some
of the default PixiJS classes to give us
more control when it came to animating
specific object attributes.Tell us a bit about testing. Did it
uncover any major issues?
CB: We had to regularly test across all
of the target browsers, as each have
their own performance quirks. The most
interesting was mobile, as there is the
danger the performance can decrease
when rendering to multiple canvas
elements while the user is scrolling DOM
content over the top. We had to be careful
when adding the scroll feedback and
ensure that handlers were appropriatelythrottled and calculations were only
performed when necessary.Did you learn any useful lessons during
this build?
CB: Many! One was how handling scroll
events across different device types
takes some tweaking. We used a useful
library called lethargy to be able to
differentiate inertia scrolling on macOS
and touch devices. We also improved our
asset pipeline by integrating tools such
as imagemin as part of the webpack build
process. This allowed us to easily iterate
and update any of the graphics within
the project while minimising file size.