#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 Workshops]( 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: - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. July 4–18 - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 20–28 - [Advanced JavaScript Masterclass]( Dev with Christophe Porteneuve. Aug 16–30 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Sep 8 – Oct 6 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to more workshops →]( --------------------------------------------------------------- 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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Jump to all Smashing Books →]( [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 - [Behind The Curtains Of Wikipedia Redesign]( - [Using AI To Detect Sentiment In Audio Files]( - [Visual Editing Comes To The Headless CMS]( - [Gatsby Headaches And How To Cure Them: i18n (Part 2)]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](