DLT–CMD
Designing an ethical brand and sustainable website.
Our Goal
Our aim with this brand and website was to put our manifesto and best practices into action. We sought to design a simple and honest brand that lends itself well in our sustainable website. Each webpage is simple and clear as to emit as little carbon as possible. Ultimately, this brand and website serves as a model for all future work.
Our Motivations
Building an ethical brand and website was important to us because we wanted to set a personal standard in the quality and care that we will put into each project. This was also an incredible opportunity to learn and experiment with design methods from trusted sources to develop a client strategy for our studio's commitment to sustainability.
Logo
Our logo is two unicodes of keyboard keys (delete and command). By having a logo that can be copy and pasted, rather than an image or a vector, we're able to reduce the size of each page on our website.
Colours
The colour scheme is 3 colours, an off-white, a deep brown, and a tomato red. By having less colours, we are able to code an easily understood user experience. Red functions as both an accent and a crumb that users can follow through a narrative story or to be directed to another page. The better users are able to navigate our site and our content, the less time they'll have to spend browsing and loading pages.
Typography
This brand uses two fonts, serif and sans serif. The actual names of those fonts will change from system to system. On most devices it will be seen as Helvetica and Times. By using default system fonts, we can reduce the size of our page by omitting linking or downloading custom fonts. It was also a great challenge in making default fonts look great and intentional.
Images
For this site, all visuals are done through simple illustrations exported as SVG files. This kept the file sizes small, which reduced the overall page size and load time. For any instances where images were required, we either dithered them or used image compressing tools to reduce the size.
Green Hosting
We use GreenGeeks to host this site. They use renewable energy to power their data centers.
Lightweight Code
This site uses a lightweight WordPress theme called Neve. It's famous for its quick load times, compatibility with AMP (which simplifies pages for mobile viewing), and light file weight. All of these elements contribute to low page sizes, fast load times, and less energy needed to run the site.
⌦⌘
⌦⌘
Logo
Our logo is two unicodes of keyboard keys (delete and command). By having a logo that can be copy and pasted, rather than an image or a vector, we're able to reduce the size of each page on our website.
⌦⌘
⌦⌘
Colours
The colour scheme is 3 colours, an off-white, a deep brown, and a tomato red. By having less colours, we are able to code an easily understood user experience. Red functions as both an accent and a crumb that users can follow through a narrative story or to be directed to another page. The better users are able to navigate our site and our content, the less time they'll have to spend browsing and loading pages.
Typography
This brand uses two fonts, serif and sans serif. The actual names of those fonts will change from system to system. On most devices it will be seen as Helvetica and Times. By using default system fonts, we can reduce the size of our page by omitting linking or downloading custom fonts. It was also a great challenge in making default fonts look great and intentional.
Images
For this site, all visuals are done through simple illustrations exported as SVG files. This kept the file sizes small, which reduced the overall page size and load time.
Green Hosting
We use GreenGeeks to host this site. They use renewable energy to power their data centers.
Lightweight Code
This site uses a lightweight WordPress theme called Neve. It's famous for its quick load times, compatibility with AMP (which simplifies pages for mobile viewing), and light file weight. All of these elements contribute to low page sizes, fast load times, and less energy needed to run the site.
Results
By building the visual identity carefully and with consideration to how it will translate for a sustainable web platform, we were able to create this site with an average page size of 0.16g. According to Carbon Calculator , this site on average is ~85% cleaner than most tested sites online right now.