Smashing Magazine - #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 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. 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


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 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

#396: Web Typography

Tuesday, March 14, 2023

With the typography cheat sheet, type combinations, the right font-size, free eBooks on typography and fonts in data visualization. Issue #396 • Mar 14, 2023 • View in the browser Smashing Newsletter

#395: UX and Design Process

Tuesday, March 7, 2023

Multi-platform design system, UX psychology glossary, motion in UX design and qualitative research methods. Issue #395 • Mar 7, 2023 • View in the browser Smashing Newsletter He lā maikaʻi Smashing

#394: Better Meetings and Career Paths

Tuesday, February 28, 2023

With a little surprise, better meetings, career paths, design critiques and product management. Issue #394 • Feb 28, 2023 • View in the browser Smashing Newsletter Goeije 'n avend Smashing Friends,

#393: Useful CSS Techniques

Tuesday, February 21, 2023

With CSS toggles, CSS attribute selectors, cascade layers, blend modes and conditionally adaptive CSS.Issue #393 • Feb 21, 2023 • View in the browser Smashing Newsletter Aazaard Smashing Friends, We

#392: Design Inspiration From Remote Corners Of The Web

Tuesday, February 14, 2023

Design inspiration with music charts galaxy, interactive maps, historical illustrations and iconographic encyclopaedia.Issue #392 • Feb 14, 2023 • View in the browser Smashing Newsletter Goedemiddag

You Might Also Like

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using