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

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

At Home With Gloria Steinem

Thursday, December 26, 2024

View in your browser | Update your preferences ADPro Glory, Gloria Every year our AD100 honorees fill out a survey of projects that they're working on. A year or so ago, longtime AD100 designer

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏