Brandi Martell’s Story

Brandi Martell’s Story, A Case Study of Design and Accountability

brandi-story.002Photo by Tiffany Woods.

Brandi Martell, a 37 years old transgender woman was gunned down and killed a few blocks from our office in Oakland in April 2012.

Brandi worked as a peer counselor at the Tri-City Health Center’s TransVision program, a local direct service and advocacy organization for transgender/transsexual women. She mentored transgender youth and tragically, also helped organize Transgender Day of Remembrance, to honor transgender slaying victims.

DA founder and designer, Inno, had been following websites around trans* issues. Because of the sheer closeness of this tragedy, he felt compelled to design a poster to not only commemorate Brandi, but that could also be useful for action around transgender violence.

He wanted to create something that not only had meaning for the community, but could be useful for advocacy, action or education.

Design Action has a philosophy and approach to how we try to stay accountable to a community which we offer support to. We think of it as activism versus our own self-expression.

Here is the process which we undertake when offering designs to support a community:

  • Discovery – We make contact with the organization to get more of the story, find out who is affected, and see if there is organizing taking place. If it doesn’t feel like the right fit, then we look for other places that can fully utilize a design.
  • Art – What visual elements symbolize the person, the issue, or the emotion? How do they resonate with the audience?
  • Copy – What is the call? Is there more information that needs to be on the poster? What is the shelf life of the message?
  • Usage and Distribution - How will it get disseminated? How will this get produced?
  • Impact – Try to assess the effectiveness of the poster and document the uses.

Discovery

Inno got in touch with Tiffany Woods who took the photo of Brandi circulating in the media, and who is Brandi’s former supervisor at Transvision.

He asked if they would have use for a poster if we created one. We want to make sure our work is useful and can be used for advocacy.

If he had just made a poster design and given it to them without being in consultation with the folks on the ground,  then there’s the chance that the messaging or image wouldn’t be as meaningful.

We have a responsibility to the community we are designing about, especially when working with invisible or misrepresented communities. Therefore it’s good practice to be in consultation with the people who are on the ground and experiencing these issues every day.

Art

Inno started with the original photo and traced/illustrated it. He chose glittery/celestial patterns for texture and butterflies as a symbol for transformation. But it was important he asked Tiffany if it was appropriate, so as not to stereotype trans-women’s identities. Her friends did ask him to include Hello Kitty, which was a symbol that Tiffany was into.

Copy

Tiffany provided the copy to be used on the poster.

There was a discussion if there was a call to action, and deliberated about using the headline “Investigate Now” around her murder. Ultimately that was discarded for “Say No to Hate,” so that the poster would have a longer and more wide-spread “shelf-life” and become a rallying call across all trans* communities against violence.

Usage and Distribution

Inkworks Press, our sister shop and movement servicing press, donated the printing of the posters.There was a plan to be able to distribute the posters at the vigils, memorial, the Trans* March, and even at international events, like the World AIDS conference.

brandi-story.010

brandi-story.013

 

Impact

The beautiful image of Brandi has been repurposed for the invitation to her memorial. Since then, the community has used the poster as a tool to spread awareness of her murder and as a call against hate violence.

brandi-story.012

Posted in Case Studies

Money For Our Movements Designing for the Left Session

noborder_mfom14_designactionDownload DesignAction_MFOM_Presentation from Money for Our Movements 2014, presented on August 2 in Baltimore, MD.

Here are some points made during the session about designing your Fundraising Communications

Design is not just a pretty picture and a nice font. Often good design is not even seen. Design is also the structure that communicates information that keeps people engaged and wanting to know more. It leads them to taking a certain kind of action.

Good design is functional. It takes the user or reader on a path, so their experience is accessible and enjoyable.

Design is the foundation, like a house you don’t see the frame. But whether it’s a website, or a report, the content and the pretty things rest on that foundation, like the paint and the embellishments.

Always remind your audience – ie. your donors – what you do and why it’s important. Show the stories, so donors know that their donation is being put to good work, that their donation has made a difference, and how.

Use good compelling photos ideally of your membership in action, or the clientele of your agency (not a bunch of people sitting around a meeting table talking). The photos don’t have to be literal, they should be compelling, and depict the mood you are creating, and the success of your work.

Remember white space: not only does your text need room to breathe, but it allows for balance on the page. And most importantly it allows for legibility, for the eye to rest. Even if you have background images and textures, or design elements on the page, “white space” is about leaving space around your text and images so they are not all crammed together. Margins are important!

Typography — choice font usage to enhance legibility and usability. Part of the design itself, such as in headlines, pullquotes, or the word mark and tagline of a logo.

When thinking of what graphics to use, keep in mind your audience and create the tone and message of the design appropriate for that audience. It is possible to do this for donors and for your members, and keep the essence of who you are.

Distribution — where will this communication piece be seen? As a sharable online graphic? As a report which is printed? Design according to the medium, ie. few words and bold typography for a sharable graphic and uncluttered design. A report? then you can place more content.

If you have dense text then break it up with pullquotes, photos and captions so the reader can skim the report and still get the message. In this case, keep your margins wide and airy, and space between the lines (known as Leading).

High resolution vs. low resolution — if you are printing then you always need to use high resolution photos. So a 6” x 4” photo at 300 dpi  (dots per inch) = 1800px x 1200px. So size accordingly. If you get an image off the web, then make sure it’s under Creative Commons licensing and you can get a high rez image. You can use an online photo sizer tool called

Vector vs. Raster or Bitmap — a Vector image is a shape made up of a path using an illustration program. It can be expanded without losing information, so therefore it is the highest quality file you can have. A logo should always have a vector version. Rasterized or Bitmap images are made up of a grid of pixels and will lose information as you enlarge the image. These images are usually photographic or images that have been converted in a photo design and editing program.

Logos — read our book, Know Logo. Use your logo to expand a consistent visual identity across your communications pieces for recognition of your organization.

Online presence

Questions came up in the section of the workshop on analytics about how to track information about your organization’s online presence that are not associated with your website, like facebook and twitter.

There’s a great resource from Aspiration Tech about how to set up listening boards and listen for mentions of your organization on social media and elsewhere online. Check out their online seminar and other resources!
https://aspirationtech.org/training/eadvocacy/online/2013/october/materials#listening

While you are there you can also check out their enewsletters for fundraiser webinar as well! Thanks Aspiration, we know you’re listening!

Tips for working with designers to keep costs down and process streamlined.

Posted in Case Studies

You are invited to our Office Warming Party!

Come join us August 29th from 5-8 PM to see our new digs, check out the hip wood-paneled wall, partake in snacks and libations, and chill out with us and each other!

RSVP here! Continue reading »

Posted in Events & Updates, News, News

On the Road to Detroit – Allied Media Conference 2014

We are excited to be heading to the AMC again this year, as well as being a co-sponsor of this year’s conference! This year Design Action members, Sabiha, Andrea, Sarah, Ivy and Nadia are presenting and participating in numerous workshops.

Come meet us here:
Muslims Making Media, Making Change
Thurs, June 19: Network Gatherings / 10:00AM – 5:00PM
Muslims Making Media, Making Change will focus on the media tools we are using in our communities to challenge violence with the hope of inspiring each other, building solidarity, and spearheading future collaborations. Mainstream media often reduces the diverse voices of Muslims. We are are made to be monolithic, silenced, relegated to the margins. Our own communities as well can make us feel isolated, judged, or policed. This gathering will be an opportunity for anyone that self identifies as Muslim through the spectrum of familial, spiritual, political, cultural, or ancestral connections.

Visualizing the Story
Sat, June 21, 9 AM: 3-hour workshop.
As cultural workers in campaigns for social justice how do we design effective visual messages while staying accountable to communities at the frontline of social injustice? In this session we will share methods of collaborative design that can generate compelling and politically relevant media. We will hone skills for creative problem solving in the process of developing a message and translating it visually. Participants will develop a message and visual concept for their own campaign or creative project.

Surveillance Self-Defense Skillshare
Sat, June 21, 2 PM
In the face of rampant surveillance by powerful forces, how can we protect ourselves while communicating online? This session will start off with a panel discussion and then move into hands-on breakout groups to skillshare in different areas: “Encrypt the Hood” w/ Jabari Zakiya; “What’s Your Type” w/ Mark Burdett/Andrea Salazar; “PGP Encryption Hands-on Jumpstart” w/ Jack Aponte

Worker Co-ops Work Well
Sun, June 22, 3 PM
How do we sustain ourselves in this work in a way that reflects our values? Members from several worker-owned cooperatives will share personal stories of the challenges and lessons learned being part of democratic workplaces. Join discussion groups on issues such as financial planning, meeting facilitation, and policy development. Bring your questions and ideas and leave with resources and tools for developing successful worker-owned cooperatives.

Creative Resistance and Direct Action
Sun, June 22, 10 AM, with The Ruckus Society
Creative, bold visuals and performances make a great center piece for every direct action and unify your group, amplify your message, inspire people to have a personal interaction with your work, and provide a visual story through symbols that clarify the issue. Through popular education exercises and tactical exploration, we will explore how to use art as a campaign and organizing strategy, and how to plan creative actions that make change irresistible.

Posted in Events & Updates, News, News, Uncategorized Tagged , |

We will be closed April 25-28.

Design Action is moving down the street so we will be closed April 25-28 as we move our office to:
1730 Franklin Street, Suite 103
Oakland, CA 94612

Stay tuned for open house information!

Posted in Events & Updates, News, News

The Importance of Design for Your Copy Writing Weds. Presentation

1. Before and After – from plain text to a designed piece

2. This layout shows many design elements that a writer can consider when writing. What pieces of information are important for the skimmer to take away from the piece? The use of pullquotes, text boxes and data visualization helps to break up the text and enhance the important information in the report.

 

3. A concept or metaphor goes a long way and really intersects the written content with the visual imagery and typography, design and layout choices for the piece.

4. A large infographic piece created for online reading. The writer and designer had to work closely together to realize the concept and metaphors used, as well as making sure that the key data elements are elucidated.

5. A short illustration which highlights some key points of information, that was shared on social media.

6. Consider where the audience will be reading the content. In this case, this poster was on a BART (commuter) train, where the audience is captive and looking for something to read. So more text could be incorporated into this poster.

7. Who is the audience? These pages are from a heavily designed report which was geared to students to take action around computer and high tech recycling.

8. The audience for this report is concerned about policy change, so the design is clean and serious, and clearly communicates the content, while still using some elegant design elements to humanize the design.

9. How do we consider a piece, such as this newsletter from a POWER, a grassroots economic justice organization, that needs to speak to a diverse audience, made up of youth, elders, English and Spanish speakers, working class and low-income people, as well as funders and donors, without losing the essence of the organization’s mission? The use of color, bold headings, text blocks, and photography, as well as equally balanced layouts in both languages, speak to a wide range of stakeholders.

10. Some tensions between writers and designers: the use of white space. This example shows what happens when the writer wants to fill up all the space with text. It looks a bit daunting.

11. White space, or negative space, is a just as crucial a design consideration as what is placed on the page. It gives balance to the piece, increases legibility and enhances the reader’s experience.

12. Even though writers and designers have this tension about when to cut copy, there are ways to be able to incorporate more text into a piece. Some design gets compromised, but through the use of design tools such as color, typography, and design elements, these are still visually pleasing pieces.

13. This one-pager is heavy on text, but with some strategic design elements and use of custom icons, the piece is a visually exciting tool for the campaign.

14. A small trifold brochure using some basic design tools: use of color is not overloaded but kept to the color photographs and strategically used throughout the piece. A good use of leading, the space between the lines, breaks up the text while also drawing it out on the inside left panel. Bullet points and quotes also make this a digestable piece for the reader to understand what the project is doing.

Some links I have found useful:

http://vandelaydesign.com/blog/blogging/editing-goofs/

http://www.vanseodesign.com/web-design/communication-design-writing/

http://www.smashingmagazine.com/category/graphics/

http://indesignsecrets.com/

Posted in Uncategorized

The Loving Tension Between Writers and Designers

How many time has a copywriter bemoaned that designers always say there’s too much text? How many time does the designer  want the editor to cut more text?

How can we come to a perfect harmony?

Graphic design should make your text sing. Good design should enhance the text—it is the supporting actor to the lead star, making sure that the lead role drives the plot and the story. It is the rhythm section to the leader singer. It is the choir to the diva. At the same time, if the story is dominated by the one star always taking the solo, the audience can lose interest—it starts to feel monotonous. This is why design can enhance the copy.

Functional graphic design shouldn’t overwhelm the reader to distraction but encourage the reader to read the this brochure, report, flyer, advertisement. Graphic design should show off the stars of the story.

Graphic design can transform your copy into an eye-catching piece:

And give it a level of sophistication:

How does graphic design interact with your copy?

Color: Less is more when it comes to color. A good color palette will enhance and not distract. We want it to be easy for the reader to read the text. Accent colors can pop out key points.

Why White (or negative) space is important: It’s tempting to use all that extra space up to the edge of the page so we can keep all the important copy. But here is why it’s not a good idea (compare to above):

White space allows the eye to rest. It increases legibility. It increases attention span. It allows a level of sophistication. It creates breathing room and balance. The eye and the brain feel at ease.

What the heck is leading? Simply, the space between the lines of text. How much space depends on the context of the piece. With dense reports, newspapers, and articles, increasing leading will aid in legibility. For design purposes, imagine a beautiful quote with a beautiful font allowed to shine on a page of an annual report.

Typography and Text Styling: Designers use typography to enhance text, to evoke a feeling, or that is easily read on a page. Fonts for text, headings, and special treatments, are carefully chosen from a wealth of fonts available. Using the different fonts in a family (bold, italics) helps enunciate key text. The use of different typefaces should complement each other, based on many factors, as well as support the tone of the publication.

Write with design in mind

What do you want to stand out in the article? Whose story can we bring attention to? These little cues can help the designer bring attention to a specific content that needs to stand out. What do you want the skimmer of the report to take away? Text boxes, pullquotes and captions to the compelling images will be what attracts that skimmer to read.

Where will this piece be read, on a commuter train where you have the readers attention to read through the entire ad, or in a short-attention span, info-overloaded space like an exhibit hall at a conference? These considerations will allow the designer to know how to design the pages, lay out the copy and style the text.

Overall good graphic design is meant to support and enhance the main messages of the content and make the copy accessible and pleasing to read.

“The dumbest mistake is viewing design as something you do at the end of the process to ‘tidy up’ the mess, as opposed to understanding it’s a ‘day one’ issue and part of everything.” ― Tom Peterson

NOTE: Design Action will be presenting with Writing to Make A Difference on a FREE conference call for Writing Wednesdays, March 5 at noon Pacific.

Posted in Case Studies, Design Styles & Samples, Events & Updates, News

2013 Year in Review

DAC.YIR2013.42013 was a landmark year for Design Action Collective. We celebrated our 10 year anniversary and strengthened our relationships with organizations working for social change. Here are some highlights:

10 Years of Designing for Change

To mark our 10 year anniversary, we did a retrospective show at the SoleSpace gallery in Downtown Oakland on March 8. Because our show opened on International Women’s Day, we released a new poster at the event titled “Speak Out Against Gender Violence.”

womensdayposter

Our goal for this show was not simply to showcase the huge body of work that has come out of Design Action over the years, but to celebrate the organizers and activists we’ve had the honor of working with on successful campaigns and ongoing struggles.

Check out our Video Retrospective.

We all had a great time dancing the night away!

party

 Check out the article in Oakland Local by Bonnie Chan.

A Year Full of new Logos, Websites, and Infographics

We are proud to have launched 36 new websites, designed new logos for 40 organizations, and flooded social media with timely campaign graphics. Here are a few…

 up khmer

flic

kaporcenter

Social Media Graphics

socialmedia

Info Graphics

We have sharpened our skills in the art of data visualization and created several infographics this year.

infographic

 

Design Action Out and About

In addition to sitting at our computers building websites and designing campaign materials, Design Action members were out in the streets and organizing with our diverse communities around issues or gender justice, workers rights, and immigrant rights.

In March of 2013, Josh Warren-White attended the World Social Forum in Tunisia as a photographer for the Grassroots Global Justice delegation representing social movements across the United States, including delegates from many of our client organizations such as Causa Justa/Just Cause (CJJC), Asian Pacific Environmental Netwrok (APEN), Labor/Community Strategy Center, Indigenous Environmental Network (IEN), Miami Workers Center (MWC), Southwest Workers Union (SWU), and many more. It was a powerful experience to be in the birthplace of the Arab Spring building solidarity with leaders from the front lines of social movements around the world. Below is a collection of photographs from the delegation. You can read the full reportback from the US delegation here.

sarah and poonamPoonam Whabi and Sarah Reilly are part of the Brass Liberation Orchestra (BLO).  They brought up the precussion section this year as BLO played energetic music at the May Day March for Immigrant Rights, the climate justice rally at the Richmond Chevron Refinery, and  rallies supporting BART’s striking workers to name a few.

Nadia Khastagir has been working with San Francisco Women Against Rape (SFWAR) for many years — designing the logo and outreach materials for the organization. Nadia is now on the board for SFWAR and helped put on a successful event this year honoring the organization’s 40th anniversary.

Andrea Salazar and Ria have participated in several local hackathons developing empowering tech tools. Ria participated in Trans*H4CK, the first-ever hackathon focused on bringing together trans and gender non-conforming tech workers to create projects that advance social justice. The tool Ria’s team created, Trans Resource US,  won Trans*H4CK.

A is for Activist, the ABC book for the 99% that Inno wrote and produced originally as a Design Action project, turned out to be a hit. It won the Horace Mann Upstanders New Talent Award, and sold out by mid year. Since then it has been picked up by Seven Stories Press and is already going into a second printing with them. AND a Spanish adaptation by the Grammy Award winning lead singer or Quetzal, Martha Gonzalez, is coming soon!

Design Action members gave presentations on communications for grassroots activism and participated in panel discussions on worker coops at several conferences and events this year including Allied Media Conference, The Western Worker Coop Conference, and the Aspiration Tech Nonprofit Software Development Summit.

We are grateful to our community for helping us to stay accountable to the changing, evolving needs of the movement. We look forward to more collaborations in 2014!

 

 

 

 

Posted in Case Studies, Events & Updates, News, News

Join the Conversation with Center for Story-Based Strategy, Design Action and New Tactics

This week, October 14-18, Design Action is participating in an online conversation, Change the Story: Harnessing the power of narrative for social change at New Tactics in Human Rights.

This conversation is led by Center for Story-Based Strategy to dig deeper with activists around the world into using stories to organize, change the dominant narrative and develop strategies into campaign planning.

Posted in Messaging and Strategy, News, News

Design Action Represented at First Trans* Hackathon: Trans*H4CK

This past weekend, Design Action sent one of our team to Trans*H4CK, the first-ever hackathon focused on bringing together trans* and gender non-conforming tech workers to create projects that advance social justice for the trans*/GNC community.

A bit of background: a hackathon is an event—often a (friendly) competition—where a group of people come together for a short duration of time and use coding, programming, and design to create technology around a central theme. Trans*H4CK is the project of Dr. Kortney Ryan Ziegler, a local transgender advocate, and was created to address the significant challenges facing trans* people, especially access to healthcare, safe housing, and employment. The Trans*H4CK website (transhack.org) succinctly sums up the purpose of this hackathon: “A necessary step in addressing anti-transgender bias is to create technology that socially empowers transgender individuals.”

Design Action was represented at Trans*H4CK by Ria, our newest member. About forty people participated in the hackathon, divided into several competing teams. Ria’s team chose to create a resource where trans*/GNC individuals could enter their zip code and find local trans-friendly resources within a variety of categories.

The Trans*Resource US homescreen

Ria was part of Trans*Resource US’s front-end development team, where she designed the website skin and coded the page in HTML5/CSS3.

This project—which became Trans*Resource US over the weekend—worked as a responsive website, fully optimized for both desktop viewing and mobile browsing. The team had a strong commitment to accessibility, and early on chose to not only make sure the site was usable on a range of devices (including screen readers for the visually impaired), but could also be used by people without access to computers or smartphones. Thus, the project also incorporates an SMS based service, TranSMS, where people can send a text message with their zip code to 617-433-TRNS (8767) to receive local resources.

A number of inspiring projects came from the other teams, including a clothing exchange service between transmasculine and transfeminine individuals, a legal resource guide for healthcare access, and a micro-survey platform called Dottify.me. However, after a nerve-wracking wait while the judging panel deliberated, it was announced: Trans*Resource US is the winner of the first trans* hackathon!

The Trans*Resource Us homescreen on mobile and tablet screens

Considering what devices your target audience use is an important part of any web design and development process. A large part of the Trans*Resource US front-end development was making the site responsive, in order to be viewable and accessible on as many screen types as possible.

While the team still has significant work to do to meet the goals of the website, a functioning alpha version is available at www.transresource.us.

Posted in Case Studies, News