Projects - Wilkinson.Graphics

Hijinx World

Henry Wilkinson — Mon, 17 Mar 2025 04:00:00 GMT

When 3D artist, animator, and girlfriend Liza Desyatkova mentioned to me that she wanted to make a magazine I was pretty immediately on board! I always love a good diversion from my usual problem space of tech, and any excuse to teach somebody about the importance of paragraph styles and margins is always a fun opportunity.

The idea for this spread came from Liza after she found an old post on my Instagram from a photography class I took in university. She figured it would be cool to turn on the Macintosh and display the table of contents on it. I did a lot of monitor comps on AMC’s Moonhaven and I keep a robust archive of my past work so hey, how hard could it be?

If there’s one thing I hate in movies and TV it’s poor attention to detail with regard to computer interfaces. For this one I loaded up MacPaint 1.5 in the Internet Archive’s emulator, typed out a text specimen of all the characters in the Chicago typeface, and took a screenshot at the original resolution to get the initial capture of the screen. The text was all manually typeset by moving the glyphs around in Affinity Photo — Chicago (the bitmap system font used by the Macintosh) didn’t have kerning tables as we know and enjoy them today — which was a somewhat laborious but ultimately rewarding process. After compositing the final screen into the original image with proper tube distortion, reflections, and chromatic aberration in Nuke I sent the final image to Liza so she could add the rest of the gradient elements along with her “hidden people” illustrations (which can be found throughout the magazine).

Before & after of the table of contents monitor comp. The black values aren’t 100% matched but sometimes you gotta fudge realism so it looks good when printed :)

Selected Magazine Bits

Liza profiled Dope Chief, a local artist from Hamilton Ontario. Dope was kind enough to let us hang out in his studio for a few days before printing to finish everything up!

NaN Serif A was used for article titles whereas Chivo was used for body text. NaN has an incredibly reasonable and very cool student bundle that allows for small-time commercial use of their fonts after graduating. If you’re currently in design school I highly recommend checking it out!

Greg "jREG" Guevara’s article on creativity

My article encouraging readers to create their own websites!

I’m fairly proud of everything we accomplished together and how far Liza has come with her layout skills since I met her and started giving her nitpicks. She did a ton of work to get this project out the door. In total we created seventeen spreads!

If you’re looking to pick up a copy for yourself, check out shop.hijinx.world.

Webrecorder

Henry Wilkinson — Thu, 31 Oct 2024 04:00:00 GMT

Over the past few years whenever I told somebody that I worked at a company that makes web archiving software, the next words out of their mouth were either: “What’s web archiving?” or (very rarely) “Wow! That’s amazing!” This experience summed up some of the challenges in branding the company: For a technical clued-in audience, web archiving software is pretty darn cool but for the rest of the planet it’s importance and utility is somewhat of a mystery.

When it became clear that we needed to upgrade our branding, my aim was to take the complex topic of “open source web archiving software” and make it look significantly more approachable.

Logos

Throughout the course of this project, I also served as Webrecorder’s UI/UX designer on Browsertrix: Webrecorder’s cloud-based web archiving platform. To get the ball rolling on the branding refresh, we contracted New York based designer Blake Duncanson to create some concept marks for all of Webrecorder’s actively developed user-facing software packages.

Blake was incredibly helpful and his work was instrumental in informing the direction we went with the rest of the marks. The ArchiveWeb.page, Browsertrix, and Browsertrix Crawler logos are pretty much entirely his concepts!

From left to right: ReplayWeb.page, Browsertrix, Browsertrix Crawler, and ArchiveWeb.page.

One of my top goals was that Webrecorder’s identifying marks should look like they belong to a cohesive set. To this end, I drew all of Webrecorder’s final app logos within a 96pt grid system, each using similar line weights, a 1pt corner radius to smooth out sharp points, and the same two-tone brand colours.

As with all good logo grids, sometimes you need to break them and optically adjust your graphics so they actually look correct!

For Browsertrix (top left), we wanted to represent organization and parallel compute while also referencing the web browser’s UI with a navigation bar at the top and a content area below. Browsertrix is an application that integrates all of Webrecorder’s other software in some fashion and therefore is the only one made up of smaller rounded shapes. It’s a bit different than the other marks, the grid adherence is mostly at intersection points, but as Webrecorder’s core revenue-generating product we wanted it to be distinct!

ArchiveWeb.page (top right) takes the form of the end of the user’s fingerprint as they manually operate the browser to collect archived material, along with the shape of an “A”. ReplayWeb.page (bottom left) places the global network of the internet inside the common “replay arrows” symbol. Browsertrix Crawler (bottom right) — Webrecorder’s command-line capture software that powers Browsertrix — places an eye inside a “C” for “crawler”!

App Icons

ArchiveWeb.page and ReplayWeb.page can both be installed as desktop applications and Browsertrix can be installed as a progressive web app. All of these needed app icons!

I modeled, lit, and rendered these in Blender, my 3D package of choice, but had to take a trip over to Plasticity for the ReplayWeb.page globe due to some deficiencies with Blender’s beveling algorithm.¹ Browsertrix’s goopy spherical connections were merged together with signed distance fields created using Blender’s geometry nodes!

Company Logo

Ilya really wanted to retain the existing arrow replay glyph from Webrecorder’s previous branding but I was initially pretty skeptical. It was difficult to fit into the square logo grid I had constructed that was working well for the other marks and I found the arrowheads challenging to balance on the top and bottom of the design.

After deciding to align the arrowheads at the 45° angle, the rest pretty much clicked into place! It felt good to land on a solution everyone liked after years of noodling around with different options and in the end retaining this element of Webrecorder’s identity was absolutely the right call.

Being the company logo instead of just another software package, Webrecorder's mark uses a doubled intersecting version of the logo grid and the same metrics as the other logos. The increased width helps distinguish it from the rest of the product marks.

A Note on Typography

We picked Elena Schneider’s Konsole as the organization’s primary display typeface. She says it’s still a work in progress, I say it looks pretty darn cool with vintage vibes, versatile width and weight axes, and lots of character.²

For body text we picked the tried and true Inter. Inter’s character set and OpenType features are hard to beat, it’s still my favourite neo-grotesque for UI. We used the ss07 squared punctuation stylistic set added in Inter’s 4.0 release to match Konsole’s square dots!

For monospaced text, we chose ArrowType’s Recursive: available as a monospaced (or not!) variable font with more going on than our display typeface! Recursive has a whopping four axes, though I typically made the most use of mono, which when set to 0.51, uses the monospaced character variants without actually being fully monospaced, a micro-typography bonus for legibility in specific scenarios where you want styling to match but don’t actually need characters to align in two dimensions! I wish more superfamilies would adopt this!

Colour

In addition to the cyan and green colours used in the two-tone logos, I created a full colour palette to be used across our site, apps, and other marketing material. This colour scale was mostly derived using Leonardo³ which provides a really great baseline and uses Oklch for for predictable “perceptual-like” colour interpolation. Webrecorder’s applications use colour semantically for warnings, errors, danger, success, and neutral states. It was important for us to retain cyan as a brand colour for theming our interfaces.

Want the values for yourself? Check em out in Webrecorder’s design system repo!

Illustrations

I can do a lot of things, but drawing isn’t my forte; fortunately I have talented friends! We worked with Toronto illustrator Alannah Astorquiza to create the characters and illustrated icons seen throughout the website. Alannah added the exact approachable feel we were looking for with a cast of cartoon characters to visually represent the “all” in “web archiving for all”.

Website

Prior to this website, Webrecorder’s web presence was somewhat scattered across multiple domains. Each site had a different structure, navigation between them wasn’t intuitive, and there was no overarching funnel for driving revenue. In addition to the brand redesign, we took this opportunity to overhaul all of our web content integrating all of Webrecorder’s tools, news, and educational resources into a single website with unified navigation. Emma, Sua, and I picked Astro for this site and jumped between Figma and prototyping with code where it made sense to do so.

Webrecorder makes web archiving software so hey, why not use it! Below you can browse an archive of what the site looked like as of my involvement.⁴

Web archive too small? Try making the archived embed full screen using the menu in the top right.

One thing that won’t work right now inside the archive above is, perhaps ironically, web archives! My favourite usage of them is on the 404 page where we redirect anything that might become lost over time to an archived copy hosted with Browsertrix.

A web archive of the old site embedded on the 404 page of the new site!

Closing Thoughts

Branding and web design work is business infrastructure: The up-front costs of time and effort pay off every time somebody reads a blog post or learns about your company for the first time. Memorable and distinct iconography helps customers (both existing and prospective) identify and retain information about your products. You can have the best software in your product segment, but it’s a lot less useful if nobody can remember what it’s called! If I have one regret with this project, its that we didn’t start it earlier. Fixing the structural problems and unifying Webrecorder’s content under one site immediately doubled our web traffic (partially due to redirects), and created a measurable inflection point for improving search result discovery.

Hindsight is 20/20 though and all things considered I’m incredibly proud of what myself and the rest of the team at Webrecorder was able to pull off with our rebrand. Webrecorder is a company that punches far above its weight class, both in the quality and quantity of software they produce relative to the size of the team. It was a very rewarding journey to be a part of, and I’m excited to see where they go next!

If you’re looking for an all-in-one platform for creating and managing web archives, check out Browsertrix. I worked on it, it’s pretty good!

At IIPC’s 2024 conference where we revealed some of these updated logos to the broader web archiving community I was asked many questions about the meaning of each of them and subsequently promised a detailed blog post about our processes. I’m publishing this case study a little later than I’d originally wanted, but hopefully it suffices! ↩︎
I have been waiting eagerly for Blender to adopt the straight-skeleton algorithm for beveling first announced at Blendercon in 2022. Turns out beveling polygons is hard… ↩︎
Pun intended :) ↩︎
Leonardo (as of 2024) is a mostly great tool but doesn’t entirely meet my needs. There is no way to lock in individual stops and interpolate between them. If you’ve found a tool that does this and interpolates using Oklch, please get in touch! ↩︎
I would love to see more web designers and developers implement web archives into their portfolios! Even if Webrecorder changes the site or it goes away entirely, I’ll still have this copy! For more information about embedding web archives into your own content, check out ReplayWeb.page’s embedding guide. ↩︎

What’s At Stake

Henry Wilkinson — Thu, 16 Jun 2022 04:00:00 GMT

“Hey! This project looks a little similar to something else you’ve already done Henry! What are you some kind of two-bit hack fraud that just capitalizes on your successes at the expense of personal growth??”

Well, I hope not… But I’d also like to think that I’ve learned a few new things over the last two years, and I was really excited to apply some of them when Hypha approached me with the general pitch of a retro-futuristic brand for their new video podcast series. Armed with a Nuke license and additional knowledge of obscure computer graphics hardware from the 1980s I set out to apply what I wish I knew in 2020 to the CG line art aesthetic — this time in proper 3D!

Concept

I began this project by creating a mood board of cassette futurism inspired images based on the project brief and initial call I had with Hypha. After the direction was wholeheartedly approved, I created some initial sketches and a rough animatic of the intro sequence.

"Hey! This kinda looks like the 'O' in the Cosmos logo! Maybe I should flip it and actually make that intentional..."

This crummy prototype was created as a proof of concept in about a day. I really like Mike Diva’s approach, of creating the crappiest pre-vis version as fast as possible to get things out of your head and test if they will work for real. Then move forward knowing that what you want to do will work or change it accordingly. The point being, don’t judge my sub-par drawings too hard. ;)

Final stills

Type

This project makes use of Jura and Vectrex. Vectrex was an obvious choice, it’s based on the characters from vector displays and is made entirely of mono-linear strokes making it a perfect fit for the rest of the CG line art elements. I can’t any take credit for finding it though, for that 100 points go tow my friend Valery Marier for pointing me in the right direction! Val is very cool and she knows her typefaces.

Jura is a slightly more technical choice. I wanted something similar to Eurostyle (the retro-fusturism classic) that looked like it could have lived on old electronic equipment. I also wanted a typeface that Hypha’s members could use without worrying too much about licensing issues. I’m a big believer in using boutique fonts for display purposes and you’ll get no complaints from me about compensating typeface designers for their work — unfortunately Hypha has no full time designer on staff who can coordinate licensing and so I have set up the organization to use Jura for all show related material that doesn’t consist of graphics that I’m making in order to mitigate licensing issues. That’s not to say I would have necessarily opted for another typeface had I not found Jura however, I think it’s aesthetically compatible and delivers a reasonable range of typesetting features! It also has an ampersand… Something that cannot be said for Vectrex. 🙃

Branding

While What’s At Stake was set with its funky Vectrex logotype, a bigger question remained for @CosmosGov which also needed a new coat of paint: How does one create a symbol that embodies the concept of “governance”?

I ended up drawing upon Cosmos’ voting system for proposals that change how the network operates. When voting on Cosmos proposals, stakeholders have the options of: Yes, No, Abstain, and No with Veto. While “No with Veto” is probably the most difficult option to create an icon out of, I think the other 3 are all reasonably recognizable among the crowd the mark is aimed at. The retro glowing line art aesthetic is used across both to tie them together.

Process, pipeline, and technical information

A while ago I switched from Maya to Blender as my primary 3D content creation application. That decision has since paid off immensely! One of my reasons for doing this was the amount of community created resources & tools that exist for Blender — the volume of which I haven’t seen matched by other packages (maybe Nuke?). Having these resources available as a one man operation is huge. $10 on Gumroad can save a lot of time.

This project made use of MRMO-CRT, a lovely looking CRT shader created by Stefan Bogdanovic. I’ve created shaders in Blender that replicate display technology before, but this one seemed to do a great job at mimicking most of the characteristics of CRTs, for the most part I recommend it highly! The one somewhat inconvenient issue posed by the version of the shader I used is that it makes use of Blender’s Shader to RGB node which only works in the Eevee render engine. All shots with the CRT in it were rendered in two passes, one of just the screen in Eevee, and another in Cycles with an emissive, reflective material that wasn’t visible to camera rays but was visible in bounce lighting to get the accurate reflections from the monitor.

This is also a notable project for me because it marks the first freelance job where none of the content has been created with an Adobe program. I’ve been mostly enjoying Serif’s Affinity suite and while there are some tools that I miss, I’ve largely been having a good time expanding my workflows with new programs and their different approaches.

Freestyle

I’m no stranger to line art in Blender. While working on Perfect Restaurant, Aiken and I switched our entire film to Blender’s new (at the time) Grease Pencil line art modifier which allowed for smooth, uniform lines to be drawn overtop our characters from the camera’s perspective. Grease Pencil is an excellent and powerful animation tool but part of what makes it great is that it draws the strokes as 3D objects in 3D space — exactly what the vector displays and early 3D line art graphics that I wanted to emulate didn’t do.

Blender’s line art shader also wasn’t what I was looking for. Like Grease Pencil it sets its line thickness in 3D, and it draws the triangulated mesh, not the quads (which IMO detracts from the line-art look but your mileage may vary).

On the other hand, Blender’s Freestyle render pass draws its lines in screen space meaning that line thickness is determined in pixels and by default its lines won’t get smaller with proper perspective as the camera moves away from objects. Neat! Some optimization was required for the light-speed effect as Freestyle seems to struggle when you give it too much geometry to look at. It’s also currently single-core bound. With those small caveats accounted for however, I was very happy with the results it produced.

Comparison of the image straight out of Blender's Freestyle render engine and the final composite. Stars were created in Nuke based on random noise

Everything I wanted to avoid

I hate being the guy who throws other people’s work under the bus, but unfortunately the logo for Edgar Wright’s Last Night In Soho is a perfect example of every possible issue I strive to avoid when creating images with high intensity glows.

There are three major mistakes here:

The actual glowing light pixels have an alpha associated with them. Light has no mass and photons cannot occlude objects, they can just hit the camera sensor and produce a brighter pixel than any photons coming from objects behind the emissive point light source. On this website the “glowing” PNG is composited overtop a white background but we can observe here that the glowing light appears darker than the background itself! Why? We’re adding more light to the scene!? PNG is actually a broken model here as it is incapable of encoding a pixel where RGB has a value but A does not. Other formats like EXR and TIFF do not suffer from this limitation and any pixels where RGB > 0 & A = 0 will be added to the values of any pixels composited behind instead of composited with an alpha over operation. TL;DR: PNG is incapable of encoding a glowing object correctly. In order to do this the “right” way on the web you would require a PNG of the solid objects and another image format set to the “plus” blend mode that just has the glow effect over black. This results in the glow actually looking darker than the light background of this website!
This was probably done in a program that deals with 8 or 16 bit integer pixels. The core of high intensity glowing objects is usually quite bright but sub 32 bit floating point colour is unfortunately incapable of rendering anything past its fixed intensity of 255 (white). 32 bit software however will let one blow past what is traditionally defined as “white” and enable the accurate high intensity core with physically plausible values. These high intensity linear light RGB values will then have to be compressed by a Display Rendering Transform to nicely fit into a colourspace and set of values that your monitor can display. This hasn’t been done with this image and as a result the glow effect looks more like a blur.
The “Notorious 6” colour clipping problem that is created due to graphics programs not being configured to nicely deal with high intensity RGB values and fail to blow them out to white as they become incredibly bright. More on this below.
As a bonus, the bottom left corner is cut off! Oof!

If you’re reading this Edgar, big fan of your work. This stuff is difficult (impossible with PNG) to get right! No hard feelings?

How I worked around these issues

After previous struggles with ACES and stumbling across some of its limitations I was pleased to have a chance to try out Troy Sobotka’s AgX config. As explained in Chris Brejon’s excellent article (linked above), digital RGB has a tendency to skew towards six hues: red, green, blue, cyan, magenta, and yellow. In most colour management workflows popular today, one cannot achieve a desirable “path to white” by simply increasing the values of a pixel, colours will often converge towards one of the aforementioned “Notorious 6” hues. Troy’s config attempts to mitigate this issue and in my humble opinion, does a great job of it!

sRGB (left) vs AGX BT.1886 (right). Note how crappy the high intensity coloured glowing buttons look with Nuke's default config!

This is specifically one part of my pipeline for creating these types of graphics that I think changed in a subtle but valuable way. If you view my past 2001 infographic project you may find that while the white lines look pretty good, the red and yellow lines look kind of clamped by their hues and look a bit like the red buttons on the left in the image above. This artifact is no longer present when using AgX and while that look may be desirable sometimes, it can also be achieved in AgX with saturation adjustments or by selecting one of Troy’s predetermined “looks”. The important distinction being that it’s now a creative choice and not a technological limit.

Music

Woah! You stuck around past the long-winded explanation end of post learning section! Here’s a bonus :)

Custom music wasn’t in the initial brief but I also wound up writing two original tracks for this project and re-purposing a third (Keep The Web Accessible) that I originally wrote for a different unreleased project. They’re short, synthy, and fun! Check em out below or download them for free on Bandcamp.

What's At Stake Original Soundtrack by Henry Wilkinson

Toronto Mesh

Henry Wilkinson — Tue, 20 Apr 2021 04:00:00 GMT

I’ve been involved with Toronto Mesh since 2017 and up until recently branding hasn’t been a terribly high priority. The same seems to be true for community networks in general, at first glance most of them don’t seem to have the same branding capabilities as their for-profit counterparts. Some of this is to be expected, after all community networks are defined by the people and technology they are composed of — perhaps designers aren’t drawn to them in the same ways that they aren’t typically drawn to the open-source community. As of 2021, most community networks and mesh-centric community groups do not have established sets of brand guidelines — at least not ones that are publicly available. With the creation of these my goal was to set a new standard for what outward-facing material from these organizations can look like and give further credibility to community networks overall.

Logo

For this brand I wanted to avoid any explicit references to the wifi logo which is the obvious first image that comes to mind when thinking of wireless networking. Toronto Mesh is seeking to build a community network, not just give away free wifi. The logo system comprises a typographic logotype as well as a logomark, both of which share the same overlapping circles with randomized colours inspired by the overlapping nature of mesh networks, dot matrix printers, and the many multifaceted community driven approaches to building networks in the commons. The logotype should be used wherever possible whereas the logomark should only be used in places that the full logo isn’t well suited for. Both logos can have their colours randomized on use for added variety.

While still making use of the same dot-matrix inspired aesthetic and colour palette, the logomark is significantly more abstract. It does contain a nifty easter egg however! When the absent spaces and filled circles are interpreted as binary (absent=0, filled=1) and converted to ASCII characters, the logomark actually spells “tomesh”. Neat!

Toronto Mesh Logomark

Dithering

From the beginning I wanted to use this project as an opportunity to investigate methods of conforming images to fit an organization’s branding. Lots of brands already do this with patterns, overlays, filters, and with duotone colour processes, but none of these approaches seemed to be the right fit for Toronto Mesh. Inspired by the dithered duotone treatment used by Low-tech Magazine’s solar powered website I decided to do a deep dive into dithering.

To create these images I worked with Cole Anthony Capilongo to define a standardized dithering process that can be applied to any input image with minimal creative adjustments needed. This process involves bayer matrix dithering with a 4 colour linearized greyscale palette to ensure that any sRGB encoded image can be filtered properly. If we were to dither the image directly with the coloured palette any image with colours that are close to the brand colours would become biased towards them, dithering with greyscale first and then replacing the palette with the desired brand colours as a post-process ensures that they are evenly spread throughout the image based on luminance alone.

Unfortunately no previous tool existed that could do all these steps within one program and I’m thankful that I was able to get Cole to build the colour palette replacement feature into Didder, his command-line image dithering application. I highly recommend that you check it out if you’re into this kind of image manipulation, it is by far the most advanced dithering program I’ve ever come across and it’s capable of much more than I’ve used it for here!

Additional details and a full description of how to accomplish this specific image filtering technique are available in the brand guidelines document, while instructions and commands for Didder are not present in this version a close read of the man pages should give you all the information you need to replicate the process! Note that you may need to adjust the strength of the Bayer matrix to achieve the results shown here, somewhere around 40–50% is usually about right.

Brand Guidelines & Typography

Every good brand is backed by a robust set of guidelines! This document covers everything from logo and colour usage to defined typesetting styles for titles. Being a community group based around open-source it only made sense for Toronto Mesh to use open-source typefaces! I selected Space Grotesk for titles and display use cases, and Inter for body copy (and pretty much everything else). Inter is quite a neutral choice on the surface but its large character set and great Opentype feature support makes it a compelling one… In my opinion anyways, there are certainly edgier fonts out there!

Colours are defined in a myriad of ways including both 8-bit sRGB and linearized floating-point sRGB. I’ve never come across other guidelines that do this and have had many scenarios working in applications that only accept linear values where I have wished that these just be made available officially. I firmly believe that designers should have minimal interactions with colourspace converters when implementing brand colours.

Download the full brand guidelines document for a more in-depth look!

Usage Examples

Toronto Mesh T-Shirt

Rebranded Twitter page & social content examples

Animated logotype

Future

Currently this project has not been implemented, I plan to update parts of this based on initial feedback from Toronto Mesh members and (assuming it gains widespread approval).

Mr. Robot Title Sequence

Henry Wilkinson — Wed, 18 Nov 2020 04:00:00 GMT

Concept

Sam Esmail’s Mr. Robot is among my favourite television dramas, not only because of the excellent story and standout cinematography, but also because of the accurate portrayal of hacking and computer operation. As a person who has grown up with a keen interest in computing I’ve always felt let down by its portrayal on television, hacking is usually treated as a means to an end plot device with little care given to its execution, technical accuracy, or feasibility — two person keyboard anyone? There is none of this nonsense in Mr. Robot! The show is designed around real tools, real vulnerabilities, and has actual security consultants give input on the various hacks built around the plot. While the show is definitely written with people who are familiar with computer security in mind don’t let that drive you away from it, everything is explained in clear language and you don’t need to know anything to understand the plot. In any case, I highly recommend watching Mr. Robot once you’re done looking at my portfolio!

Because of Mr. Robot’s focus on accuracy I wanted to create a title sequence that mirrored the show’s ethos. The command line interface is an obvious choice for a show about hacking and Kali Linux’s terminal makes many appearances in the show alongside Linux Mint. Each shot showcases a different program running in a terminal with the actor’s name integrated somewhere that makes sense. Where possible I tried to use command line programs that related to each actor’s character and their actions in the show: Martin Wallström (Tyrell Wellick) hacks an employee’s phone early on and his title has him writing a bootable .iso to an SD card, Gloria Reuben (Krista Gordon) is having her name be made into a wordlist used to check passwords against to crack them with Crunch, Christian Slater (Mr. Robot) is wiping data with Shred.

A Reddit commenter thought I was pretty cool for referencing Joey's Rejex mixtape here... Unfortunately I am a poser and haven't listened to much of his music, though from what I have heard it's pretty good stuff!

While I don’t use them in quite the same way the colours were taken directly from Kali Linux’s default terminal theme. Actor’s names are styled in red to separate their title from the rest of the text on screen. There are also a few easter-eggs hidden throughout the opening, all URLs and IP addresses are real websites set up by the production, see if you can find any!

Six title cards from Mr. Robot's first season

Mr. Robot doesn’t actually have a dedicated title sequence (which is partly the reason I chose it for this project) but it does have a rather distinct title card which I wanted to carry over into my sequence. The show usually keeps things pretty consistent with the title card, often using its timing for dramatic effect, but occasionally plays around with the format and type treatments to fit the episode.

Process, Pipeline, and Technical Information

This project has the most complicated pipeline I have created for myself so far and is my first experience working with OCIO and ACES. Does this project benefit from wide gamut support and the camera-matching features afforded by ACES? Probably not. Nonetheless, it was an interesting learning experience, even if everyone will only ever watch this on the web and the supposed delivery affordances of ACES aren’t really relevant here. This was also my first time editing footage in Olive, something I can’t recommend other people adopt just yet but sometimes it’s fun to be on the bleeding edge. For all the problems the program currently has (it’s in alpha!) it made colour management a breeze because of the native OCIO implementation — something that is notably missing in Premiere, my usual NLE of choice.

To begin I divided my audio track (which I also created drawing heavy inspiration from Mac Quayle’s original soundtrack) into 14 sections by bar, the same strategy I used on Sheridan Animation’s 2019 Anijam to ensure that each cut is timed to the beat. After translating the cut points from Logic Pro to Olive the real fun began!

Three stages of the same frame through After Effects, Blender, and Natron

For each shot I ran a program or command either on my MacBook or in a 2015 Kali Linux virtual machine. After saving the output to a text file and editing in the actor’s names, I re-animated each sequence in After Effects and exported the sequence to Blender where the camera movement and LCD effect were created. The LCD shader maps each pixel’s RGB values to an array of virtual emissive LCD pixels in order to generate the grid pattern and colour fringing you get when shooting computer monitors up close. Each render was then run through a post-process node graph in Natron for film grain, chromatic aberration, and lens distortion, and then exported and assembled Olive. The pixel sorting effect on the end title was the single shot made with Nuke using the excellent h_pixelsort gizmo by Mads Hagbarth Damsbo.

All things considered, this was quite a time-consuming process for every shot to go through but I think it was worth it! Along with the new experience of Olive this was also my first time working on a video project in Blender and I’m really loving the workflow and tools that it has to offer, if you’re reading this and you want to get into 3D or you’re thinking of switching to Blender I highly recommend giving it a go!

Passive Buildings Canada

Henry Wilkinson — Thu, 20 Aug 2020 04:00:00 GMT

Passive Buildings Canada is a Canadian non-profit focused on education and support of the Passive House sustainable building construction standard. During my time with the organization I created an updated brand with new logos, typefaces, and colours, as well as an overhauled website built with Wix’s Editor-X.

Brand

I was originally hired for the sole purpose of replacing Passive Buildings Canada’s website which was originally created with an aging platform that offered few opportunities for customization and future growth. The first problem I ran into with this process was the existing branding, it just wasn’t versatile enough for their use cases. Creating an emblem is fine but having it as your sole logo introduces legibility difficulties at small sizes and can be entirely unrecognizable when used at extremely small scales like in a favicon. The existing brand colours also didn’t meet my contrast standards over a white background (Fails APCA unless the text is gigantic).

Passive Buildings Canada's previous and new logomark

The new mark is bolder and features higher-contrast brand colours. It borrows from the original emblem in order to stay recognizable but updates the radiating maple leaf with better geometric alignment and thicker lines for improved legibility at smaller scales.

The rebrand features two new options with text to be used as space allows.

Passive Buildings Canada's new full and condensed lockups

Alongside the logo I created a brand pattern using HVAC related architectural plan symbols. Passive Buildings Canada mainly deals with architects, building suppliers, and engineers. While these symbols might not resonate at first glance with the general public, they should be instantly familiar among Passive Buildings Canada’s core demographic. This pattern can be used as a background fill pretty much anywhere to add an extra branded element that is unique to Passive Buildings Canada.

Passive Buildings Canada's new branding as seen on their Twitter profile

Website

Whereas the previous website was largely just a list of members, Passive Buildings Canada’s new website puts more emphasis on member engagement and education. Existing members now have access to a forum and new users actually get to learn a little bit about passive house construction right on the homepage (something that was curiously missing from the previous website).

Passive Buildings Canada’s previous website was built using a web platform called Brilliant Directories. While the system is far from its namesake it does accomplish the goal of letting people pay to be listed on a website. Wix unfortunately does not offer a built-in feature that replicates this function and seeing as it was a previous membership perk it would be unreasonable to not bring that over to the new website. Using Wix’s JavaScript API we were able to create a system that worked alongside Wix’s form submission tools to check if membership was active before enabling member’s profiles on the “Find a Pro” page shown below.

Gripes & Shortcomings

While I am satisfied with my final results overall, I would not use Editor-X again unless it seriously improves in every area. I constantly ran into roadblocks with both their layout tools, JavaScript API, and styling abilities — as of 2021 you still cannot add text-shadow to text or manually set the object-fit mode of images. Every single graphical website builder I have ever used has held me back in some way and I find them all frustrating compared to writing my own markup and CSS. Editor-X is especially terrible in this regard, it was chosen by the organization solely for its easy CMS management (once the website is built anyways) and specific site membership perk systems.

To Wix’s credit, their new editor is… well, still very new. At the time of creating this site it was still officially in beta! Normally I wouldn’t use beta software to actually run production websites but seeing as their original editor has no responsive design support and will likely be deprecated at some point in the future with Editor-X becoming the new default, I think it was the right choice for future proofing. I hope it evolves quickly and catches up with the competition!

In the meantime, if you don’t need Wix’s other features and you’re looking to make a website graphically Webflow would be my recommendation as of posting. They don’t let you do everything with their tools but at least they allow you to work around them with custom code where required and their editor is quite a reasonable front-end for styling elements.

2001: A Rundown

Henry Wilkinson — Sat, 11 Apr 2020 04:00:00 GMT

When most people watch 2001 for the first time they often walk away from it saying things like “that movie confused the hell out of me”, “why are the first 20 minutes of the film just full of monkeys?” and “what was up with the giant space baby at the end?”. While this two part infographic doesn’t answer ALL of those questions hopefully it helps make things just a little bit clearer! ;)

2001 made a lot of predictions about the future but in my opinion one of the most forward thinking aspects of the film was how computer interfaces were imagined. While my infographic does not match the style of most of the interfaces in the film, I wanted to appropriate the monolinear line-art aesthetic of early computer graphics. Inspired by Star Wars’ Death Star plans presentation, the dish model in 2001, and the comfortable happy glow of CRT monitors, I came up with this process. It’s by no means an accurate re-creation but I still think it gets the point across!

If you’re actually wondering what the deal is with the baby at the end of the movie (spoilers for a movie from 1968) here’s the answer. After commander Bowman grows old in an alien zoo he is visited by a monolith — the large jet black slabs that have played a part in humanity’s evolution granting us the ability to use tools and such. As he dies the monoliths allow him to be re-incarnated into a being known as “the star child”, a god-like figure which represents the next evolution of humanity. The final shot shows this freaky looking baby in space looking down upon Earth.

I didn’t write the movie man, I just think the space stuff looks neat.

Process

This was my first project using Natron, an open source node-based compositing program. Illustrator’s appearance panel is great but it doesn’t offer you the same level of control when applying effects that I’ve come to love with Nuke and Natron’s respective node-based workflows. Because Natron works only with 32-bit colour it allowed me to achieve compositing results that cannot be done in Illustrator due to its limited 8 bit working space—specifically the exponential glows—as well as other effects that just aren’t built into the program like accurate looking film grain.

The node graph for this project — pretty simple! Node-based compositing scripts can get a lot more complex.

The left side consists of everything that was exported from Illustrator, the monitor bezel was made in Maya, everything else was created with Natron using the node graph above.

The great thing about node-based compositing programs is that the effects you apply to your image are (largely) separate from the input resolution. Vector graphics are great because they can be scaled to any resolution, similarly a procedural node-based workflow allows for the input resolution to be changed with only minor tweaks to the node-graph making it a decent companion to vector-based software. Pretty neat eh?

In the future creating an accurate CRT filtering process in Natron is something I’m absolutely interested in doing. Currently it’s blocked by a few software limitations however… If that sounds like something you were hoping to find in this post you may be interested in FFCRT.

Vyper

Henry Wilkinson — Wed, 20 Jun 2018 04:00:00 GMT

Vyper is a smart contract programming language that targets the Ethereum Virtual Machine, it offers an alternative to Solidity — the current most popular language for writing smart contracts. The language is based on Python and aims to be secure by design, easy to audit, and easily human readable. More information about Vyper can be found on Vyper’s GitHub page or at vyper.readthedocs.io.

Ethereum’s core features (as of 2014) have an existing set of logos for Solidity, Swarm, and of course Ethereum itself. All are composed of layered triangles with varying levels of opacity.

Ethereum's existing brand assets as of 2014

Concept

From the beginning I knew I wanted to keep the shape language of the existing Ethereum logos. This serves the dual purpose of integrate Vyper into the current landscape of Ethereum graphics as well as ensuring that it can be updated along with the rest as the project progresses. Luckily the letter V and triangles work well together!

Many other proposed logos went for more literal snake representations. I took inspiration from snake fangs for the shallow crotch of the V, as well as scales for the rest of the shape and shading. The result is a snake-themed logo for a snake-themed language!

Vyper's new logo

The future

Swarm has since broken off to become its own own organization and Ethereum’s other branding has received a refresh. While Vyper still uses this logo as of publishing, I would hope that it can be updated in a similar fashion to Solidity and the Ethereum Foundation’s branding with the core shape remaining the same and the styling getting an update.

Test Bench Equipment

Henry Wilkinson — Sun, 25 Mar 2018 04:00:00 GMT

These vintage test bench devices were modeled in Maya and rendered with Renderman 21, all the text was re-created in Adobe Illustrator based on the original faceplate designs. The renders aim to visualize what these devices looked like right as they rolled off the assembly line in an unrealistic state of perfection.

Radiometer Copenhagen FM/AM Signal Generator

HP 5245L Electric Counter

Lafayette TE-24 Marker Generator

Heathkit Voltage Calibrator

Projects - Wilkinson.Graphics

Hijinx World

Table of Contents

Selected Magazine Bits

Webrecorder

Logos

App Icons

Company Logo

A Note on Typography

Colour

Illustrations

Website

Closing Thoughts

What’s At Stake

Concept

Final stills

Type

Branding

Process, pipeline, and technical information

Freestyle

Everything I wanted to avoid

How I worked around these issues

Music

Toronto Mesh

Logo

Dithering

Brand Guidelines & Typography

Usage Examples

Future

Mr. Robot Title Sequence

Concept

Process, Pipeline, and Technical Information

Passive Buildings Canada

Brand

Website

Gripes & Shortcomings

2001: A Rundown

Process

Vyper

Concept

The future

Test Bench Equipment