Smashing Magazine - #442: Sustainable Front-End and UX

Product design guidelines for sustainable UX, podcasts, books, newsletter, checklists, UX patterns and front-end optimizations. Issue #442 Feb 6, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

When we think about digital sustainability, we usually think about image compression and network payload. However, sustainable experiences go way beyond that. It’s not just about the delivery of the content but also deleting waste, optimizing how data is stored and using sustainable design patterns.

In fact, most environmental costs occur during content production and content consumption. So, they need to be carefully designed and orchestrated. In this newsletter, we look into just that — how to design and build more sustainable digital experiences for everyone.

SmashingConf Antwerp 2024
Meet SmashingConf Antwerp (Oct 28–31, 2024), a friendly conference on design and UX, which is easily accessible by train from almost anywhere in Europe.

And as always, here’s a little reminder about a few community events, workshops and conferences we’re tirelessly working on for 2024 — with early-bird tickets and friendly bundles for teams:

Happy reading, everyone — and we hope you’ll find these resources helpful to create more sustainable products and services at your work!

Vitaly


1. Product Design For Sustainability

Every product has an impact on the environment. So, how can we keep this impact as small as possible and design more sustainable solutions that are better for society and the planet? In his post “Product Design for Sustainability,” Artiom Dashinsky explores practical examples of how products can shape behavior and help make the world more sustainable.

Product Design for Sustainability

As Artiom shows, making a positive change often doesn’t take much effort. It can be as simple as encouraging users to opt for a direct flight instead of one with layovers when booking a ticket or displaying data about product durability to help customers make smarter purchases. Interesting insights into how small design decisions can contribute to a more sustainable world while at the same time improving UX and sales. (cm)


2. Getting Started With Digital Sustainability

The internet accounts for around 4% of global carbon emission — the equivalent of the output of the entire aviation industry. Given this figure, individual sustainability effort might seem like a drop in the ocean, but, as Michelle Barker shows in her “Introduction to web sustainability,” with thousands or even millions of people using a digital product, the positive impact that web designers and developers can make is bigger than one might think.

Introduction to web sustainability

In her post, Michelle not only helps you better understand how digital technology harms the planet but also shares actionable tips for web professionals to improve digital sustainability. For example, how to reduce the amount of data stored and transferred and the amount of power consumed by a user’s device. A great primer on why sustainable design matters and how you can get started. (cm)


3. Sustainability UX Checklist

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 sustainable design habits, 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 PDF suggests 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)


4. Upcoming Workshops and Community Events

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:


5. Sustainability Podcasts, Books, And Newsletters

As awareness for sustainable design is growing, there are wonderful, dedicated people out there who have already acquired a wealth of expertise in the field. One of them is Sandy Dähnert. In her podcast Green the Web, she shares everything you need to know about sustainable UX/UI design and how to manage all kinds of challenges as a sustainable designer or business owner.

Sustainable UX

Another great podcast on the topic comes from Gerry McGovern: World Wide Waste. In each episode, Gerry interviews a prominent thinker about what we can do to make digital as sustainable as possible. World Wide Waste is also the title of Gerry’s book on how digital is harming the planet and what we can do about it.

Tom Greenwood’s book Sustainable Web Design also explores how we can make greener decisions that are not only better for the planet but also for users. You’ll learn more about low-carbon design choices, how to optimize your development processes for energy efficiency, and how to advocate for sustainable practices in your team or organization.

Last but not least, a helpful resource to stay up-to-date on sustainable design is the SustainableUX newsletter that James Christie sends out. It offers a broad view on sustainable design, covering everything from how we work to the energy-use implications of our products and understanding behaviors around climate issues. (cm)


From our sponsor

A Newsletter Helping Engineers Flex Their Product Muscle


Product for Engineers is a newsletter from PostHog dedicated to helping engineers improve their product skills. Subscribe for free to get curated advice on building great products, lessons (and mistakes) from PostHog, and deep dives into the strategies of top startups.


6. Sustainability Kits

How can we create meaningful experiences without losing sight of the environment? To help you and your team make sustainable design decisions tailored to your project’s needs, Elisa Fabbian, Rachele Pedol, and Margherita Troilo created the Sustainability Figma Kit. Consisting of a learning guide, action cards, and a flowchart, it aims to help digital designers move from human-centered design to a more sustainable, life-centered design approach.

Sustainability Figma Kit

Another toolkit that helps you explore sustainable development goals and integrate sustainable values into your work is the Sustainable UX Toolkit produced by the Sustainable UX Network. In a four-step process, it walks you through concept to presentation, providing useful considerations, best practices, and even templates you can use right away. (cm)


7. Sustainable UX Tools And Resources

Making sustainability default in all product design processes.” That’s the mission of the Sustainable UX Network (SUX). To make it easier for designers to find the right tool for their situation or context, SUX published SUX Network, a resource collection all around sustainable design.

SUX Network resources

The collection features practical resources to support you in all phases of the design process, from strategy and discovery through definition and ideation to information architecture, UI design, testing, and analysis. The resources include practical tools, books, inspiring talks, communities, podcasts, case studies, courses, events, and more. One for the bookmarks.

Also be sure to keep an eye on the SUX Playbook, a yet-to-be-released work in progress by the same folks. It is set to provide guidelines, best practices, and examples to help you and your team adopt an environmentally-centered design approach. (cm)


8. The Smashing Library 📚

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
Also meet our newest Smashing Book: Success At Scale. Print shipping in early March, eBook now available. Pre-order your copy or browse the complete library.


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

#441: Legacy Systems and UX Migration

Tuesday, January 30, 2024

How to manage legacy code base, UX migration, redesign and how to design with legacy systems. Issue #441 • Jan 30, 2024 • View in the browser Smashing Newsletter Labą dieną Smashing Friends, Legacy isn

#440: Interface Design

Tuesday, January 23, 2024

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 • Jan 23, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Interface design

#439: Accessibility and Inclusive Design

Tuesday, January 16, 2024

Playbook for universal design, accessible target sizes and tools for accessible design, annotations and brand colors. Issue #439 • Jan 16, 2024 • View in the browser Smashing Newsletter Latha math

#438: Free Books and Guides

Tuesday, January 9, 2024

With books, templates and guides for product designers and front-end engineers. Issue #438 • Jan 9, 2024 • View in the browser Smashing Newsletter Boa noite Smashing Friends, Roll up your sleeves! In

#437: New Ways of Working in 2024

Tuesday, January 2, 2024

New work practices for 2024, UI Stack, “How to work with me”-manuals and useful tools for Figma and SVG. Issue #437 • Jan 2, 2024 • View in the browser Smashing Newsletter God kveld Smashing Friends,

You Might Also Like

Behind the Design of Lauren Santo Domingo’s Ski House

Thursday, November 21, 2024

View in your browser | Update your preferences ADPro Peak Style When it comes to clients, says AD100 designer Andre Mellone, “my biggest nightmare is a person who says, 'Carte blanche, do whatever

2025 Interior Design Trends, Revealed

Wednesday, November 20, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “Design, like fashion, tries to

Want a free strategy session with us?

Wednesday, November 20, 2024

Plus, the emails editors open most often. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

One Simple Thing You Can Do to Retain Your Staff

Tuesday, November 19, 2024

View in your browser | Update your preferences ADPro By my account, it's not fall until I've watched You've Got Mail, Nora Ephron's '90s film adaptation of the 1930s Hungarian play

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

Accessibility Weekly #423: Beautiful Focus Outlines

Monday, November 18, 2024

November 18, 2024 • Issue #423 View this issue online or browse the full issue archive. Featured: Beautiful focus outlines "Unfortunately, focus outlines are often overlooked in web design.

175 / Build your ideas without writing any code

Monday, November 18, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 1 View in browser Welcome to Issue 175 One month ago, I quit my longest-standing job and embarked on a pathless path to let my

Into the Fediverse

Sunday, November 17, 2024

Issue 221: We need decentralized social networks ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏