An inclusive and planet-friendly digital style guide
Sustainable, accessible, diverse, and ethical design can make digital better for all life—let’s embed them into our style guides to accelerate their full adoption.
Tom Greenwood, author of Sustainable Web Design, recently gave a keynote talk at the first International Green Digital Accessibility conference in Barcelona about ‘how essential it is that the fields of sustainability and accessibility come together to create a better world for all’.
We can expand this concept of digital accessibility to include diversity and ethics to ensure we design experiences considerate of all present and future life.
But with so much to consider, how can UX, UI, visual, and content designers ensure they foster sustainability, accessibility, ethics, and diversity in all their work?
Perhaps we need a life-centred digital style guide as a foundation for all individual brand style guides.
Sustainable design
Sustainable web design aims to reduce the carbon emissions of digital experiences by reducing the energy they use through design and service decisions, such as:
- Switching to green hosting for a website so the hosting is powered by renewables or carbon-neutral activities
- Reducing the use of images and video and ensuring they are optimized
- Minimising the use of custom fonts
Accessibility
Accessible web design ensures people with disabilities can perceive, understand, navigate, and interact with websites and digital tools, using design strategies such as:
- Adding image descriptions (alt-tags) to all images so screen reader technology can explain the images to people who are blind or visually impaired
- Ensuring the contrast of colour palettes work for all levels of vision abilities
- Ensuring videos have transcripts and captions for people who are deaf or hearing impaired
Ethical design
Green accessibility touches on ethics when it refers to prioritising security and privacy, but ethical interaction design is also about designers not using dark patterns that leverage base desires to trick users into doing things they don’t want to do:
- Trick questions — that appear to ask one thing but ask something else
- Sneak into basket — additional items added to online shopping carts through misleading user interfaces
- Roach motel — baited commitments (subscriptions, etc.) that are then hard to get out from
- Privacy zuckering — being tricked into sharing more private information than intended
- Price comparison prevention — deliberate hindrance to informed decision making
- Misdirection — distracting a user’s attention from what’s really happening
- Hidden costs — unexpected charges
- Bait and switch — being tricked into doing something else unintended and undesirable
- Confirm shaming — the use of shame to influence a user’s decision
- Disguised ads — adverts designed to look not like ads, but like curated content or part of the user interface
- Forced continuity — unannounced recharges and renewals
- Friend spam — obtaining access to a user’s contacts to spam them whilst pretending to be the user
Designing for diversity
We can also expand green accessibility to include diversity, to ensure the digital world benefits all people who are often overlooked or marginalised.
Inclusive design is often used to refer to web accessibility, but it is also about ensuring digital experiences feel as if they are made for all the target groups’ cultures, genders, sexuality, ages, etc., as well as for users of varying abilities.
“Inclusion is about creating a better world for everyone.” — Diane Richler, Former President of Inclusion International
Examples of designing for diversity:
- Using gender-neutral language
- Ensuring users from a diverse spectrum of colour, culture, gender, sexuality, body size, etc. are included in research and testing
- Ensuring diversity is represented in images, illustrations, and references to cultural rituals such as significant days and periods of time (like the Euro-Western New Year’s Eve and Chinese New Year)
- Allow for customisation to allow users of different cultures, beliefs, and ways of being to localise their digital experience
While inclusivity and accessibility have been in design conversations for decades, and are always growing in consideration, they are yet to be comprehensively integrated as default considerations into product and experience design and education.
And, while some design curriculums mention ‘design in context’, it is unclear how much is discussed about the historical negative impacts of design and the dangers of designers passing on biases that marginalise others, such as transferring discrimination into the design of powerful technology, like the AI of a chatbot, and, by proxy into all the human experiences with the chatbot.
A life-centred digital style guide
Incorporating sustainability, accessibility, ethics, and diversity ensures we design with consideration for all life—all peoples, all animals, and all planet. These are the three stakeholder groups of life-centred design, an emerging design trend expanding human-centred design to consider its impact on all life.
But accessibility is complex to learn, sustainability can be complex to calculate, ethics is often challenged by profit-driven demands, and diversity requires designers to constantly remain aware of and avoid their own biases and assumptions.
So, how can product-level designers ensure they champion sustainability, accessibility, ethics, and diversity in all their designs?
Drawing from great resources like Tom Greenwood’s sustainablewebdesign.org, Tim Frick’s Designing For Sustainability, W3C Accessibility Fundamentals, Harry Brignull’s Deceptive Design, and other resources, and through experimentation with green hosting, sustainable design, accessibility, and diversity in my own projects, I’ve been compiling research and learnings into a web-style guide that merges these four practices to guide a redesign of my own site.
The guide is still underway, but below are examples of how sustainable, accessible, ethical, and inclusive design strategies can be applied to three digital design aspects—images, fonts, colours, and user journeys.
Photographic images
Benefits of using images
- Adds context, meaning, personality, and brand
- Conveys story
- Create emotional connections with users
- Help users navigate content
- Assist scanning/readability
- Diversity in images shows a representation
Problems
- One of the heaviest digital resources, slowing performance and using more energy than needed
- Image content is meaningless to screen readers without meaningful alt-text
Key life-centred strategies
Sustainability:
- Replace with simple graphics
- Minimise use
- Use one image instead of several (e.g. for photos of the ‘the team’)
- Optimise file size
- Minimise dimensions
- Choose images less complex in colour, detail, etc.
- Avoid embedding important text in images
- Use new generation formats like Webp
Accessibility:
- Add meaningful alt-text, including describing where the image may link to
Ethics:
- Don’t use images that misrepresent a product/service
- Don’t use images that misdirect users by distracting their attention from what’s really happening
- Don’t use images that use shaming to influence a user’s decision
- Don’t use images that disguise adverts to look not like ads but like curated content or part of the user interface
Diversity:
Abstract or diversify:
- Diversify — Use images that show diverse races, genders, sexuality, abilities, ages, body sizes, etc, in diverse roles, and respecting diverse key dates/holidays/celebrations
- Or Abstract — use simplified, nonrealistic, non-specific representations of people that allow users to project/imagine their own image onto them
Images for diversity
- Unsplash
- Can We All Go: Plus-size models
- Disabled and Here: Disabled people of color
- Gender Spectrum: Trans and non-binary models
- Jopwell Latinx Collection: Latinx millennials
- Nappy: Black and Brown people
- Senior Living: Older adults
- xFrame: Asian people
Fonts and font styles
Benefits of using fonts and styles
- Adds context, meaning, personality, and brand
- Create emotional connections with users
- Help users navigate content
- Assist scanning/readability
- Communicate interactivity
Problems
- System fonts are preinstalled on computers. Customised and external fonts, therefore, increase the file size of web pages
- And more style variations (sizes, weights, etc.) increase the file size of style sheets
- Both of these increase energy use and can slow performance.
Key LCD strategies
Sustainability:
- Use mainly system fonts (preinstalled on computers/browsers), Use custom fonts sparingly (external, downloaded, custom fonts, like brand-specific fonts)
Accessibility:
- Make sure that buttons, text links, and labels are unique and clearly describe what will happen when clicked/tapped
- Ensure fonts remain readable when reduced in size
Diversity:
- Avoid fonts that are too fancy as they can be hard to decipher for people new to the site’s default language and may not translate clearly
Colours
Benefits of using colors
- Adds context, meaning, personality, and brand
- Create emotional connections with users
- Help users navigate content
- Assist scanning/readability
- Communicate interactivity
Problems
- On OLED screens, more energy is used to display whites and brighter colours
- Palettes without a contrast check can be hard or impossible to read for people with impaired vision or color blindness
Key LCD strategies
Sustainability:
- Use a darker palette, including page backgrounds
- Design a dark mode
- Ensure accessibility contrast levels—Check the contrast between foreground elements (copy, icons, borders, etc.) and the background to ensure readability for low-vision and color-blind users
Accessibility:
- Add meaningful alt-text
- Don’t rely on colour alone to convey interactivity or other information, use text underlines, copy, icons, etc.
Diversity:
- Colors have different meanings in different cultures—consider the importance of this to your target audience
Colour tools
- Enter colours into the WebAIM: Contrast Checker to check contrast at various font sizes
- Check your design work as you go with plugins like Cluse for sketch and A11y — Color Contrast Checker for Figma
- Assess your website with the WAVE browser extension
User journeys
Problems
- Business desires, such as SEO and increased time on site, can conflict with designing journeys that are efficient for the user, and this increases energy use and carbon emissions
- Inefficient journeys also increase complexity for users with disabilities
Key LCD strategies
Sustainability:
- Design mobile-first to design with minimalism and aim to maintain this across larger screen displays
- Employ lazy loading of images and content to load and show only what is in view, or employ a “Click to load more” button
- Prioritise content according to user needs to optimise the IA and show only what is needed (with easy access to more information for those who desire it)
Accessibility:
- Maintain consistent UI, ensure links and buttons are clear and recognisable
- Provide user-friendly error pages with appropriate redirects
- Make buttons, hyperlinks, and interactive elements at least 44x44px and add plenty of space around them to avoid miss-taps
Ethics:
- Don’t mislead or misdirect users into doing something else unintended and undesirable
- Don’t precheck checkboxes or pre-load additional items added to online shopping carts
- Ensure exiting from commitments (like subscriptions) is simple to understand and complete
- Provide comparison abilities for content and pricing to enable quick and informed decision making
Diversity:
- Design responsive displays for users of varying network and data capacity, using network responsive strategies, like displaying alt-text for images by default with the option to ‘click to view image
But there’s a lot more to include in a life-centred style guide, for example:
- Minimising, optimising, and transcribing video
- Using clear, jargon-free, non-localised copywriting
- Accesible form design
- Optimising graphics like icons and logos and using more efficient file formats like SVGs and sprite sheets
- And much more!
Adding sustainability, accessibility, ethics, and diversity to a style guide has been a great way to learn about these four practices and how to apply them in design, and when complete the style guide should save designers time by ensuring they’ve considered baseline sustainability, accessibility, ethics, and diversity every time.
I previously argued for embedding accessibility into style guides for these reasons. A life-centred style guide could be used as a starting point for a new site design or to inform the transformation of an existing one to accelerate digital’s transition to becoming a technology that is kinder to all life.
Not that the style guide should replace all considerations — each project should still be viewed independently through the four lenses of sustainability, accessibility, ethics, and diversity for any unique considerations.
And life-centred UX/UI design needed to be supported by sustainable, accessible, ethical, and diverse decision-making for the technology and business models supporting the human experiences.
High-level guidelines
Combining sustainable web design tips with accessible and diverse design advice from scholars Berdichevsky and Neuenschwander, media scholar and author, Björn Rohles, writer Lillian Xiao, designer/researcher Suzanne Chapman, and others, provides high-level guidelines for designing more life-centred digital experiences:
- Consider design choices from an energy-use perspective
- Create equivalent experiences by offering different ways to engage
- Use co-design to design with users, not for them
- Include diverse user groups in testing and at key decision-making
- Know your privilege to know your biases and assumptions and watch out for hurtful details and stereotypes
- See the challenges of sustainable, accessible, and diverse design as opportunities for wonderful innovation that can benefit many, such as how video captions designed for the Deaf and hearing-impaired can also be extended to all users as new benefits such as wanting to enjoy videos in noisy settings
- Consider users’ intersectionality, when different aspects of a person’s identity expose them to overlapping discrimination and marginalisation
- Never seek to persuade an individual or a group of something they themselves would not consent to be persuaded to do
At its most simple, life-centred design reconnects modern Euro-western design with the planet and human diversity, which reflects the two most important relationships recognised by many First Nations Peoples — the relationships between all peoples, and that between people and the land.
More from Damien…
Explore Damien’s two design innovation labs:
- Life-centred Design Lab — expanding human-centred design to include nature and invisible communities
- Future Scouting — Designing life-centred, values-driven future tech products with speculative design
Get practical with tools and courses:
- Life-centred Design Books and Toolkits
- Life-centred Design Courses
- Life-centred Design Innovation Cards
Follow Damien on Medium for more fringe design thinking and experiments.
