{"id":1455,"date":"2023-07-04T09:00:00","date_gmt":"2023-07-04T09:00:00","guid":{"rendered":"https:\/\/vfflogs.com\/?p=1455"},"modified":"2023-07-23T03:45:56","modified_gmt":"2023-07-23T03:45:56","slug":"sustainable-design-toolkits-and-frameworks","status":"publish","type":"post","link":"https:\/\/vfflogs.com\/index.php\/2023\/07\/04\/sustainable-design-toolkits-and-frameworks\/","title":{"rendered":"Sustainable Design Toolkits And Frameworks"},"content":{"rendered":"<p>              <title>Sustainable Design Toolkits And Frameworks<\/title><\/p>\n<article>\n<header>\n<h1>Sustainable Design Toolkits And Frameworks<\/h1>\n<address>Cosima Mielke &amp; Geoff Graham<\/address>\n<p>                  2023-07-04T09:00:00+00:00<br \/>\n                  2023-07-23T03:34:38+00:00<br \/>\n                <\/header>\n<p>\u201cSustainable\u201d design is a paradigm that emphasizes the impact that design practices and workflows have on the environment with the goal of <strong>reducing carbon emissions<\/strong>. The design decisions we make are reflected in our planet\u2019s climate, from the energy consumption of the tools we use to how the products we build interact with the environment and plenty of other things in between. In this collection, we compiled resources to help you understand the principles of sustainable design and how to integrate them into the way we work and the things we make.<\/p>\n<h2 id=\"design-for-sustainability\">Design For Sustainability<\/h2>\n<p>The <a href=\"https:\/\/joint-research-centre.ec.europa.eu\/scientific-activities-z\/sustainable-product-policy_en\">EU Science Hub\u2019s Sustainable Product Policy<\/a> 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 <strong>every design choice<\/strong> they make? To help their designers develop design habits about sustainability, IBM published \u201c<a href=\"https:\/\/www.ibm.com\/design\/practices\/design-for-sustainability\/\">IBM Design for sustainability<\/a>.\u201d<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.ibm.com\/design\/practices\/design-for-sustainability\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"451\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/ibm-designing-for-sustainability-opt.png\" alt=\"IBM Design for sustainability\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.ibm.com\/design\/practices\/design-for-sustainability\/\">IBM Design for sustainability<\/a> is a framework for acquiring and applying sustainability consciousness.<br \/>\n    <\/figcaption><\/figure>\n<p>At the heart of the framework is the idea that the user, community, and social value should outweigh any <strong>negative environmental and social impact<\/strong> 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 overall power consumption.<\/p>\n<p>The <a href=\"https:\/\/www.ibm.com\/design\/practices\/design-for-sustainability\/design-for-sustainability-positionpaper.pdf\">sustainability checklist<\/a> is part of the framework and it gives <strong>practical tips<\/strong> for optimizing designs to meet these goals. It\u2019s no rocket science, but the checklist does offer useful considerations that will help improve performance, speed, and responsiveness.<\/p>\n<h2 id=\"sustainability-methods-and-design-principles\">Sustainability Methods and Design Principles<\/h2>\n<p><a href=\"https:\/\/sustainabilityguide.eu\/\">The Sustainability Guide<\/a> from SVID is an overarching framework for <strong>sustainable design and development practices<\/strong> that contains sections wholly dedicated to methods and design principles that are centered around sustainable practices.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/sustainabilityguide.eu\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"517\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainability-guide-opt.png\" alt=\"Sustainability Guide\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/sustainabilityguide.eu\/\">Sustainability Guide<\/a> from SVID gathers information, methods, and good examples of how to use design to achieve a sustainable business.<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/sustainabilityguide.eu\/ecodesign\/design\/\">design<\/a> section illustrates the system-wide lifecycle of the design process, describing it as a <strong>circular system<\/strong> where everything in a product design is interconnected and linked by environmental criteria that is embedded at all stages.<\/p>\n<p>The <a href=\"https:\/\/sustainabilityguide.eu\/methods\/\">methods<\/a> section is an archive of tools, resources, case studies, and expert advice that can be used to <strong>educate a team<\/strong>, as well as kickstart a team into sustainable environmental practices.<\/p>\n<h2 id=\"sustainable-design-strategies\">Sustainable Design Strategies<\/h2>\n<p>The crux of sustainable design strategies, according to <a href=\"https:\/\/leyla-acaroglu.medium.com\/about\">Leyla Acaroglu<\/a>, 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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/medium.com\/disruptive-design\/quick-guide-to-sustainable-design-strategies-641765a86fb8\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"565\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainable-design-strategies-opt.png\" alt=\"Quick Guide to Sustainable Design Strategies\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Leyla Acaroglu\u2019s <a href=\"https:\/\/medium.com\/disruptive-design\/quick-guide-to-sustainable-design-strategies-641765a86fb8\">Quick Guide to Sustainable Design Strategies<\/a> helps you build sustainability into the product design process.<br \/>\n    <\/figcaption><\/figure>\n<p>What Leyla does in this <a href=\"https:\/\/medium.com\/disruptive-design\/quick-guide-to-sustainable-design-strategies-641765a86fb8\">extensive Medium post<\/a> is curate an <strong>ecodesign strategy set<\/strong> that covers core considerations for <strong>product design<\/strong> that build sustainability into the process, from manufacturing and recyclability to efficiency and modularity. By including these considerations into the design lifecycle, it is possible to develop products and services that reflect sustainable practices, such as a product\u2019s 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.<\/p>\n<h2 id=\"sustainable-web-design-practices\">Sustainable Web Design Practices<\/h2>\n<p>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 <strong>principles<\/strong> of the <a href=\"https:\/\/www.sustainablewebmanifesto.com\/\">Sustainable Web Manifesto<\/a>. The site <a href=\"https:\/\/sustainablewebdesign.org\/\">Sustainable Web Design<\/a> helps you find the right sustainability strategy for your project.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/sustainablewebdesign.org\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"478\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainable-web-design-strategies-opt.png\" alt=\"Sustainable Web Design\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/sustainablewebdesign.org\/\">Sustainable Web Design<\/a> explores strategies for delivering sustainable web design projects.<br \/>\n    <\/figcaption><\/figure>\n<p>The strategies are divided into <strong>different categories<\/strong>: design, client and project ethos, content and marketing, development, hosting, and business operations. In each category, you\u2019ll 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.<\/p>\n<h2 id=\"sustainable-web-hosting-companies\">Sustainable Web Hosting Companies<\/h2>\n<p>According to some estimates, the impact of the Internet and our gadgets on <strong>global greenhouse emissions<\/strong> is similar to that of the airline industry. To speed up the transition towards a green, fossil-free Internet, there\u2019s a question we all can ask ourselves: <em>Are our websites hosted green?<\/em><\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.thegreenwebfoundation.org\/directory\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"529\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainable-web-hosting-companies-opt.png\" alt=\"The Green Hosting Directory\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.thegreenwebfoundation.org\/directory\/\">Green Hosting Directory<\/a> lists green hosting providers across the globe.<br \/>\n    <\/figcaption><\/figure>\n<p>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 <strong>switch to a green hosting provider<\/strong>, the foundation also published a <a href=\"https:\/\/www.thegreenwebfoundation.org\/directory\/\">directory of 478 green hosting companies<\/a> in 35 countries. A small step that makes a difference.<\/p>\n<h2 id=\"sustainability-score-calculator\">Sustainability Score Calculator<\/h2>\n<p>So, just how large is the carbon footprint of your website? 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 <strong>carbon footprint<\/strong>.<\/p>\n<p>The <a href=\"https:\/\/www.websitecarbon.com\/\">Sustainability Score Calculator<\/a> is one way to find out. Employing a methodology that takes energy-consuming attributes into account, this free calculator estimates the amount of carbon dioxide produced by a particular website. 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, to inform its calculations.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.websitecarbon.com\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"575\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainability-score-calculator-opt.png\" alt=\"Website Carbon Calculator\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.websitecarbon.com\/\">Website Carbon Calculator<\/a> helps you estimate a web page\u2019s carbon footprint.<br \/>\n    <\/figcaption><\/figure>\n<p>The exact amount of carbon dioxide produced by a website can probably be evaluated in a number of ways, and this specific calculator makes its own assumptions. Regardless of the exact inputs used in the results, the fact that the Sustainability Score Calculator can come up with a rough estimate for a website\u2019s carbon dioxide output on a <strong>per page view<\/strong> basis is a reasonable starting point for determining just how big of a footprint a site has on the environment.<\/p>\n<h2 id=\"sustainable-ux-design-toolkit\">Sustainable UX Design Toolkit<\/h2>\n<p><a href=\"https:\/\/miro.com\/miroverse\/the-sustainable-ux-design-toolkit\/\">The Sustainable UX Design Toolkit<\/a> is a resource produced by the <a href=\"https:\/\/sustainableuxmanifesto.com\">Sustainable UX Network<\/a>, a non-profit organization that has established a <strong>community of designers<\/strong> around sustainable environmental design practices.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/miro.com\/miroverse\/the-sustainable-ux-design-toolkit\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"430\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainable-ux-design-toolkit-opt.png\" alt=\"The Sustainable UX Design Toolkit\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/miro.com\/miroverse\/the-sustainable-ux-design-toolkit\/\">The Sustainable UX Design Toolkit<\/a> offers a methodical framework for integrating sustainable values into the work of UX designers.<br \/>\n    <\/figcaption><\/figure>\n<p>The organization developed the toolkit as a Miro board that is freely available to clone into your own Miro account. Not a Miro user? You can still reference the embedded board and zoom into it to view the <strong>four-step process<\/strong> that walks you through concept to presentation, providing useful considerations, best practices, and even templates you can use right away.<\/p>\n<h2 id=\"sustainability-nudges-in-ux\">Sustainability Nudges in UX<\/h2>\n<p>In the last few years, customers have become more and more aware of how important <strong>environmental friendliness<\/strong> 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. In his post \u201c<a href=\"https:\/\/uxdesign.cc\/7-behavioural-ux-approaches-encouraging-sustainable-purchases-a57678dcf993\">7 behavioural UX approaches encouraging sustainable purchases<\/a>,\u201d Damien Lutz takes a closer look at how e-commerce businesses encourage sustainable purchases and what we can learn from them.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/uxdesign.cc\/7-behavioural-ux-approaches-encouraging-sustainable-purchases-a57678dcf993\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"415\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainability-nudges.png\" alt=\"7 behavioural UX approaches encouraging sustainable purchases\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Damien Lutz reviews and summarizes <a href=\"https:\/\/uxdesign.cc\/7-behavioural-ux-approaches-encouraging-sustainable-purchases-a57678dcf993\">seven behavioral UX approaches<\/a> that encourage users to purchase planet-friendlier products.<br \/>\n    <\/figcaption><\/figure>\n<p>From Zalando\u2019s sustainability filters and <a href=\"https:\/\/sustainability.aboutamazon.com\/environment\/the-climate-pledge\">Amazon\u2019s Climate Pledge Friendly Hub<\/a> to Qantas\u2019 Green Tier membership and sustainable shopping assistants, Damien analyzes different strategies of <strong>nudging customers<\/strong> towards more sustainable decisions. Based on his observations from these <strong>real-life examples<\/strong>, he summarizes practical behavioral <abbr>UX<\/abbr> tips that help everyone create experiences that promote sustainability. Interesting insights are guaranteed.<\/p>\n<h2 id=\"green-the-web-podcast\">Green the Web Podcast<\/h2>\n<p>Since 2019, <abbr>UX<\/abbr>\/UI designer Sandy D\u00e4hnert shares her passion for a sustainable web on her site <em>Green the Web<\/em>. Last year, she started the <a href=\"https:\/\/greentheweb.com\/the-green-the-web-podcast-is-online\/\">Green the Web Podcast<\/a> on all things <strong>sustainable design best practices<\/strong>, ecological and social user research, information architecture, user interface design, and more.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/greentheweb.com\/the-green-the-web-podcast-is-online\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"533\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/green-the-web-opt.png\" alt=\"Green The Web Podcast\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/greentheweb.com\/the-green-the-web-podcast-is-online\/\"><em>Green The Web<\/em> podcast<\/a> covers all things sustainable design best practices.<br \/>\n    <\/figcaption><\/figure>\n<p>Whether it\u2019s sustainability-infused user journey maps, <abbr>UX<\/abbr>\/UI factors for a lightweight website, or approaches for greener checkout, in the podcast Sandy shares her deep love of <strong>sustainable UX<\/strong> and <abbr>UI<\/abbr> 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 <a href=\"https:\/\/open.spotify.com\/show\/6IDd3hCmMJZR8LVHRthdwF\">Spotify<\/a> or <a href=\"https:\/\/podcasts.apple.com\/us\/podcast\/green-the-web\/id1646879509\">Apple Podcasts<\/a>.<\/p>\n<h2 id=\"sustainable-ux-playbook\">Sustainable UX Playbook<\/h2>\n<p>The Sustainable UX Playbook is a yet-to-be-released work in progress by the same folks who maintain the <a href=\"https:\/\/sustainableuxmanifesto.com\">Sustainable UX Manifesto<\/a>. The playbook is set to provide guidelines, best practices, and examples to help you and your team adopt an <strong>environmentally-centered design approach<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/sustainableuxplaybook.com\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"403\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sux-playbook-opt.png\" alt=\"The Sustainable UX Playbook\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A promising resource to keep an eye on: the <a href=\"https:\/\/sustainableuxplaybook.com\/\">Sustainable UX Playbook<\/a>, with tips for adopting an environmentally-centered design approach.<br \/>\n    <\/figcaption><\/figure>\n<p>The exact date of when the Sustainable UX Playbook will be available is to be determined, but it will be published to <a href=\"https:\/\/sustainableuxplaybook.com\/\">SustainableUXPlaybook.com<\/a> (which currently redirects to the Sustainable UX Manifesto) when it is ready.<\/p>\n<div class=\"sponsors__lead-place\"><\/div>\n<h2 id=\"sustainability-figma-kit\">Sustainability Figma Kit<\/h2>\n<p>The <a href=\"https:\/\/www.figma.com\/community\/file\/1165191622334300908\">Sustainability Figma Kit<\/a> 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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.figma.com\/community\/file\/1165191622334300908\/Sustainability-Kit-for-digital-designers\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"396\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainability-kit-for-digital-designers-opt.png\" alt=\"Sustainability Kit for Digital Designers\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.figma.com\/community\/file\/1165191622334300908\/Sustainability-Kit-for-digital-designers\">Sustainability Kit for Digital Designers<\/a> guides designers towards sustainable design decisions that fit their project.<br \/>\n    <\/figcaption><\/figure>\n<p>The <strong>learning guide<\/strong> 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. Last but not least, the <strong>flowchart<\/strong> helps you find out which sustainability actions can be applied to the specific type of project you are working on by providing useful tips for designing in a more conscious way.<\/p>\n<h2 id=\"sustainability-innovation-framework\">Sustainability Innovation Framework<\/h2>\n<p><a href=\"https:\/\/www.figma.com\/community\/file\/1198811753322710709\/Sustainability-Innovation-Framework\">Sustainability Innovation Framework<\/a> is an effort from <a href=\"http:\/\/www.sebastiangier.com\">Sebastian Gier<\/a> that is all about the planning phase of an effort to scope work for projects aimed at reducing carbon emissions.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.figma.com\/community\/file\/1198811753322710709\/Sustainability-Innovation-Framework\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"479\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainability-innovation-framework-opt.png\" alt=\"Sustainability Innovation Framework\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.figma.com\/community\/file\/1198811753322710709\/Sustainability-Innovation-Framework\">Sustainability Innovation Framework<\/a> helps you uncover a project\u2019s potential for reducing carbon emissions.<br \/>\n    <\/figcaption><\/figure>\n<p>The process is mapped to traditional design thinking, helping you start work by <strong>aligning objectives<\/strong> and <strong>documenting assertions<\/strong> before tying them into user needs. What makes this framework particularly useful is that it helps prioritize the ideas generated by the process by their environmental impact.<\/p>\n<p>The entire framework is available as a collaborative FigJam board that can be cloned to your own Figma account.<\/p>\n<h2 id=\"ecocards-game-workshop-toolkit\">EcoCards Game Workshop Toolkit<\/h2>\n<p>One of the most difficult hurdles to adopting a sustainable design process is figuring out how to <strong>discuss the topic as a team<\/strong>. Getting everyone on the same page about what it means to design sustainably and how to establish a process for it are paramount for any team.<\/p>\n<p>That\u2019s what makes the <a href=\"https:\/\/www.figma.com\/community\/file\/1197230942511819987\/EcoCards---jeu-de-cartes-d&#039;%C3%A9coconception-web-%2F-web-ecodesign-card-game\">EcoCards Game Workshop Toolkit<\/a> such a valuable resource. The toolkit is a collection of three card-based games designed to facilitate team discussion on sustainable design practices. Each game is framed as a \u201cworkshop\u201d meant to take place at <strong>different stages in the design process<\/strong>, detailing the game rules with a series of steps using a plain deck of playing cards to move the discussion forward.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.figma.com\/community\/file\/1197230942511819987\/EcoCards---jeu-de-cartes-d%27%C3%A9coconception-web-%2F-web-ecodesign-card-game\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"369\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/ecocards-opt.png\" alt=\"EcoCards\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a>EcoCards<\/a> is a card game to discover and apply eco-friendly design recommendations.<br \/>\n    <\/figcaption><\/figure>\n<p>The EcoCards are created as a FigJam board that can be cloned to your Figma account. They are available in English and French translations.<\/p>\n<h2 id=\"team-sustainability-retrospective\">Team Sustainability Retrospective<\/h2>\n<p>OK, so perhaps your team has adopted a sustainable design process that aims to reduce carbon emissions. How do you know it\u2019s working? That\u2019s the purpose of the <a href=\"https:\/\/miro.com\/miroverse\/team-sustainability-retrospective\/\">Team Sustainability Retrospective<\/a>, a Miro template produced by <a href=\"https:\/\/www.superpowers.school\">Paddy Dhanda<\/a>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/miro.com\/miroverse\/team-sustainability-retrospective\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"396\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/team-sustainability-retrospective-opt.png\" alt=\"Team Sustainability Retrospective\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The activities in Paddy Dhanda\u2019s <a href=\"https:\/\/miro.com\/miroverse\/team-sustainability-retrospective\/\">Team Sustainability Retrospective<\/a> are perfect for teams wanting to identify and eliminate wasteful activities.<br \/>\n    <\/figcaption><\/figure>\n<p>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 <strong>five-step process<\/strong>. This way, your team can re-group after the implementation of the design process and properly measure its impact with data that form actionable insights for improving the process even further.<\/p>\n<div class=\"sponsors__lead-place\"><\/div>\n<h2 id=\"world-wide-waste-book\">World Wide Waste Book<\/h2>\n<p><a href=\"https:\/\/gerrymcgovern.com\/books\/world-wide-waste\/\"><em>World Wide Waste<\/em><\/a> is a book by Gerry McGovern, aiming to debunk the perception that being \u201cdigital\u201d is akin to being \u201cgreen.\u201d It provides a healthy dose of statistics about the impact of digital products and services and details the <strong>crisis of energy consumption<\/strong> in the world.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/gerrymcgovern.com\/books\/world-wide-waste\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"473\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/world-wide-waste-opt.png\" alt=\"World Wide Waste\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/gerrymcgovern.com\/books\/world-wide-waste\/\"><em>World Wide Waste<\/em><\/a> gives us a feel for digital and how it impacts global warming.<br \/>\n    <\/figcaption><\/figure>\n<p>For example, McGovern attempts to clear up the misunderstanding that cloud technologies are somehow ethereal elements that are carbon-free, but rather physical data centers that result in large quantifiable emissions. If nothing else, this book will equip you with the information you might need to help <strong>convince your team to adopt more sustainable practices<\/strong> with statistics and case studies to make the case.<\/p>\n<h2 id=\"sustainable-web-design-book\">Sustainable Web Design Book<\/h2>\n<p>If the <em>World Wide Waste<\/em> book is all about defining and diagnosing unsustainable design practices, then this offering from A Book Apart is aimed at curing those symptoms. Written by lead author of the \u201c<a href=\"https:\/\/www.sustainablewebmanifesto.com\">Sustainable Web Manifesto<\/a>\u201d Tom Greenwood, <em><a href=\"https:\/\/abookapart.com\/products\/sustainable-web-design\/\">Sustainable Web Design<\/a><\/em> is a collection of practical web design advice for everything from how to <strong>measure a website\u2019s environmental impact<\/strong> and identifying <strong>low-carbon design practices<\/strong> to creating <strong>energy-efficient development processes<\/strong> and creating a hosting environment that helps <strong>reduce climate costs<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/abookapart.com\/products\/sustainable-web-design\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"390\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/sustainable-web-design-book-opt.png\" alt=\"Sustainable Web Design\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Tom Greenwood\u2019s book <a href=\"https:\/\/abookapart.com\/products\/sustainable-web-design\/\"><em>Sustainable Web Design<\/em><\/a> offers a practical path to more carbon-efficient websites that are better for the planet and our users.<br \/>\n    <\/figcaption><\/figure>\n<p>Like all A Book Apart publications, <em>Sustainable Web Design<\/em> is available in print and digital editions \u2014 just remember that the digital copy is not a carbon-free option, as many of the resources in this roundup have noted. Then again, the printed copy also has climate considerations due to the costs of transporting the book to your front door. Just buying the book is an excellent example of the conundrums of sustainable design.<\/p>\n<h2 id=\"climate-tech-guide-for-designers\">Climate Tech Guide For Designers<\/h2>\n<p>If you\u2019re looking for help establishing yourself in a <strong>career in sustainable design<\/strong>, Enrique Allen and the Designer Fund team offer the <a href=\"https:\/\/www.designerfund.com\/blog\/climate-tech-guide-for-designers\/\">Climate Tech Guide for Designers<\/a>.<\/p>\n<p>This guide 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. 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.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.designerfund.com\/blog\/climate-tech-guide-for-designers\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"537\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/climate-tech-guide-for-designers-opt.png\" alt=\"Climate Tech Guide for Designers\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <a href=\"https:\/\/www.designerfund.com\/blog\/climate-tech-guide-for-designers\/\">Climate Tech Guide for Designers<\/a> helps designers build a career in climate tech.<br \/>\n    <\/figcaption><\/figure>\n<p>What makes this Climate Tech Guide for Designers especially useful is that it goes beyond company considerations by offering advice for how to position yourself for a career in climate technology, capping things off with an extensive list of companies that demonstrate sustainable practices.<\/p>\n<h2 id=\"ethical-design-handbook\">Ethical Design Handbook<\/h2>\n<p>The <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/ethical-design-handbook\/\"><em>Ethical Design Handbook<\/em><\/a> is a book we offer right here at Smashing Magazine. Written by authors Trine Falbe, Martin Michael Frederiksen, and Kim Andersen, these guidelines serve as a roadmap to learn about adopting and integrating <strong>ethical design practices<\/strong> into a business model.<\/p>\n<p>Wait, why are we talking about \u201cethical design\u201d when we\u2019ve been sharing resources on \u201csustainable design\u201d? Ethical and sustainable design work hand-in-hand, as ethical design relies on <strong>sustainable digital business practices<\/strong> in addition to a slew of larger concepts that determine an organization\u2019s ethical practices, from transparency in how data is collected to how inclusiveness is built into a design. In other words, ethical and sustainable design are united by a cause to prevent harm to people. A sustainable design process supports a healthy environment that, in turn, supports an <strong>ethical responsibility<\/strong> to care about the impact we have on the planet.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/ethical-design-handbook\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"527\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/ethical-design-handbook-opt.png\" alt=\"The Ethical Design Handbook\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/ethical-design-handbook\/\"><em>The Ethical Design Handbook<\/em><\/a> is your companion for building honest interfaces and growing your business sustainably.<br \/>\n    <\/figcaption><\/figure>\n<p>All in all, the <em>Ethical Design Handbook<\/em> is about leveraging ethical business practices as a market differentiator that can be used as a <strong>competitive advantage<\/strong>. Sustainable design principles are part of that matrix, demonstrating that sustainable practices can be aligned to \u2014 and even enhance \u2014 business objectives.<\/p>\n<h2 id=\"ethical-design-resources\">Ethical Design Resources<\/h2>\n<p>Another useful resource to help designers and developers live up to the responsibility of causing no harm and ensure that the experiences they build are <strong>inclusive, honest, and safe<\/strong> are the <a href=\"https:\/\/www.ethicaldesignresources.com\/\">Ethical Design Resources<\/a> which Lexi Namer maintains in collaboration with the <a href=\"https:\/\/ethicaldesignnetwork.com\/\">Ethical Design Network<\/a> and Kate Every.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/www.ethicaldesignresources.com\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"473\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sustainable-design-toolkits\/ethical-design-resources-opt.png\" alt=\"Ethical Design Resources\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.ethicaldesignresources.com\/\">Ethical Design Resources<\/a> curates articles, books, courses, frameworks, and much more to help you design ethical products.<br \/>\n    <\/figcaption><\/figure>\n<p>On Ethical Design Resources, you\u2019ll find <strong>articles, books, courses, frameworks<\/strong>, 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.<\/p>\n<p>And if you need more resources, take a look at <a href=\"https:\/\/ethicaldesign.guide\/\">Ethical Design Guide<\/a> and <a href=\"https:\/\/humanebydesign.com\/resources\">Humane By Design<\/a>.<\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>There you have it, a deep collection of toolkits, frameworks, and resources you can use to learn about sustainable design practices and how to adopt them into your own design process. Notice how the collection reveals that sustainable design is a <strong>multifaceted topic<\/strong> that considers everything from how we work to the specific tools we use to work. It even covers product design as a whole and the decisions that impact the sustainability of a product, not to mention how business objectives influence environmental objectives.<\/p>\n<p>There may not be a single silver bullet or resource that immediately aligns you and your work with sustainable design practices. That said, the resources provided in this roundup can help you <strong>make big and small gains<\/strong> alike, whether it\u2019s reflected in something as seemingly small as the hosting provider you decide to use for your website or something more involved such as integrating environmental considerations at every stage of the design process.<\/p>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(vf, il)<\/span>\n<\/div>\n<p>\n    .nl-box__form {<br \/>\n  display: flex;<br \/>\n  padding-bottom: 0.5em;<br \/>\n  text-align: center;<br \/>\n  letter-spacing: -0.5px;<br \/>\n  color: #ffffff;<br \/>\n  font-size: 1.15em;<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>form&ndash;button,<br \/>\n.nl-box<strong>form .nl-box<\/strong>form&ndash;email {<br \/>\n  flex-grow: 1;<br \/>\n  flex-shrink: 0;<br \/>\n  box-sizing: border-box;<br \/>\n  width: auto;<br \/>\n  margin: 0;<br \/>\n  padding: 0.75em 1em;<br \/>\n  border: 0;<br \/>\n  border-radius: 11px;<br \/>\n  background: #ffffff;<br \/>\n  font-size: 1em;<br \/>\n}<\/p>\n<p>input.nl-box<strong>form&ndash;email:active,<br \/>\ninput.nl-box<\/strong>form&ndash;email:focus,<br \/>\n.nl-box<strong>form&ndash;button:active,<br \/>\n.nl-box<\/strong>form&ndash;button:focus {<br \/>\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);<br \/>\n}<\/p>\n<p>.nl-box<strong>form&ndash;button:-ms-input-placeholder,<br \/>\n.nl-box<\/strong>form&ndash;email:-ms-input-placeholder {<br \/>\n  color: #777777;<br \/>\n  font-style: italic;<br \/>\n}<\/p>\n<p>.nl-box<strong>form&ndash;email::placeholder,<br \/>\n.nl-box<\/strong>form&ndash;button::placeholder {<br \/>\n  color: #777777;<br \/>\n  font-style: italic;<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>form&ndash;button {<br \/>\n  transition: all 0.2s ease-in-out;<br \/>\n  color: #ffffff;<br \/>\n  background-color: #0168b8;<br \/>\n  font-family: Mija, -apple-system, Arial, BlinkMacSystemFont, &ldquo;Roboto Slab&rdquo;,<br \/>\n    &ldquo;Droid Serif&rdquo;, &ldquo;Segoe UI&rdquo;, Ubuntu, Cantarell, Georgia, serif;<br \/>\n  font-weight: 700;<br \/>\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);<br \/>\n  width: 100%;<br \/>\n  border: 0;<br \/>\n  border-left: 1px solid #ddd;<br \/>\n  flex: 2;<br \/>\n  border-top-left-radius: 0;<br \/>\n  border-bottom-left-radius: 0;<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>form&ndash;email {<br \/>\n  border-top-right-radius: 0;<br \/>\n  border-bottom-right-radius: 0;<br \/>\n  width: 100%;<br \/>\n  flex: 4;<br \/>\n}<\/p>\n<p>.nl-box__img {<br \/>\n  height: auto;<br \/>\n  width: 100%;<br \/>\n}<\/p>\n<p>@media all and (max-width: 650px) {<br \/>\n  .nl-box<strong>form .nl-box<\/strong>group {<br \/>\n    flex-wrap: wrap;<br \/>\n    box-shadow: none;<br \/>\n  }<br \/>\n  .nl-box<strong>form .nl-box<\/strong>form&ndash;email,<br \/>\n  .nl-box<strong>form .nl-box<\/strong>form&ndash;button {<br \/>\n    border-radius: 11px;<br \/>\n    border-left: none;<br \/>\n  }<\/p>\n<p>.cards<strong>grid {<br \/>\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));<br \/>\n  }<br \/>\n  .nl-box<\/strong>form .nl-box<strong>form&ndash;email {<br \/>\n    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),<br \/>\n      0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);<br \/>\n    min-width: 100%;<br \/>\n  }<br \/>\n  .nl-box<\/strong>form .nl-box__form&ndash;button {<br \/>\n    margin-top: 1em;<br \/>\n    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);<br \/>\n  }<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>form&ndash;button:active,<br \/>\n.nl-box<strong>form .nl-box<\/strong>form&ndash;button:focus,<br \/>\n.nl-box<strong>form .nl-box<\/strong>form&ndash;button:hover {<br \/>\n  cursor: pointer;<br \/>\n  color: #ffffff;<br \/>\n  background-color: #0168b8;<br \/>\n  border-color: #dadada;<br \/>\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>form&ndash;button:focus,<br \/>\n.nl-box<strong>form .nl-box<\/strong>form&ndash;button:active {<br \/>\n  outline: none !important;<br \/>\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);<br \/>\n  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.3);<br \/>\n}<\/p>\n<p>.nl-box__group {<br \/>\n  display: flex;<br \/>\n  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),<br \/>\n    0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);<br \/>\n  border-radius: 11px;<br \/>\n}<\/p>\n<p>.nl-box__wrapper {<br \/>\n  display: flex;<br \/>\n  flex-direction: column;<br \/>\n  justify-content: center;<br \/>\n}<\/p>\n<p>.nl-box__form form {<br \/>\n  width: 100%;<br \/>\n}<\/p>\n<p>.nl-box<strong>form .nl-box<\/strong>group {<br \/>\n  margin: 0;<br \/>\n}<\/p>\n<p>.nl-box__caption {<br \/>\n  font-size: 0.9em;<br \/>\n  line-height: 1.5em;<br \/>\n  color: #fff;<br \/>\n  border-radius: 11px;<br \/>\n  padding: 0.5em 1em;<br \/>\n  display: inline-block;<br \/>\n  background-color: #0067b859;<br \/>\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);<br \/>\n}<\/p>\n<p>.nl-box {<br \/>\n  margin: 1.5em 0;<br \/>\n  padding: 1em 0;<br \/>\n  box-shadow: none;<br \/>\n  max-width: 750px;<br \/>\n  justify-self: center;<br \/>\n}<\/p>\n<p>.nl-box__blue {<br \/>\n  background-color: #1b71bb;<br \/>\n  background-image: linear-gradient(#1b71bb 60%, #01a6c1 100%);<br \/>\n}<\/p>\n<p>.nl-box__desc {<br \/>\n  padding: 0.5rem 2rem 1rem 2rem;<br \/>\n}<\/p>\n<p>.nl-box__image {<br \/>\n  width: 100%;<br \/>\n  height: auto;<br \/>\n}<\/p>\n<p>@media screen and (min-width: 48em) {<br \/>\n  .nl-box__desc {<br \/>\n    padding: 0.5rem calc(2rem + 0.5vw) 1rem calc(2rem + 0.5vw);<br \/>\n  }<br \/>\n}<\/p>\n<p>.nl-box__desc&ndash;heading-link {<br \/>\n  color: #fff;<br \/>\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);<br \/>\n}<\/p>\n<p>.nl-box__summary {<br \/>\n  border-bottom: 0;<br \/>\n  color: #fff;<br \/>\n  font-style: normal;<br \/>\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);<br \/>\n}<\/p>\n<p>.promo-box&ndash;blue {<br \/>\n  &ndash;promo-background: #e7f8ff;<br \/>\n  &ndash;promo-text: #000;<br \/>\n  &ndash;promo-highlight-text: #e7f8ff;<br \/>\n  &ndash;promo-highlight: #006fc6;<br \/>\n  &ndash;promo-highlight&ndash;hover: #006fc6;<br \/>\n  }<\/p>\n<p>.promo-box {<br \/>\n  background: var(&ndash;promo-background);<br \/>\n  color: var(&ndash;promo-text);<br \/>\n  position: relative;<br \/>\n  padding: 125px 1.5em 2em 1.5em;<br \/>\n  margin-top: 125px;<br \/>\n  text-align: center;<br \/>\n  display: flex;<br \/>\n  flex-direction: column;<br \/>\n  align-items: center;<br \/>\n  justify-content: center;<br \/>\n  border-radius: 11px;<br \/>\n  width: 100%<br \/>\n}<\/p>\n<p>.promo-box__image-link {<br \/>\n  position: absolute;<br \/>\n  display: block;<br \/>\n  top: 0;<br \/>\n  padding: 0;<br \/>\n  left: 50%;<br \/>\n  transform: translate(-50%,-50%);<br \/>\n  width: 250px;<br \/>\n  height: 250px;<br \/>\n  text-decoration: none;<br \/>\n  background: 0 0<br \/>\n}<\/p>\n<p>.promo-box__image {<br \/>\n  width: 100%;<br \/>\n  height: 100%<br \/>\n}<\/p>\n<p>.promo-box__cta {<br \/>\n  background: #fff;<br \/>\n  color: #d33a2c;<br \/>\n  text-decoration: none;<br \/>\n  padding: .5em .8em;<br \/>\n  border-radius: 11px;<br \/>\n  box-shadow: 0 0 1px 1px rgba(0,0,0,.15);<br \/>\n  background-image: none;<br \/>\n  font-weight: 700;<br \/>\n  font-size: 1.2em;<br \/>\n  margin: 0;<br \/>\n  position: relative;<br \/>\n  box-shadow: 0 2px 6px 0 rgba(0,0,0,.12);<br \/>\n  transition: background .4s ease-in-out, color .4s ease-in-out;<br \/>\n}<\/p>\n<p>.promo-box<strong>cta:active,<br \/>\n.promo-box<\/strong>cta:focus {<br \/>\n  outline: 0!important;<br \/>\n  background: #fff;<br \/>\n  text-shadow: none;<br \/>\n  box-shadow: inset 0 3px 3px rgba(0,0,0,.3)<br \/>\n}<\/p>\n<p>.promo-box__heading {<br \/>\n  line-height: 1.2;<br \/>\n  font-size: 1.5em;<br \/>\n  font-weight: 700;<br \/>\n  margin: 1.25em 0 0 0;<br \/>\n}<\/p>\n<p>.promo-box__button {<br \/>\n  background: var(&ndash;promo-highlight);<br \/>\n  border-radius: 11px;<br \/>\n  padding: 0.8em 1em;<br \/>\n  font-size: 1.15em;<br \/>\n  text-shadow: 1px 1px 1px rgba(0,0,0,.3);<br \/>\n  text-decoration: none;<br \/>\n  color: white;<br \/>\n  font-weight: bold;<br \/>\n  display: flex;<br \/>\n  width: 100%;<br \/>\n  justify-content: center;<br \/>\n  transition: all .2s ease-in-out;<br \/>\n}<\/p>\n<p>.promo-box<strong>button:active,<br \/>\n.promo-box<\/strong>button:focus,<br \/>\n.promo-box__button:hover {<br \/>\n  border-bottom: none;<br \/>\n  cursor: pointer;<br \/>\n  border-color: #dadada;<br \/>\n}<\/p>\n<p>.promo-box<strong>button:active,<br \/>\n.promo-box<\/strong>button:focus {<br \/>\n  outline: 0!important;<br \/>\n  box-shadow: inset 0 3px 3px rgba(0,0,0,.3)<br \/>\n}\n<\/p>\n<\/p>\n<div class=\"promo-box promo-box--blue mbl\">\n    <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\" class=\"promo-box__image-link\"><img loading=\"lazy\" src=\"\/images\/smashing-cat\/cat-in-the-chair.svg\" class=\"promo-box__image\" width=\"258\" height=\"290\" alt=\"The Smashing Cat exploring new insights, at Smashing Workshops, of course.\" \/><\/a><\/p>\n<p class=\"promo-box__heading\">Useful front-end &amp; UX bits, delivered once a week.<\/p>\n<p>With tools to help you get your work done better. Subscribe and get Vitaly\u2019s <a href=\"https:\/\/www.smashingmagazine.com\/2020\/03\/smart-interface-design-patterns-checklists\/\"><strong>Smart Interface Design Checklists PDF<\/strong><\/a> via email. ?<\/p>\n<section class=\"nl-box__form\">\n<div class=\"nl-box__wrapper\"><label for=\"mce-EMAIL-hp\" class=\"sr-only\">Your (smashing) email<\/label><\/p>\n<div class=\"nl-box__group\">\n    <\/div>\n<\/div>\n<\/section>\n<p class=\"mtn mbn\"><small class=\"promo-box__footer mtm block grey\"><em>On <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">front-end &amp; UX<\/a>. Trusted by 200,000+ folks.<\/em><\/small><\/p>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Sustainable Design Toolkits And Frameworks Sustainable Design Toolkits And Frameworks Cosima Mielke &amp; Geoff Graham 2023-07-04T09:00:00+00:00 2023-07-23T03:34:38+00:00 \u201cSustainable\u201d ...<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1455"}],"collection":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":1,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1455\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1455\/revisions\/1456"}],"wp:attachment":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}