Loading ...

Responses by Tristan Cross, designer.

Background: The site is portfolio for the United Kingdom–based production studio Blink Industries, who has this really interesting twin specialization in animation and comedy. The production company makes such lovingly crafted and multifaceted work across a whole bunch of styles, and we really wanted the site to be simultaneously malleable enough to house all of its eclectic projects while also having a coherent tone and feel to it—one which would encapsulate the company ethos and spirit shared across its work.

Design core: The site is an imagined company “staff room” based on a drawing by Blink Industries’s creative director Elliot Dear. I modeled his scene in Blender to transform it into an interactive environment in the browser using WebGL.

The staff room functions as both a little snowglobe-esque diorama and as the site’s menu. From here, you can click a bunch of the elements—mostly computer terminals or screens of some kind, which lead to a Russian doll series of minisites, each of them with their own design and functionality, and largely inspired by obsolete tech we were fans of. There are a couple of nods to things like MS-DOS and other earlier operating systems as well as a section that looks like if Teletext launched a streaming platform. We were into the idea of situating Blink Industries’s projects in this weird, retrofuturist alternate reality, given its work spans stuff from the bleeding edge of contemporary animation to projects which have such respect for—and pay such reverence to—traditional techniques.

Elsewhere, there’s an About section that functions like an old RPG and a Jobs section that (in theory) has the same functionality as a text-based choose-your-own-adventure.

Challenges: I think the sheer volume of minisites was quite brain frying, in terms of keeping on top of asset creation, and also each section’s own peculiar quirks and things that needed to be entirely reworked for responsive screen sizes. The sprawling amount of stuff to keep track of meant I entered a kind of fugue mania at times, switching between spending far too long obsessing over details that represented only tiny portions of the overall site and then having to build each new section anew and from scratch, all with their own differing functionalities and behaviors. I hadn’t created anything on this scale of ambition before, so I learned a ton.

One particularly exasperating challenge was making the “Showreel” part of our 3-D environment—to be played on a machine with a working Vimeo player inside of it—which felt like it should have been eminently achievable but was actually a logistical nightmare. In order to work, the WebGL scene and the HTML containing the Vimeo player had to be on two different canvases, with the latter overlaid and positioned as though to appear embedded in the room. Despite numerous thwarted attempts, I couldn’t ever quite work out how to make them truly share the same environment, but the trick seems convincing enough. One day I will work it out, though, and I will become more powerful than ever.

Special navigational features: I wanted the user to be able to feel like they could click a section of the room, and have the camera (or viewport) fly into each screen or terminal, as if they were sneaking an opportunity to operate the machinery while it was left unmanned. Mostly, the attempt was to make it feel like there was a little universe of worlds to explore that hopefully feel like a laugh to delve into.

Technology: I used Blender for the 3-D modeling and then a combination of vanilla JS and three.js for the front end. Matt Megarry handled the lion’s share of the work on the back end, which was built in Heroku and had to be robust enough to accommodate all sorts of daft nonsense I insisted on building into the front end.

blinkindustries.tv

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In