Smashing Magazine - #411: Sustainable Design

With sustainability checklists, Figma kit, ethical design, sustainability-related nudges in design and useful resources all around prioritizing what matters and reducing waste. Issue #411 June 27, 2023 View in the browser

Smashing Newsletter

Goedenavond Smashing Friends,

Sustainability is often considered a technical challenge related to optimizing images, videos, and fonts. But what does it mean for designers? How can we guide our design decisions through the lens of sustainability? That’s what today’s newsletter is all about.

In this issue, we’ll take a closer look at sustainable design principles and how to build them into the product design process. You’ll learn how to discuss sustainability as a team, how to develop carbon-reduction ideas, and how to assess if your sustainable design process is working. And if you’re looking to establish yourself in a career in sustainable design, there are some valuable tips waiting for you, too.

A Smashing Hour with Oliver Reichenstein

Later today, we’ll be running a Smashing Hour on Design & UX with Oliver Reichenstein, who is an amazing designer, agency owner and conference speaker, and does great things with iA. Join us for a friendly get-together (free, online) — we’d love to see you there!

SmashingConf Antwerp 2023

Sustainability will also be one of the topics we’ll cover in our next SmashingConf Antwerp 🇧🇪 (Oct 9–11) — along with plenty of practical sessions and workshops around design, UX, research, design patterns and complex enterprise UX. Friendly, approachable and affordable. Get your ticket!

But first, let’s dive a bit deeper into sustainable design, shall we? Happy learning!

Have a smashing day and until next time,
— Cosima


1. Sustainability Guide

Do you want to provide more sustainable offerings for your customers but are unsure how to do it? The Sustainability Guide from SVID is an overarching framework for sustainable design and development practices that contains sections wholly dedicated to methods and design principles centered around sustainability.

Sustainability Guide

The design section illustrates the system-wide lifecycle of the design process, describing it as a circular system where everything in a product design is interconnected and linked by environmental criteria that are embedded at all stages. The methods section is an archive of tools, resources, case studies, and expert advice that can be used to educate a team, as well as kickstart a team into sustainable environmental practices. Perfect for anyone who works, or wants to work, in a more sustainable way.


2. Sustainable Design Strategies

The crux of sustainable design strategies, according to Leyla Acaroglu, is ensuring that the tools we use in a design workflow and how we use them today do not have a negative impact on the planet in the future. But how can we ensure that?

Sustainable Design Strategies

In her “Quick Guide to Sustainable Design Strategies,” Leyla shares an ecodesign strategy that helps you build sustainability considerations into the product design process, from manufacturing and recyclability to efficiency and modularity. By including these considerations in the design lifecycle, it is possible to develop products and services that reflect sustainable practices, such as a product’s ability to dematerialize, how easily it can be recycled, how long it lasts, whether it can be dissembled by customers, and to what extent it can be repurposed for other uses.


From our sponsor

A Free, Curated Gallery Of High-End AI Images And Prompts For Creatives

FreefloAI
You can create anything with AI, but getting great results is tough. With Freeflo’s curated library of images and prompts, you have the power to create great content you’ll actually want to use. Simply find an image you like, grab its prompt, and generate your own unique variations.


3. EcoCards Game Workshop Toolkit

One of the most challenging hurdles to adopting a sustainable design process is figuring out how to discuss the topic as a team. Getting everyone on the same page about what it means to design sustainably and how to establish a process for it is paramount for any team. That’s what makes the EcoCards Game Workshop Toolkit such a valuable resource.

EcoCArds

The toolkit is a collection of three card-based games to facilitate team discussion on sustainable design practices. Each game is framed as a “workshop” meant to take place at different stages in the design process, detailing the game rules with a series of steps using a plain deck of playing cards to move the discussion forward. The EcoCards are available in English and French.


4. Sustainability Innovation Framework

The ClimateSprint method that Sebastian Gier and his team at sustainability startup Footprint created helps teams leverage planet-centric thinking to develop carbon reduction ideas for their business. In the Sustainability Innovation Framework, you’ll find everything you need to run your own ClimateSprint.

Sustainability Innovation Framework

The process is mapped to traditional design thinking, helping you start work by aligning objectives and documenting assertions before tying them into user needs. What makes this framework particularly useful is that it helps prioritize the generated ideas by their environmental impact.


5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


6. Website Carbon Calculator

How large is the carbon footprint of your site? The Internet uses electricity, of course, but it also relies on data centers that distribute information and the energy to power each and every device that receives that information. Even a small website has a carbon footprint.

Website Carbon Calculator

The Website Carbon Calculator is one way to determine just how big the impact of your site is on the environment. Employing a methodology that takes energy-consuming attributes into account, the free calculator estimates the amount of carbon dioxide produced by a particular website. To inform its calculations, it looks at the weight of images on a page, whether web fonts are integrated, and any front-end frameworks in use, among other considerations.


7. Team Sustainability Retrospective

OK, so perhaps your team has adopted a sustainable design process that aims to reduce carbon emissions. How do you know it’s working? That’s the purpose of the Team Sustainability Retrospective, a Miro template produced by Paddy Dhanda.

Team Sustainability Retrospective

Rather than high-fiving your team for implementing a sustainable system, this set of templates will help you assess whether or not your efforts are paying off in a streamlined five-step process. This way, your team can re-group after the implementation of the design process and properly measure its impact with data that forms actionable insights for improving the process even further.


From our sponsor

Northwestern’s Online MS In Information Design And Strategy

Northwestern’s Online MS In Information Design And Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more →


8. Climate Tech Guide For Designers

If you’re looking for help establishing yourself in a career in sustainable design, Enrique Allen’s Climate Tech Guide for Designers is for you. It is less about teams adopting sustainable design standards than it is a resource for helping you make a decision about where you work and who you work for.

Climate Tech Guide For Designers

How passionate is the company about climate? What problems is the company trying to solve, and are the solutions based on climate technology and considerations? These are the types of questions that will allow you to find the right fit for your career. The guide goes beyond company considerations by offering advice on positioning yourself for a career in climate technology, capping things off with an extensive list of companies that demonstrate sustainable practices.


9. New in Smashing Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
… and we’re currently working on a new book: Success At Scale, shipping in fall. Pre-order your copy or browse the complete library.


10. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Key phrases

Older messages

#410: Design KPIs

Tuesday, June 20, 2023

How to measure design quality, UX research impact, design velocity, design system success and how to prioritize features. Issue #410 • June 20, 2023 • View in the browser Smashing Newsletter Lá maith

#409: Web Performance

Tuesday, June 13, 2023

Issue #409 • June 13, 2023 • View in the browser Smashing Newsletter Marhaba Smashing Friends, At what point do you start thinking about performance? Is it something you have a clear idea about going

#408: Design Systems

Monday, June 12, 2023

Design System ROI calculator, practical guides, tools and design system checklist. Issue #408 • June 6, 2023 • View in the browser Smashing Newsletter Kalimera ora Smashing Friends, Design systems are

#407: Web Typography

Tuesday, May 30, 2023

How to choose typefaces, type design resources, fluid typography editor and font generators. Issue #407 • May 30, 2023 • View in the browser Smashing Newsletter Masaa' Alkhayr Smashing Friends,

#406: State Of The Web 2023

Tuesday, May 23, 2023

State of CSS 2023, new JavaScript and TypeScript features, SVG, faivons, Web Components and inclusive design. Issue #406 • May 23, 2023 • View in the browser Smashing Newsletter God eftermiddag

You Might Also Like

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.

Every viral brand has these 5 things in common ⚡️

Wednesday, May 1, 2024

See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute

inherit(), Polish, Picture-Superiority Effect, Music Notation, Multi-Brand Design System

Wednesday, May 1, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround

164 / What if you could talk to Scarlett Johansson from the movie Her?

Tuesday, April 30, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

Mayer Rus on L.A.’s Great Gallery Migration

Tuesday, April 30, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev

Accessibility Weekly #394: Images as the First Thing in a Button or Link

Monday, April 29, 2024

April 29, 2024 • Issue #394 View this issue online or browse the full issue archive. Featured: Images as the first thing in a button or link "An accessibility problem I encounter regularly is