Oxherder

Branding and low-carbon web design and development

2020

Oxherder is a Halifax-based carpenter, woodworker, and natural builder. His work uses low-carbon material selection and his projects are built to be resilient. Dominic, the hands behind Oxherder, was looking for a website that reflected his ecological values. He wanted to document his work online as a portfolio for future clients. As he primarily finds work through word-of-mouth, his website needed to serve as an extended introduction. Oxherder's site uses Dominic's friendly, knowledgable, and direct voice to foster a "conversation" with people as they visit.

The vision of simplicity he wanted was well suited for a low-carbon site. By using typography as the primary communication tool, the site looks and feels traditional and sincere. Overall, the simple branding and web design decisions helped make Oxherder's average carbon emission per page 0.11g.

Visit Oxherder.ca here

Visual Identity Design

Oxherder's work speaks to his precision and integrity. His brand reflects this through its calm and clear voice, steady hatched illustrations, and understated colours.

Oxherder's logo is based off an early drawing Dominic had done for company. The drawing uses hatched lines to show depth and highlight the joints. We enjoyed the imperfections in the original drawing and wanted the logo to have the same sketched quality.

The brand's colours are earthy and muted. Oxherder is dedicated to designing resilient and sustainable builds. Communicating his company's environmental focus was necessary to tell Oxherder's story. The colour choices signal this through the connection to wood and plants.

Oxherder's brand typeface is Georgia. This delicate and classic font keeps the voice of the website soft and thoughtful. The biggest bonus with using Georgia, is that its a system font, meaning when it's used on the website, it will remove the need to link any web fonts. This reduces the overall weight of the page.

Oxherder's services all fall under three larger categories: Design, Construction, and Craftsmanship. For each of these service types, we created simple illustrations of a tool he would use in that stage of the project. The illustrations follow the same hatching as the logo. They're precise, but not mechanical. They feel thoughtfully man-made.

The oxherding illustration depicts a man leading an ox by a rope. They're in the same sketched style as the previous illustrations. The company name, Oxherder, was inspired by the traditional Zen oxherding images, about training the mind and illustrating that the journey is the goal. The path the man and the ox are travelling is inspired by brush strokes in traditional Japanese enso paintings.

We wanted to create any additional brand collateral with a strong sustainability focus as well. For Oxherder's business cards, we opted to omit traditional printing. We created a stamp that can last for years. His information can be stamped on to any recycled material and cut down to size. This brought down the cost of business cards and ensured that only recycled materials would be used.

Sustainable Web Design

This site's carbon emissions are incredibly low, which allows Oxherder to spread his mission for sustainability with conscious thought into the carbon footprint of his message's vehicle.

The preview images of Oxherder's past projects on the home page were a massive success in reducing file sizes. The original images were between 900KB and 2MB. After converting the images to black and white, and dithering them (reducing the amount of colours in the image) to 4 colours, the images ranged between 12KB to 50KB. On average, there was an image file size reduction of 97%. Even with this huge reduction, the dithered images don't sacrifice any aesthetic qualities.

Original image, 1.8MB

Image after dithering, 45KB

The simplicity of the brand made the website's carbon goal very easy to achieve.

The site was designed to be responsive for any device, and was designed mobile first. By designing mobile first, we were able to organize the content to create a clear and poignant narrative in the site's most reduced state. Plus, the amount of mobile users outnumbers those who would be visiting on a desktop, so the site should be as beautiful and delightful to use on small screens.

We used a lightweight WordPress theme, called GeneratePress, for this site. The theme, even its free version, had everything we needed to build the site. Because it's not bulky with unnecessary features for customization, much of the small finessing of functions or features were done with custom CSS. To keep the site's page size small, plugins were used selectively.

Caching was used for content whenever possible to keep the site's load time low. We also used CSS and Javascript minifies to remove any code that wasn't being used.

On Google's Performance Tracker, oxherder.ca rated 100% on desktop and 96% on mobile. This exceptionally high score relates to the page's efficiency and speed, which is important for sustainable websites because it means they require less energy to load. Oxherder.ca emits just 0.11g of CO2 per page load, which is 90% better than most tested websites (according to websitcarbon.com).