Designing the SDD Brand: Animation, Type, and Colour.

4 mins read

Sustainable Digital Design was inspired by curiosity and a simple desire to know more about the impact our studio had on the planet. We started to question ourselves: how can we design meaningful and creative experiences without having an outsized impact on the planet? We wanted to do more, educate ourselves, and start shifting from unsustainable design habits to practices that are more considerate and conscious of the environment.

According to the Lowww directory, the SDD website emits 0.357g of CO2 per visit which is 43% less CO2 than average emissions. While we managed to reduce our website’s CO2 emissions, we still found room for creativity, exploration, and learning. 
So, how did we create SDD, and what have we learned from this experience?

The Concept  
Sustainable Digital Design, much like any other Wonderland project, is followed by extensive research, leading to an idea, and turning leads to a concept upon which we can build. As Sustainable Digital Design is a brand of our creation, we needed to define its mission. 
The SDD mission is at the heart of the brand, where we define its values and what kind of message we want to deliver to the world. For us, Sustainable Digital Design has a critical one. It is important for us to raise awareness and simultaneously bring a positive feel to the platform. This would allow SDD to create human connectivity with the possibility to extend the platform into a community and open space of idea sharing while translating that into an interesting and engaging visual language. Our main goal is to create a meaningful experience through effective storytelling supported by research, design, and creative coding. 

Design   
The main focus of SDD is to establish a platform to share useful and informative knowledge that can help creatives around the world to reconsider traditional design methods by advocating for new conscious ones.   To do so, we first needed to educate ourselves and learn new tools and techniques for designing in the most sustainable ways, and there was no better way to experiment with this than the creation of an entirely new brand.  

 Colours
We specifically chose a colour palette with darker hues for the simple reason that they consume less energy when illuminating the screen. Black in particular consumes the lowest amount of energy, while white is the most energy intensive.  We also used high-contrast colours which ensures that the information we display is well-defined and easy to follow without users needing to increase the brightness of their device. Effectively, less brightness leads to less energy consumption.  Other findings about colour that helped us decrease the impact of the website are that dark mode reduces battery usage up to 63% on AMOLED displays, even if the screen is at max brightness. White and Blue colours are power-hungry, so we choose not to include those in our colour palette. In fact, blue pixels use approximately 25% more energy than red and green pixels. 

Typography 
With typefaces, the most sustainable approach is to use the system fonts as they are preinstalled on local devices and then use the lighter weights. However, the pros are offset by the risk of the overall design feeling less captivating. Hence, to ensure SDD remained sustainable and differentiated, we struck a balance. For our body copy we rely on system fonts to reduce our footprint and ensure our content remained sustainable while relying on a unique typeface - ABC Camera - for headers and the logo. We chose ABC Camera because of its ink traps – the empty circular shapes - as they lend the type an incomplete feeling as if it was lowly decomposing or unfolding. They also require fewer pixels which stand as a visual symbol of our overall mission.For us, ABC Camera became the ideal typeface to use for the logo and headers and it manifests the connection to the mission and brand identity. 

 Illustrations
As with type, the more detailed an illustration, the more impact it has on the environment. For SDD, we rely on line-based illustrations to sustain a lightweight file size while still being visually appealing. For example, the fewer paths an object has the lighter its overall size, and therefore the lower its energy usage.  

Animation
Animation presented one of our greatest challenges when building and maintaining a lightweight and low-impact website. At the same time, we were acutely aware of the need for SDD to be engaging to the user in a positive way, so people would read and learn from our content. To achieve this, we created our mascot, Sid, to have minimal impact from the start. 
With this in mind, we researched tools such as Lottie and Rive App that help to optimise animations. Lottie in particular was useful as it allowed us to animate Sid and convert it from a 10MB animation into a 100KB JSON file. With this option, our developers were then able to translate the animation into code and animate playfully, but without the outsized impact. We also implemented an on/off switch, allowing the user to turn off the animations and reduce the carbon footprint even more. 

So where do we stand.   
Sustainable Digital Design is a constantly evolving project that brings us ever closer towards conscious and responsible design. Every day, we search out the small, incremental steps that we can make that will lead towards a positive difference in the long run.  Creating greener digital experiences is important for us as professional creatives and humans above all.