Carbon 180

A few years ago I attended Post Design Festival in Copenhagen and while I was there I saw a few folks from Low Tech Magazine present their low carbon solar powered website. They used system fonts, dithered images, and a solar powered server. The website highlights the potential of existing technologies in order to inform sustainable energy practices.

As a proof of concept I wanted to take a pass at seeing if I could design a website under these constraints and seeing if it could be a potential design direction for Carbon 180.

Alongside sketching I started putting together visual inspiration in are.na and FigJam. We usually like to have a few sacrificial concepts to showcase visual design direction options to the client early on.

Deciding on a visual direction and digital brand started off with showing a few sacrificial concepts—the low tech concept being one of them. The client ultimately decided on a direction that showcased using their existing brand, however I decided to leverage their vast array of color and incorporate it into the design in order to visually separate their pathways and initiatives. We further pushed the brand by introducing secondary tints with each base color which resulted in a richer and more memorable experience for their users. At the same time this approach elevated their brand.

We introduced a display version of Freight to add some impact on the pathway and initiative pages. Carbon 180 wanted to have a more serious look and we felt that the typeface Filson made the brand look more “elementary” and is why we replaced it with Inter. The updated typeface choices made the brand more earnest yet remaining approachable and preserving its personality.

From a technical standpoint we used WordPress as a CMS to help Carbon180 organize their wealth a content. In order for Carbon 180 to be more accessible for their users we wanted to make the content creation and organization process just as useable for them. In turn this makes Carbon 180 much more effective and efficient as an organization.

Behind the scenes we leveraged some internal Upstatement tools built on top of WordPress’ Gutenberg editor to make creating custom blocks simpler. We created intuitive taxonomy types for pathways and initiatives and each entry featured a theme selection menu.