Matthew Hinders-Anderson Skip to content
Matthew Hinders-Anderson
is a graphic designer, web developer, font maker, WordPress wiz & all-in-one design & websites expert.

About

Photograph: Photo collage of Matthew Hinders-Anderson.

Matthew is a multidisciplinary designer & developer with 15 years experience working for non-profits, NGOs, labor unions, and progressive groups — including leading design at 350.org from 2009 to 2020.

Experience

Skills

  • Graphic Design
  • Web & UI Design
  • HTML/CSS & Front-end Javascript
  • WordPress Development
  • HTML Email Development
  • Print Design & Production
  • Type Design & Production

Featured Work

Free Marvin Guy

Marvin Guy has spent over 8 years in jail without a trial after being the victim of a botched no-knock raid by police.  

Police in Killeen, Texas kicked in Marvin Guy's door in the middle of the night and opened fire. Marvin, believing his home was being invaded by gunmen, returned fire. In the crossfire, one of the raiding police officers was killed. Marvin was then beaten and taken to jail, where he has been held without trial for over 8 years, in a wild and egregious violation of his rights.

With Grassroots Law Project, I designed the brand, website, print materials and social graphics for the campaign to see justice for Marvin Guy.

  • Brand
  • Digital
  • Motion
  • Print
  • Website
Back
Forward
Poster that says 'Free Marvin Guy'

11x17 posters posters and yard signs for the Free Marvin Guy campaign.

Role: Brand, design, print production.

Photo of hundreds of people marching in the street in Austin, Texas, holding signs and banners that read 'Free Marvin Guy'

Free Marvin Guy signs and banners in use at a Free Marvin rally in Austin, Texas.

Role: Brand, design, print production.

Motion graphics video for social media, as part of a call campaign to put pressure on the police officials who are holding Marvin illegally.

Role: Brand, concept, motion graphics.

Promo image advertising t-shirts and buttons for sale to help raise money for Marvin Guy's legal defense.

Free Marvin Guy signs and banners in use at a Free Marvin rally in Austin, Texas.

Role: Brand, design, print production.

Website for the Free Marvin Guy campaign.

Website for the Free Marvin Guy campaign

Role: Brand, web design, Wordpress development.

Organizers wearing Free Marvin Guy t-shirts on the way to a candlelight vigil for Marvin.

Organizers taking a selfie while wearing Free Marvin t-shirts, on their way to a Free Marvin candlelight vigil.

Role: Brand, design, print production.

Build Back Fossil Free

Over 200 leading U.S. climate and environmental groups joined together to push the Biden administration to do better.  

From Greenpeace and the Sierra Club to Patagonia and Ben & Jerry's, the #BuildBackFossil Free coalition is a massive and diverse group of companies, nonprofits and NGOs — all committed to pushing the Biden administration to do more to protect our climate, our communities, and our environment.

Using elements from the Biden campaign's visual style, we created a brand that evokes the trustworthiness, unity and authority of the office of the President, and leverages it to push our leaders to do better.

  • Brand
  • Digital
  • Tools & Templates
  • Website
Back
Forward
Poster that says 'Build Back Fossil Free'

11x17 posters for the Build Back Fossil Free coalition.

Role: Brand, design, print production.

Customizable flyers for the Build Back Fossil Free week of action. Built using Google Drawings so that anyone can quickly and easily make their own printable, downloadable custom flyer.

Role: Brand, design, setup.

Graphic with image of a young native woman. Text reads 'Build Back Fossil Free, ManifestaciĂłn Virtual, 26 de enero

Social share graphics for a virtual rally, in both English and Spanish.

Role: Brand, design.

Screenshot of a webpage in an open letter, semi-presidential style.

Early version of the buildbackfossilfree.org homepage.

Role: Brand, design, development.

Photo of a box truck with video panels covering the sides and rear. One of the screens reads 'Protext and invest in black, brown, indigenous and working class communities'.

Graphics for a video truck that was parked in front of the EPA office building in Washington D.C.

Role: Brand, design.
Photo: MVMT Catalyst.

Screenshot of the buildbackfossilfree.org homepage.

The homepage of buildbackfossilfree.org.

Role: Brand, design, development.

Global Climate Strike

More than 7 million people joined the 2019 Global Climate Strike started by youth like Greta Thunberg.  

The 2019 Global Climate Strike came after months of school strikes led by youth like Greta Thunberg and Alexandria Villaseñor. During the week of September 20-27, over 7.6 million people took part in 6135 actions in 185 countries around the world.

In my role at 350.org, I created a visual style for the strikes that was simple, easy, and free for volunteers to work with (including designing a free typeface, Greve). I also designed and built the globalclimatestrike.net website, as well as posters, stickers, Instagram camera frames and free-to-use Canva templates.

  • Brand
  • Digital
  • Tools & Templates
  • Custom Fonts
  • Motion
  • Print
  • Website
Back
Forward
Animation of versions of the Global Climate Strike logo in 8 different languages

Logo for the 2019 Global Climate Strike in 8 languages.

Role: Brand strategy, design and creation.

Global Climate Strike Instagram camera frame, featuring translations of "Global Climate Strike" as a border. The border scales to fit any size device.

Role: Concept, design and implementation.

Dutch poster for a local Global Climate Strike event hanging in a shop window in Amsterdam.

Dutch poster for a local Global Climate Strike event in Amsterdam, an example of the open-source brand in use.

Role: Brand, type design.

A sign that reads 'Closed for climate emergency' in the style of classic store window signs.

"Closed" sign for businesses to use as part of their participation in the climate strikes.

Role: Concept and design.

A full-page ad in a newspaper asking people to attend the Global Climate Strike rally in New York City.

Full-page ad in The Indypendent newspaper for the 2019 Global Climate Strike in New York City.

Role: Design and Print pre-production.

A circular badge design with 'Global Climate Strike' in a ring around the edge and an image of the Earth in the center

Circular sticker designed as a free giveaway during the climate strikes.

Role: Design.

Sample text demonstrating the custom typeface developed for the climate strikes.

Greve is a custom display font made specifically for the climate strikes and given away freely as a tool for people to use.

Role: Type design.

Photo of people at a rally, holding up signs that read 'climate crisis won't wait, neither will we

Examples of the Global Climate Strike brand and the Greve font in use on a protest sign.

Role: Brand and Type design.   Photo: Ensia Media.

Instagram post with a photo of Greta Thunberg and the text 'Strike like a 16-year-old (lessons available)

Promotional Instagram graphic featuring Greta Thunberg.

Role: Design.

Equation Campaign

Fighting climate change by funding the frontline groups that are the most affected.  

The Equation Campaign is a 10-year campaign that's aiming to cut carbon emissions in half by helping frontline groups — the people whose air, water and land are directly threatened by coal, oil and gas extraction — to fight back against the fossil fuel industry.

I helped them build a brand from scratch, quickly establishing The Equation Campaign as trustworthy source of information, training and resources on resisting fossil fuel projects.

  • Brand
  • Digital
  • Tools & Templates
  • Font Design
  • Website
Back
Forward
Two versions of The Equation Campaign logo, one with the full name and one abbreviated one with a single capital E.

Equation campaign logo and variations.

Role: Brand and Type design.

Screenshot of the equationcampaign.org homepage

Equation campaign website (equationcampaign.org) is built on Wordpress using the Baseline framework (see below)

Role: Design, Development, UI/UX.

Blue and white repeating pattern composed of topographical map lines and anti-forgery markings used by engravers

Pattern design, combining topographical maps to evoke a sense of land and geography, and currency engravings to evoke a feeling of trustworthy financial institutions.

Role: Design.

Social media graphic reading 'Funding the fight against the fossil fuel industry

Social media graphic for The Equation Campaign.

Role: Design.

Cover design for a printed report titled 'Introducing the Equation Campaign'

Cover design for a report used to help raise funding to distribute to frontline environmental groups.

Role: Design.

Black and white photo of hands in the air at a protest

Photo selections to make sure The Equation Campaign team always has a good photo handy.

Role: Photo research.

Flowchart diagram explaining the Equation Campaign's strategy — breaking the fossil fuel industry's cycle of extract, profit and influence.

Diagrams illustrating exactly how The Equation Campaign's strategy will create change.

Role: Information design.

350.org Global Brand

Global. Multilingual. Open-source. Focused on people, not polar bears. 350.org's blend of online and offline activism shifted what was possible for NGOs.  

350 is an NGO built to support the global movement to stop the climate crisis. I was lucky enough to be the lead designer for 350 from the organization's beginning in 2009 until 2020, so I was able to work with the brand in a hands-on way for over a decade.

From the start, we knew that 350's identity needed to focus on two things: One, that climate change is about more than polar bears and icebergs, it's about real people whose lives are being impacted right now. Two, that a grassroots movement needs to have tools that are free, open, and easy to use. No fancy Photoshop tricks, no expensive fonts, no complicated setups.

From 2009 to 2020, I made custom typefaces, designed climate-focused icon sets, managed a Flickr account with over 50,000 Creative Commons-licensed photos of climate actions from around the world, developed a tool that people could use to generate their own custom posters and flyers, and more. All with the focus of helping ordinary people create powerful climate visuals.

  • Brand
  • Digital
  • Tools & Templates
  • Font Design
  • Motion
  • Print
  • Website
Back
Forward
350 logo

Logo for 350.org

Role: Logo design.

Photo of a young child holding up a handful of 350 Indonesia stickers

Example of 350's brand being customized and used in a local context.

Role: Brand design. Photo: 350 Indonesia.

Social media graphic that reads 'Stop Fossil Fuels. Build 100% Renewables'

Social media graphic for 350 designed to communicate 350's core message and capture the people-power spirit of 350's mass actions.

Role: Design.

Photo of a 350-branded tote bag hanging from a fencepost

Tote bag used as thank you gift for 350's donors. It shipped with a reusable fabric pen so people could fill in the blank and customize the bag for themselves.

Role: Concept and Design.

Sample text demonstrating the custom typeface Klima

Klima is a typeface that's freely available to anyone working on climate change. Designed as a simple, flexible set of fonts for everyone, it also serves as one of 350's brand fonts.

Role: Type design.

Screenshot of animated hands in the air, waving signs and bullhorns

Animated video explaining 350's mission, strategy and values.

Role: Brand and art direction.   Animation and Production: Claire Pinegar.

Photo of a group of 350 volunteers outside a concert venue, holding a large 350 flag.

350 local group members volunteering outside a concert.

Role: Shirt design.

People's Climate March

Over 400,000 people took to the streets in New York City for the People's Climate March.  

The 2014 People's Climate March was organized by an unprecedented coalition of hundreds of groups, ranging from labor unions and schools to faith groups and racial justice organizations.

Thousands of climate marches took place around the world, including a march in New York City where over 400,000 people, including Ban Ki-moon, Jane Goodall, and Al Gore gathered in the streets. It was so successful, many of the organizers joined together to form the People's Climate Movement, a non-profit that has since led dozens of national climate-focused events.

I worked with the central organizing committee to make sure the visuals we put out were powerful, clear and consistent. While we made a style guide (and only incorporated free and open-source components), we encouraged people to bring their own style and creativity. The color orange was a central theme that helped tie everything together.

  • Brand
  • Digital
  • Tools & Templates
  • Font Design
  • Motion
  • Print
  • Website
Back
Forward

Poster for the 2014 People's Climate March. Photo is from Rockaway Beach where flooding from Hurricane Sandy devastated communities in 2012.

Role: Graphic design and photography.

Social media graphic showing one of the early estimates of attendance at the 2014 People's Climate March in New York City. The estimate was later revised to include more than 400,000 people marching that day.

Role: Graphic design.

One of the customizable handheld signs for the 2014 People's Climate March in New York City.

Role: Concept and print design.

Simple guide to using the People's Climate March brand to make your own graphics.

Role: Brand and graphic design.

Social media graphic used as part of a promotional event leading up to the 2014 People's Climate March.

Role: Shirt design.

Massive banner used at the front of the 2017 People's Climate March in Washington DC. Uses Klima, a typeface I designed and distribute freely for the climate movement.

Role: Brand and Type Design   Banner Design: CĂ©sar Maxit + others.   Photo: Hector Emanuel/Survival Media Agency.

Route map showing the path of the 2014 march in New York City.

Role: Information design.

350.org Online Actions Platform

Built on top of the ActionKit platform, I designed, developed, tested and iterated on 350's comprehensive online action system.  

Everything from petitions, donation pages, surveys, distributed event campaigns and more — it all ran through our online action system.

In addition to developing a totally custom front-end experience for the system, I also added several custom features that were useful enough that ActionKit took notice and eventually incorporated into the core system.

  • Tools & Templates
  • Website
  • Platform
Back
Forward
Screenshot of 350.org's main donation page.

350.org's main global donation page. We routinely tested variables like donation amounts, background image choice, compact multi-step form vs. long single page form, and more.   Link: 350.org/donate

Role: Design, development and testing.

Screenshot of a 'Rise for Pacific Pawa' petition from 350 Pacific

A petition from regional affiliate 350 Pacific using 350.org's petition platform. Showcases some of the customizable options I built in to the platform, like customizable background images, different color schemes.   Link: act.350.org/sign/pacificpawa

Role: Design, development and testing.

Screenshot of a Japanese petition webpage.

350 works in hundreds of countries, so their online action system needed to support lots of languages — including East Asian languages like Japanese, seen here.   Link: act.350.org/act/g20-2020_ja/

Role: Design, development and testing.

Screenshot of a Portuguese-language petition page from the 2015 Paris climate conference

In addition to working in dozens of languages, 350 also often coordinates global days of action where people from around the world take action together simultaneously — the online action system supports that by making it easy to create translated, cross-linked versions of any action.   Link: act.350.org/act/paris-response_pt/

Role: Design, development and testing.

Screenshot of a webpage that helps United States residents call their elected officials to support the Green New Deal.

In the United States, 350 occasionally runs "call" campaigns, where we provide the tools for people to call their elected officials. People can look up their elected official's contact information, as well as suggested talking points for people who are nervous about what to say.   Link: act.350.org/call/house-dems-support-a-green-new-deal

Role: Design, development and testing.

Screenshot of a local petition webpage for a Divest New York campaign

350's online actions platform was designed to scale, so it can by used for very specific, small-scale, local actions, like this one targetting New York City assembly members.   Link: act.350.org/sign/assembly-divestny-2020

Role: Design, development and testing.

Baseline Wordpress Framework

A flexible, multilingual, custom-built Wordpress framework used by more than 390 websites.  

There are thousands of Wordpress frameworks out there, but none that met the needs I had while working at 350 — our websites needed to be multilingual (including non-Latin alphabet languages like Arabic and Japanese), they needed to integrate with online actions systems like ActionKit, Action Network, ControlShift and more, and we needed to be able to quickly and easily launch new sites with custom colors, fonts and design.

After a few years of doing custom builds for every new site, I saw the potential for a framework that would extend Wordpress' multisite network functionality and allow us to create new websites with customizable design in a single click.

On top of the core framework, I built a custom page builder plugin that allows authors to create pages with complex, multi-section layouts — perfect for homepages.

  • Platform
  • Tools & Templates
  • Website
Back
Forward
Tablet-sized screenshot of the gofossilfree.org homepage, with text reading 'We can build a fossil free world'.

Website for Fossil Free, a global campaign to help people form local groups and help transition to a world free from fossil fuels.   Link: gofossilfree.org

Role: Web design and development.

Mobile-sized screenshot of the People's Climate March website, with text reading 'NYC: Join the largest climate march in history'.

Website for the 2014 People's Climate March (later becoming the People's Climate Movement)   Link: peoplesclimatemarch.org

Role: Web design and development.

Screenshot of the 350.org homepage. Reads 'Stop Fossil Fuels. Build 100% Renewables.'

Global website for 350.org, with versions in eight languages.   Link: 350.org

Role: Web design and development.

Screenshot of the 'Science' page on 350.org, reads '1. It's Warming, 2. It's us, 3. We're sure, 4. It's bad, 5. We can fix it.

"Science" page on 350.org featuring a succinct summary of the latest climate science from Dr. Kimberley Nicholas.   Link: 350.org/science

Role: Web design and development.

Screenshot of the exxonknew.org homepage. Features large text explaining Exxon's misdeeds with inline citations and documents.

Website for the Exxon Knew campaign, based on uncovered documents proving that Exxon knew about climate change 40 years ago and worked to surpress that knowledge.   Link: exxonknew.org/science

Role: Web design and development.

Screenshot of 350 Trainings website, text reads 'Share Knowledge, Build Relationships, and Lead Effective Workshops.'

Documentation site for the Baseline project, includes basic tips, FAQ, a list of useful CSS classes that are included that allow HTML authors to easily customize their page.   Link: baseline.350.org

Role: Web design, development and writing.

Screenshot of 350 Trainings website, text reads 'Share Knowledge, Build Relationships, and Lead Effective Workshops.'

350 Trainings website, featuring a large archive of useful content for trainers and workshop leaders. We augmented the Baseline framework with several tools, filters, and navigational elements to help people browse this wealth of useful training material.   Link: trainings.350.org

Role: Web design and development.

Typeface Design

Designing typefaces for activists, free for all non-commercial use.

See the fonts page for more.

Back
Forward
Clack

Clack is a monospace typeface inspired by typewriter typefaces like those found on the IBM Selectric. Perfect when you need a font that blends utilitarian sturdiness with vintage warmth and personality.

Clack features a full range of weights all the way from thin to black, as well as a full set of italics. A set of variable fonts is also included.   Link: wehtt.am/fonts/#clack

Role: Type design.

Union Gothic

Union Gothic is a display typeface that ranges from extremely narrow to ultra wide. It's great for headlines, signs, banners — any place where you need to squish and stretch your text to fit exactly the shape you need.

It was made to test the limits of what you can do with a variable font, to see if it's possible to have a typeface that slides seamlessly from one extreme to another.   Link: wehtt.am/fonts/#union_gothic

Role: Type design.

Mort

Mort is a tightly-spaced display typeface that's half Art Deco, half 70's funk. Drawing inspiration from typefaces like Raisonné, Avant Garde, Gill Sans Kayo (fuck Eric Gill, though) and the cover of Mort Garson's 1976 album Plantasia, Mort aims to blend sharp and geometric with quirky and offbeat.

Mort is a variable font with a "weight" axis, so you're using an app that supports it, you can freely adjust the weight to be exactly as bold or as light as you need.   Link: wehtt.am/fonts/#mort

Role: Type design.

Katwijk Mono

A workhorse monospace typeface suited for paragraph text, UI elements and writing code. Designed while in the town of Katwijk on the north coast of the Netherlands in January 2018 while working on the Fossil Free project.

Link: wehtt.am/fonts/#katwijk-mono

Role: Type design.

Arroyo

Big, bold, with a little old west flavor. Arroyo is a chunky wedge serif typeface with sharp, exaggerated serifs.

Link: wehtt.am/fonts/#arroyo

Role: Type design.

Klima

Simple and versatile. Designed first and foremost to be a body font suited for paragraph text. The very light and very bold weights can make for a nice title or headline, though.

Link: wehtt.am/fonts/#klima

Role: Type design.

Other Projects

Unique, unusual, or otherwise interesting one-off projects.

Back
Forward
Banner reading 'Keep it in the Ground' being displayed dramatically at the top of the Cliffs of Moher in Ireland.

"Keep it in the Ground" banner using Graph, made by the Green Party of Ireland. Photo taken at the top of the Cliffs of Moher.

Role: Type design.   Banner Design: Green Party of Ireland   Photo: Eamon Ryan.

100-meter wide image of a polar bear drawn on the Langjökull glacier in Iceland using biodegradeable food coloring. Part of a series called eARTh, where large-scale land art was created and then photographed by satelite.

Role: Bear design.   Concept: Bjargey Ă“lafsdĂłttir.   Photo: Christopher Lund  

Video thumbnail

Anti-mountaintop removal video from Rainforest Action Network, featuring a voiceover from Susan Sarandon. Watch on YouTube.

Role: Motion graphics, video editing and production.   Client: Rainforest Action Network

A massive multi-story yellow banner hanging from a coal crane, reading 'Quit Coal'.

Massive Greenpeace banner drop from a coal crane in Cirebon, Indonesia. Uses Graph as the typeface.

Role: Typeface design.   Design: Greenpeace

Jane Fonda and Melissa Laboucan-Massimo giving a speech at an outdoor podium labeled 'Jobs, Justice, Climate'.

Melina Laboucan-Massimo and Jane Fonda at the March for Jobs, Justice and Climate in Toronto, Canada, July 2015. Font is Graph.

Typeface: Matthew Hinders-Anderson.   Photo: Robert van Waarden / Survival Media Agency

Contact

Email: ma.tthew@gmail.comwehttam