#397: Sustainable Design Toolkits 🌱

With sustainability checklists, Figma kit, ethical design, sustainability-related nudges in design and useful resources all around prioritizing what matters and reducing waste. Issue #397 • Mar 21, 2023 • [View in the browser]( [Smashing Newsletter]( Dobrý večer Smashing Friends, Many projects have strict deadlines for release and rollout, but this often comes without much consideration for how sustainable the project will be once it’s launched. As a result, we often end up without a proper archiving strategy and without a solid maintenance roadmap. Unsurprisingly, many projects end up with a lot of noise, weight, duplicates and waste. And that’s not sustainable. [Checklist for sustainability]( put together by the IBM team. In this newsletter, we’ve put together some practical guidelines, frameworks and tools to help us all — designers and developers alike — to focus on what matters and remove what doesn’t. You can find a lengthier overview in [Sustainable Design Toolkits for UX Designers]( (it will be published on SmashingMag, too). And here’s a brief overview of the next Smashing events: - Later today (Tue, Mar 21), we’ll be meeting in a [Smashing Hour with Sara Soueidan]( so please bring all your questions around accessibility and sustainability there. - [Smashing Meets JavaScript]( a shiny new edition of Smashing Meets (online), with friendly sessions all around JavaScript on Tue, April 25, - [Smashing Membership]( is our lovely community for people who design and build the web, with friendly discounts on books, workshops and our warm-hearted SmashingConfs. [Join in the community]( for friendly folks and funky cats! With this in mind, let’s dive into sustainability — prioritize what matters, and de-clutter what doesn’t. Thank you so much for your support, everyone — and happy reading! 🙏🏽 — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Designing For Sustainability The [EU Science Hub’s Sustainable Product Policy]( estimates that over 80% of all product-related environmental impacts are determined during the design phase. But how can design teams ensure that sustainability is at the core of every design choice they make? To help their designers develop design habits about sustainability, IBM published “[IBM Design for sustainability]( [IBM Design for sustainability]( At the heart of the framework is the idea that the user, community, and social value should outweigh any negative environmental and social impact in the present and the future. To achieve this vision, experiences need to be inclusive, easy to learn and use, and efficient for both users and power consumption. The [sustainability checklist]( which is part of the framework gives practical tips for optimizing designs to meet these goals. It’s no rocket science but small things to remember that will help improve performance, speed, and responsiveness. (cm) --------------------------------------------------------------- 2. Sustainable Design Strategies Is the admin experience as easy and intuitive as the front-end experience? Is the message useful for your target audience? Could a Progressive Web App be an efficient solution? A lot of questions need to be asked when you want to deliver digital products and services that respect the principles of the [Sustainable Web Manifesto](. The site [Sustainable Web Design]( helps you find the right sustainability strategy for your project. [Sustainable Web Design]( The strategies are divided into different categories: design, client & project ethos, content & marketing, development, hosting, and business operations. In each category, you’ll find questions worth considering and an explanation of why it matters. Links to further reading resources let you dive deeper into each aspect. A helpful guide that supports you on every step of the design process. (cm) --------------------------------------------------------------- 3. Sustainability Figma Kit The [Sustainability Figma Kit]( that Elisa Fabbian, Rachele Pedol, and Margherita Troilo created helps digital designers move from human-centered design to a more sustainable life-centered design approach. It consists of a learning guide, 23 action cards, and a flowchart. [Sustainability Kit For Digital Designers]( The learning guide introduces you to the broader context and importance of designing products and services with a reduced environmental impact. The action cards explore problems you might encounter in different phases of the design process and how to solve them. The flowchart helps you find out which sustainability actions can be applied to the specific type of project you are working on. Useful tips for designing in a more conscious way. (cm) --------------------------------------------------------------- From our sponsor What If You Could Choose Your Frontend? [Storyblok]( Have you ever had to use a front-end tool that made your work difficult? Well, Storyblok is here to make your life simple: it’s headless, works with any frontend and super easy to use — for everyone. [Try Storyblok today](. --------------------------------------------------------------- 4. Encouraging Sustainable Purchases In the last few years, customers have become more and more aware of how important environmental friendliness and social responsibility are when making a purchase. But even with increased awareness, businesses still play a key role in informing, enabling, and encouraging sustainable behavior. Damien Lutz takes a closer look at [how e-commerce businesses encourage sustainable purchases]( and what we can learn from them. [7 behavioural UX approaches encouraging sustainable purchases]( From Zalando’s sustainability filters and Amazon’s Climate Pledge Friendly Hub to Qantas’ Green Tier membership and sustainable shopping assistants, in his post “[7 behavioural UX approaches encouraging sustainable purchases]( Damien analyzes different strategies of nudging customers towards more sustainable decisions. Based on his observations from these real-life examples, he summarizes practical behavioral UX tips that help everyone create experiences that promote sustainability. Interesting insights are guaranteed. (cm) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences That’s right! We run [online workshops on front-end 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: - [Figma Auto Layout Masterclass]( UX with Christine Vallaure. Mar 27 - [UX/UI Design & Figma Introduction]( UX with Christine Vallaure. Apr 20–28 - [New Front-End Adventures, 2023 Edition]( Dev with Vitaly Friedman. Apr 25 – May 9 - [Architecting Design Systems]( Workflow with Nathan Curtis. May 11–19 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. May 4–18 - [SmashingConf SF]( — May 23–26 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 12–26 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Green The Web Podcast Since 2019, UX/UI designer Sandy Dähnert shares her passion for a sustainable web on her site Green the Web. Last year, she started the [Green the Web Podcast]( on all things sustainable design best practices, ecological and social user research, information architecture, user interface design, and more. [Green the Web Podcast]( Whether it’s sustainability-infused user journey maps, UX/UI factors for a lightweight website, or approaches for greener checkout, in the podcast Sandy shares her deep love of sustainable UX and UI design to encourage everyone to step into green design and play an active role in shaping this new design philosophy. You can listen to the podcast on Spotify or Apple Podcast. (cm) --------------------------------------------------------------- 7. Green Hosting Providers According to some estimates, the impact of the Internet and our gadgets on global greenhouse emissions is similar to that of the airline industry. To speed up the transition towards a green, fossil-free Internet, there’s a question we all can ask ourselves: Are our websites hosted green? [The Green Web Foundation]( The Green Web Foundation built a [checker]( to help you quickly find out if your hosting provider is using green energy or compensating for its services. All you need to do is enter the URL. If you want to make the switch to a green hosting provider, the foundation also published a [directory of 478 green hosting companies]( in 35 countries. A small step that makes a difference. (cm) --------------------------------------------------------------- From our sponsor Collect, Clean & Act On Your Customer Data With $50K Segment Credits [Segment/Paved]( Learn analytics best practices, assemble your tech stack, and build a data-driven organization using Segment as your customer data platform. Segment helps over 15,000 startups get analytics right. [Get $50k in Segment credits]( with Smashing Magazine! --------------------------------------------------------------- 8. Ethical Design Resources A sustainable web means not only causing no harm to the planet but also to humans. A useful resource to help designers and developers live up to that responsibility and ensure that the experiences they build are inclusive, honest, and safe are the [Ethical Design Resources]( which Lexi Namer maintains in collaboration with the [Ethical Design Network]( and Kate Every. [Ethical Design Resources]( On Ethical Design Resources, you’ll find articles, books, courses, frameworks, tools, talks, videos, podcasts, and more covering different aspects of ethical design. They help you assess the impact of your design decisions, uncover harmful practices, and support you in making design choices that respect your users. And if you need more resources, take a look at [Ethical Design Guide]( and [Humane By Design](. Happy browsing! (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [Frontend Developer – JavaScript (Vue.js/Nuxt.js)]( at MIR MEDIA - Digital Agency (Cologne, Germany) - [Web Designer – Frontend]( at University of Rhode Island (Kingston, Rhode Island) - [UX / UI Developer]( at Upvio (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [Internationalization In Next.js 13 With React Server Components]( - [Full Stack GraphQL With Next.js, Neo4j AuraDB And Vercel]( - [What Leonardo Da Vinci Can Teach Us About Web Design]( - [A Pragmatist’s Guide To Lean User Research]( - [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 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](