SWC Blog

WIll Your Nonprofit Messaging Survive the Story Wars?

Fri, 24 May 2013 21:29:00 GMT

Just as the channels for broadcasting your nonprofit's voice become more and more accessible, actually having that voice heard—and then appreciated and acted upon—on the other end is becoming more and more uncertain. Have you ever deleted an email before reading it? Do you read every post your Facebook friends and Twitter feed have waiting for you? This evolving challenge for communicators is the premise of the marketing manifesto, Winning the Story Wars: Why those who tell—and live—the best stories will rule the future, written by Free Range Studios co-founder and CEO, Jonah Sachs.

Sachs presents the tradition of human communication through storytelling as the key tool to help your brand shine through all the growing messaging clutter. He digs into the history of successful, socially-impactful communication from Pepsi all the way back to the dawn of word-of-mouth. Sachs believes that our traditions of storytelling are what bind us all together as humans. Because of this, you absolutely need to build an interesting, truthful and inviting story for your nonprofit brand to attract the audiences that will fight for your cause. Sachs also sends you into the Story Wars battle prepared with the knowledge that the story you've been using may not be as interesting as you think.

Illustration by Drew Beam for Winning the Story Wars

Seeing the War

Sachs begins his call to action by emphasizing the reality that "Today's media landscape of unprecedented competition between messages has made us all marketers (pg 3)." Yes, even nonprofit leaders. The first step to winning the Story Wars is being able to see the war you are facing.

The messages competing to compel a person to action are multiplying while the individual's attention for those branded messages is shrinking. In this way, nonprofits need to reevaluate stories they may have relied on to describe their work which may be very to-the-point, but generic, bland or boring. Facts, figures, and histories of social impact won't guarantee you brand followers unless your stories make the core values behind your successes clear.

In additional to attention, another human resource being fought for is passion. Happiness in consumer-driven culture is decreasing and people are looking for purposeful, cause-driven ways to spend their increasing passion for a meaningful life. But nonprofit causes aren't the only source for that fulfillment anymore.

For-profit companies now see that they can get a leg-up by marketing authenticity and social kindnesses. Sachs preaches for all brands, for-profit and nonprofit, to build engaging stories by living the truth of the good intentions they want to represent. According to late 19th century advertiser "Honest John" Powers, your marketing must: 1) be interesting, 2) tell the truth, and 3) if you can't tell the truth you must change what you're doing to live the truth. Nonprofits are already living the truth of social awareness, but if they don't invest in storytelling there could be a significant shift in brand investment away from nonprofits and toward for-profits that fulfill the same passions for good with their brand's story.

Understanding Your Weaknesses

Winning the Story Wars includes several chapters which advise you on how to build your brand's story, including common storytelling obstacles that brands face. Some of these weaknesses are categorized as the "evils" of marketing and unfortunately, nonprofit causes are not immune to them.

By researching effective communications, Sachs uncovers the common advertising tactic of building anxiety and then promising a magical solution to relieve that anxiety. These tensions are what makes dirty, unethical advertising still reach us. Nonprofits can be charged with using these fear tactics, too. Nonprofits can still create their monsters and magic answers in their storytelling which leave out the audience and fail to empower them as the hero.

Another marketing weakness is an illusion of invulnerability fostered by a sense of moral rightness. For example, BP's rebranding & do-gooder storytelling convinced its leaders that they were morally right. But their company practices were not living the truth and it caught up to them. Nonprofits fall more into the problem of living the truth but seeing themselves as invulnerable to needing to market their brand's story. Nonprofits that prop their cause up to speak for them instead of a living, breathing brand story are suffering from the illusion that good intentions automatically make you appealing and competitive.

Winning Over Your Audience

The best way to use storytelling to engage people with your brand is by making your audience the active hero. How do you make your audience see themselves as the hero? You need to pull them into a story with a protagonist, villain and conflict which present your core values and goals.

You also need to engage your audience as a realistic, empowered hero. If you tell your audience that they can be an implausible magician with the click of a button or a pair of hands in a day of service, you are losing on the chance to have them invest in transforming themselves into a true hero for your brand.

There are an enormous amount of nonprofits whose leaders probably could not sit down and agree upon their organization's story. If your nonprofit team struggles to agree on who your brand hero is and how they would act in a conflict, you'll be able to tell that your brand needs some serious attention.

For those who want to learn more, I encourage you to pick up the book and read it for yourself. You can also watch the great video Free Range Studio made about the hero's journey story model that any brand or cause can use to get its message heard.

Winning the Story Wars - The Hero's Journey from Free Range Studios on Vimeo.

3 Nonprofit Websites We Love

Fri, 10 May 2013 16:49:00 GMT

For obvious reasons, it is important that we designers stay up-to-date on the latest design trends and best practices in the industry. When we get ready to design or redesign a website, a part of our process is to get the lay of the land in the sector of our client's organization. As nonprofit leaders, you should also be aware of what is happening on the web in your industry. What are your competitors (or similar service providers) doing or not doing? Here are a few nonprofit websites we love and why.

Wishbone

http://wishbone.org

Mission:

Wishbone is a non-profit organization helping low-income students attend high-quality out-of-school programs.

Why We Love It:

Focused Engagement

This site is my personal favorite of the bunch. Everything from the look and feel to the user experience is meticulously designed. But the most successful aspect of the website is its focused user engagement. Starting with the main navigation, you have two main choices: learn about the students or learn about the programs they send the students to. This allows users two main points of entry based on their interests, either through the personal narratives of the students, or by looking for programs that resonate with their personal interests—two great ways to drive user engagement.

Also in the main navigation is a bright orange “Get Started” button. If you see nothing else on the page, you know where you can click to take action.

Compelling Narrative

The home page also powerfully sells the user on its mission by leading them through a compelling narrative that is initiated with a simple, but curiosity-inducing orange tab at the bottom of the window. It is only one of a few elements on that page which is orange, like the “Get Started” button, which visually ties them as action-oriented items. Clicking the tab leads you down through a compelling narrative, starting with an infographic explaining “the crisis.” The next stop explains “how you can make a difference,” followed by showing an example of “results,” and finally the path drives the user to take action by showing a “Get Started” button (starting to see a pattern?) as well as repeating the main navigation options along with a donate button.

Similar to the home page narrative, clicking the “Get Started” button wherever you might encounter it leads the user on a focused path of action based the type of person the user is, either “I am a Student” or “I am a Donor.” Either path quickly enables the user to take a desired action on the website.

Why it Matters:

Often, we come across non-profit websites that have many, many options for the user to select from. It can become hard for the user to focus on one task among the din of competing elements on a website. It is important to identify and prioritize your organizations goals and then how that translates to the website. Try to focus the interaction of your website to accomplish a few of the top goals, rather than include everything you can think of. If you can’t figure out what you want people to do on your website, there is a good chance that neither can your users.

Australian Red Cross

http://targetnuclearweapons.org.au

Mission:

Australian Red Cross is calling on the international community to support a convention to ban the use of nuclear weapons. Their goal is a legally-binding international agreement to ensure nuclear weapons are never used again and are ultimately eliminated.

Why We Love It:

Memorable Visuals

This website is slightly different than wishbone in that it is a microsite of the Australian Red Cross, focused on a single issue or policy objective—the international ban and destruction of nuclear weapons. As a result, it is much easier to focus user behavior. And, like our favorite websites, it is beautifully executed.

The very first thing you see is a question. Your only choice is to interact with the website if you want to continue, which not only determines how you experience the rest of the website, but is an elegant way of gathering statistical information for the cause. The remainder of the website is focused on user engagement, education, and outreach. Every step of the way has attractive and captivating visuals, especially the “Learn More” section, which utilizes beautiful infographics, typography, and photos to distill and memorably communicate its message.

Reward Good Behavior

One of my personal favorite aspects of this site is the unobtrusive goal tracker in the header, which measures social reach of the website on social media and teases reward once that goal is reached. It is an effective way to encourage engagement while reinforcing the goals of the organization—issue outreach and advocacy.

Why It Matters:

Because this website is so focused and beautiful, it makes user interaction fool proof. While this solution isn’t viable for every nonprofit, and probably most nonprofit budgets, it is a great example of creating a website that works in tandem with an organization’s main website. Done well, a microsite can do some of the heavy lifting of outreach, education, and engagement, independent of all the other goals and objectives of your organization’s website, where it might get lost in the shuffle.

Acumen

http://acumen.org

Mission:

Acumen is a non-profit that raises charitable donations to invest in companies, leaders, and ideas that are changing the way the world tackles poverty.

Why We Love It:

Arresting Photography & Bold Colors

You can’t visit this website without being immediately taken with the stunning photography found throughout, but most prominently in sliders at the top of most pages. Their original photography resonates because it speaks to the mission in a way that text can’t on its own.

We also love the use of bright, bold colors that are used to delineate sections of the website. This effective visual cue quickly orients the user—letting them know exactly what section of the website they are viewing. Unlike the previous example, this website has a much broader focus and a lot more content, so it is important to include visual “landmarks” for easier navigation.

Brand Building

I would be remiss if I didn’t mention the brilliant visual repetition of brand elements throughout. The logo mark for Acumen is a capital letter “A” set in a slab-serif typeface, with the left part of the letterform cut off by a diagonal angle. This diagonal angle is repeated as a stylistic element everywhere, including the hover states on the navigation menu, the background fill for captions of content rotators, and even subtle diagonal background patterns. These elements look nice, but the diagonal angle also lends movement and visual tension to the design (i.e. keeps it from being boring), and most importantly, reinforces the brand.

Don't be Afraid of the Scroll

All this praise aside, I’ve heard one complaint about this site repeated several times, and in fact, all three of our examples are guilty of it to some degree: the long page scroll. It’s true, all of the pages of the Acumen site are long. Most of the content is oversized (purposefully so) which, in part, leads to lengthy pages.

However, don’t be afraid of the scroll. It used to be an industry mantra to make sure that the most important content was “above the fold,” a term that carried over from newspaper printing. You don’t need to cram all of your information into a tiny box. Most, if not all, user behavior studies indicate that we have become accustomed to scrolling and will usually do so without even thinking about it.

Why it Matters:

The photography, colors, and even the background patterns are all strategically implemented to make a compelling and easy to use website. The key here is strategy. They look nice, yes, but they each serve purpose. Don’t employ any element on your website for its own sake, or because it is trendy. Be certain the visual style and implementation of your website speaks to your organization’s values and mission.

4 Ways Hand Lettering Can Support Your Nonprofit Voice

Fri, 26 Apr 2013 15:39:00 GMT

You can never underestimate the value of working with a designer to develop meaningful and effective typography for your nonprofit's brand. And I mean never. You just can't. As we've mentioned in our recent blog post on tools for finding a unique visual voice with type, typography is a fundamental pillar of building visual communication that reaches and activates the right audiences. One enduring solution that designers turn to when crafting a visual message is the purposeful visual storytelling of hand-drawn lettering. Here are some examples of the specific ways hand lettering enhances a message.

1. Distinct Personality

Left: Identity for the City of Chicago's Chicago Cultural Plan
Right: Jude Landry

The unique characters which can be developed by hand help serve nonprofits by establishing individual personalities and strengths. Hand-lettering can be useful in blending styles for complex, 'in-between' voices, like hand-lettered scripts which meld the formal legitimacy of well-crafted tradition with the friendliness of familiarity. The flexibility for arranging hand-designed letters also invites distinct layout qualities which make a nonprofit brand or message stand out from the pack.

2. Authenticity and Tangibility

Left: A campaign for Swipe for Humanity
Right: Poster for art event by Collective Good and The Imagine Bus Project

Hand lettering can help your design voice reach out as being honest, accessible and kind. The tangibility of hand-drawn letters pulls the viewer in because everyone can relate to handwriting. Hand lettering that appears spontaneous and natural creates a vibrant flow of energy from the nonprofit to the audience. Informal handwriting has such specific personalities that you can tailor it to the unique qualities of your organization, such as being energetic, quirky and slightly formal like the NeighborGood script title.

3. Local Character

Left: Design exploration for Save Michigan Campaign
Right: Book documenting barbershops and salons in South African townships

Nonprofits work in places with rich visual histories of their own. Some communities have buildings with hand-lettered signage which are a point of local pride and identity. In some instances, local heritages of hand-lettering can be delicately wielded for your messages. There is an opportunity to generate enthusiasm by either speaking to an audience in a voice familiar to them or by genuinely representing a population to outsiders.

4. Engaging Contrast

Left: Website for Center for Care Innovations
Right: A poster for a local doctor

Even in small doses, hand lettering can be a strong addition to your organization's identity. At a basic formal level, the contrast between organic hand lettering and more uniform digital typefaces is natural and pleasant, catching the attention your design deserves without being too aggressive. Mixing typefaces in order to achieve a more quirky, grassroots tone can create a fantastic, fresh energy.

Tools for Finding a Unique Visual Voice with Type

Fri, 12 Apr 2013 04:00:00 GMT

In a previous blog post, I wrote about choosing the right typeface by examining the voice, looking for contrast, and working with a strong font family. I’d like to push that idea a little further to address actually finding the right typefaces to begin with; typefaces that can be unique (or more unique) to your organization’s brand identity. In this post, I’ll share some type tools that can aid in helping you test out your typeface experience, both for print and web, or explore type options without having to make a large financial commitment first.

Typecast.com

Typecast.com is probably more fun for your web designer, but it’s a really cool online, subscription based service that allows the user to quickly style type directly in a browser to make it easy to assess if that typeface will work well in a web environment at different sizes and in different colors. The website allows you to do multiple mock-ups side by side without having to edit code individually or update scripts to generate the typefaces, allowing for faster decisions to get you to your deadline. It even lets you generate a style guide of the fonts and colors used in the design! How cool and handy is that!

SkyFonts.com

SkyFonts.com is a genius idea that allows you to activate and deactivate fonts from the SkyFonts website, giving you access to thousands of fully-functioning fonts for your testing pleasure. This is intended for print design. Once SkyFonts is installed on your desktop, it actually puts the font in your font library for use in any application, from Word to InDesign. You can use these trial fonts for any mock-ups that are created, allowing you to fully assess if you want to use it. Then, you can decide to rent the font for 1 day or 30 days for only $1 or $3, respectively, if you don’t need to make a long term commitment to a typeface. This is particularly helpful if you are designing for a special event that has its own, one-time theme, which we encounter a lot in our conference design projects. It is also helpful in letting you explore the possibilities of a font family becoming a part of your brand identity before you decide to purchase a full license for it, which can often be a few or several hundred dollars for the full font family.

Web Fonts Extension

My last cool tool for trying out fonts is intended for mocking up designs for websites. In the past, we had to use a placeholder font for the typeface that we really wanted to use in the live website, or create a funky workaround using a test site and screenshots. The Web Fonts extension by Fonts.com works inside of PhotoShop CS5 and CS6, allowing you to design with almost 5,000 web font families that are available from the Fonts.com website. Since web fonts typically have a desktop version, you could theoretically test fonts that you want to use for print, similar to SkyFonts, but you are limited to use within PhotoShop. You just have to sign-in to your account (whether free or paid), select the type layer, and double-click on the typeface you want to try. Below, I was having way too much fun trying out Neue Aachen™ Light in PhotoShop CS6. This is perfect for creating design mockups that will be true to web.

If you are a type nerd like me, are you super excited about this! Being free to explore typefaces beyond the default set on your computer without having to make large financial commitments is definitely something we can all be excited about, particularly if it will strengthen the organization brand while being unique.

What You Need to Know about Sponsor Logos

Fri, 05 Apr 2013 20:19:00 GMT

It is that time of year again: Conference Season. When it comes to hosting successful events, sponsorship dollars often play an important role. Paying homage to those generous sponsors on your conference materials and/or at your event means dealing with their logos. Do it right, your relationship with your sponsors will flourish and grow. Do it wrong, you may cost yourself money and future sponsorship dollars. Here’s what you need to know:

First, make sure that your sponsors provide you with vector-based logos (.eps, .ai, and some .tif files). Insist if you have to. These files allow you to scale while maintaining clarity, and will allow you to edit the logo, for instance to reverse it to all white for dark backgrounds. Sponsors want their logo to look its very best, so make sure they give you proper art files.
Make sure you use the most current logo. This may seem too obvious, but companies spend a lot of money creating and maintaining their brands, so you want to be certain you are using the correct logo. Be sure your sponsors haven’t recently revised or completely overhauled their logo. Even a small change, such as updating a logo with a registered trademark symbol from a trademark, can turn into a costly reprint of conference materials.
Give the appropriate amount of credit due. As you know, there are different sponsorship levels at conferences and events to encourage participation at all levels. After all, every dollar helps your nonprofit mission. Give prominence on your materials to those sponsors who sponsor at higher levels. One trick we often employ is to display sponsor logos all in one color (usually black or white) and then slightly enlarge logos of sponsors who give the most. This way the logos don’t dominate the design of your materials and only the most prominent sponsors have the spotlight.
Sweat the small stuff. Put multiple pairs of eyes on your conference materials to check for inconsistency of logo use, color, proportion, currency, and correct attribution. Preparing for conferences is a fast paced and hectic experience, and last minute edits should always be expected. It is always helpful to have someone look over your materials who hasn’t been dealing with them day in and day out.

Lessons in Scope Creep, Part 1: Confronting the Beast

Thu, 28 Mar 2013 18:19:00 GMT

At the recent Maryland Nonprofits 2013 annual conference, one attendee asked Ryan and I what we specialize in as designers working with nonprofits rather than for-profits. My response was that because we like to work with a range of sizes of nonprofits, we have to focus our talents on being able to budget the best service we can give to smaller organizations on short dollars. This is where defending against scope creep becomes a critical awareness.

What is Scope Creep?

Scope creep is the name for tiny add-ons and after-thoughts on a design project which may seem inconsequential in the moment but actually add up to a big problem. Christopher Butler at Newfangled calls each small, accumulating request a "just-a" because of the rational we employ to add "just-a…" to a project. The danger is that this thought process feels quite natural and happens to the best of us.

Letting work outside of your formal agreement remain invisible is of particular significance when working on slim nonprofit budgets. We take pride in crafting proposals that offer the most advantages we can spare for the nonprofit. We will try to put forward all we can in the plan, so it makes it really crucial not to bury that plan in all those creeps!

The illustration below shows how scope creep is dangerous because the little "just-a"s add up.

Why Scope Creep Hurts the Work

At SW Creatives, we each have such deep respect for the nonprofit leaders we work with and our hearts go out to the seemingly impossible challenges they are faced with on a daily basis. But at the end of the day, when everyone hopes for something extra from us, it hurts the work we do for you. First, there is the financial concern that comes down to dollars and cents. If we participated in all the scope creeping we felt emotionally compelled to do, there would be no SW Creatives left to support your mission. We are not trying to be financially unreasonable or take advantage of an organization when we ask to be paid for work outside the contracted scope. We like to include notes in the proposal about extra fees that could be anticipated for extra rounds of edits or extra pages on the web or in print so you know, from our experience, what common kinds of scope creep can happen.

The second way scope creep hurts the work we do for you is in the time and focus it takes away from the core of the original project. Because people are familiar with how computers can allow us to work quickly on the execution of design work, people often don't realize how much we schedule ahead of time in order to fit all the pieces together in any given 8-hour day. When you start adding scope creep work here and there, it acts like water turning to ice over time, creating growing cracks in our workflow. Then we end up with avoidable pressure on the work we planned to do for you in the first place. There is no way for us to plan for scope creep because by its nature it can be endless. That is why we have to confront the beast at the door and discuss your needs as a whole if the "just-a’s” start surfacing.

Scope Creep Frequent Offenses

I think some examples are in order to help you note where your scope creep weaknesses may lie.

In general, scope creep looks like unbudgeted rounds of edits (definitely what I mean when I said scope creep can be endless), filling in placeholder content with final copywriting, changing the design direction mid-project, extensive rounds of stock photo searching or adding new custom graphics or illustrations.
In print projects specifically, scope creep might be additional pages of content far beyond the original estimate, converting the piece into additional sizes or formats, making a PDF editable or creating a version of an InDesign document in Word or managing last-minute rounds of proofs and edits after the project has gone to press.
For web projects, clients want to add new functionally, such as mobile usability, integrate functions such as homepage sliders or event updates or complicated web forms, build a blog or expect future maintenance that was not agreed upon at the start of the project.

I believe one of the best ways to make your design budget work for you is not to sabotage your projects with scope creep. Don't be fooled by trying save on extra design work by compromising the work you are paying for. The best way to work against scope creep is putting time into your project planning and working with your designers to prioritize your needs in a practical way. Stay tuned for our Lesson in Scope Creep, Part 2 blog post about how to plan a realistic budget for your nonprofit design project.

Video: Using Adobe Acrobat for Comments and Revisions

Fri, 15 Mar 2013 15:26:00 GMT

Making edits to reports or documents that your designer has PDFed for your review can get complicated. Some clients like to print, make notes and fax back. Some like to track changes in Word. Some may even like to call and talk you through edits. We've done them all, and find that the best way to note changes in a PDF is to use the Comment and Markup tools in Adobe Acrobat.

We love using this tool to note changes we are making in a document, as well as to keep track of implementing changes that we have received. In this video blog, I’ll demonstrate how to use the following tools, along with using the comment list for tracking requests:

Sticky Note: Leave general comments in a note anywhere on a document
Text Edits Tool: Inline text edits, such as deleting, changing, or inserting text
Highlight Text Tool: Highlighting text, with the ability to comment on the highlight
Callout Tool: Point to something, such as an image or a chart, and make a visible note
Various shape tools: Useful when needing to identify an entire section, or to reference a specific element
Attach a File as a Comment: Attach a variety of document and image file types; really handy if you have multiple files of changes, because the person receiving your edits doesn't have to match up which document goes where
Record Audio Comment: Useful if you feel like it is easier to explain your comment verbally, or if the tone of your message won't come through appropriately in text

Comment & Markup menu in Adobe Acrobat

Content Audits: Building a Strong Foundation for your Website Redesign

Thu, 07 Mar 2013 05:00:00 GMT

At SW Creatives, we often compare the design process to building a house. Before you build, you have to plan. The start of any well-laid plan includes surveying the land and getting a sense of what you have to work with. The same goes for a website. Before any commitments are made to content or design, a content audit needs to be conducted.

A content audit is nothing more than than taking inventory of your website, listing each web page or piece of content you are responsible for. This first step is critical and can be surprisingly revelatory. You may even spot relationships or redundancies you never noticed before. In fact, while I was creating a sample content audit for this post, I noticed a section of our website we need to update! Ultimately, you will gain a better understanding of your website’s content.

A content audit is usually done in a spreadsheet because they are ideal for managing lots of information. A basic content should include the following:

Page ID: This is a numbering system that displays the hierarchy or relationship between the pages of your website (starting with 0.0 for the home page)
Page Name: The page title or name of page as it appears in the navigation
URL: Display the page link so anyone can refer back to the source easily
Content Description: Basic description or brief reminder of what each page contains.

Page ID	Page Name	URL	Content Description
0.0	Home Page	www.swcreatives.com	Introductory page. Contains feature projects, white paper, recent blog posts and newsletter article, and search function.
1.0	Who We Are	http://swcreatives.com/dc-design-firm	General info about company. Includes associations, certifications, vision, mission and philosophy statements. Sidebar includes contact link and twitter feed.
1.1	Meet the Team	http://swcreatives.com/dc-design-firm/team	List of team members (each links to longer article)
1.2	Giving Back	http://swcreatives.com/dc-design-firm/giving-back	Message from Shala on SWC's role in service, including Compassion Int'l and Nonprofit Roundtable. Sidebar includes contact link and Compassion Int'l ad.
2.0	What We Do	http://swcreatives.com/services	List of company services, includes white paper. Sidebar includes newsletter articles and signup form.

Ideally, a content audit should not only include a listing of all your content but also an analysis for accuracy, consistency, and relevance. When conducting a more complex audit that includes this qualitative analysis, you may also include:

Content Owner: Who wrote the content? Noting who owns the page content identifies whether content is internal or external, and ultimately who has the authority to edit or control it.
Content Type: Is this a basic page, news story, article, resource, FAQ, or something else?
Content Format: Is the content comprised of basic text, audio, video, or images?
Primary Purpose: What is the content for? Is it to inform, collect data, sign up members, rsvp for events, get donations, or something else?
Primary Audience: Who is the content for? This helps make sure the tone and voice of your content is appropriate and consistent.
Content Quality: Is the content worthwhile or up-to-date? You may want to mark these “ROT” which stands for Redundant, Outdated, or Trivial. These items are good candidates for elimination or a major overhaul.

This list isn’t definitive. Don’t be afraid to add other categories or labels that may be useful to your organization. The point of the content audit is to help you.

I won’t sugarcoat it. Conducting a content audit is tedious and time consuming. But the process is worth it and pays in spades. Your team will be able to return to the content audit again and again throughout the design process and managing your website’s content will be easier. Everyone involved in the design process will gain the insight needed to make informed design decisions and lay the foundation to a successful website.

What are you waiting for? Download our sample content audit spreadsheet to help you on your way!

{module_literature,i,168415}

Expand Your Reach with Effective Nonprofit Email Marketing

Thu, 28 Feb 2013 22:28:00 GMT

With tools for quickly designing and distributing email campaigns readily available, nonprofits of all sizes are exploring what roles email blasts and newsletters play in their marketing. Email communication is a unique tool for reaching out to your audience and connecting with them in their day-to-day life with much more depth than your 140 Twitter characters.

Mastering a polished and compelling email presence demands a purposeful balance between enticement and delivery. We can all relate to how quickly you can lose interest in an email, and thus the sender. Don't take this one-page opportunity for granted because an ill-conceived or underwhelming email can do more damage than good. To advise you on your path toward email excellence, we've gathered our top 3 elements to consider when designing or refining your HTML email design.

Compatibility

The graphic styling of your HTML email can significantly affect its accessibility. This applies both figuratively—you'll want to employ the design to make your brand personality accessible—and literally. Email readers have different restrictions than web browsers. The coding for this specific purpose is more limited than the capabilities you have on a full website.

Your primary goal for the design should be to make it viewable for all recipients. Background images will not display correctly or at all, so a layout with a clean background is a good starting point. You'll also want to avoid embedding text in images and instead use live text because you want to account for contexts in which the reader may not be able to view the image parts of the email. Lastly, you will have to leave out any animation functions, with the exception of animated GIFs, because JavaScript and Flash are incompatible.

Litmus, which specializes in email testing and email marketing analytics, uses clean, flat background color and live text

Messaging

You don't need to feel like the design of your HTML email is a lost cause without all the bells and whistles. Here is where the brightness of your messaging shines through. Your organization's branding is so much bigger than the graphic language. It includes the voice through which you address your audience. Your HTML email blast or newsletter is a time to stretch your muscles for these skills.

A great example of using a branded voice in your email messaging is TOMs Shoes. They pay careful attention even to the language used when you sign up for their email alerts. When their website thanks you for signing up, you see an encouraging "You're All Set!" line of text which implies that you are ready for the good things that are on the horizon through this connection. In the email you receive, TOMs addresses you with "Welcome to Our Movement!" In just these two phrases, or 7 words, TOMs shows you how they feel about your participation in their passionate, welcoming brand. As nonprofits you should strive for the same effectiveness.

TOMs shoes uses a memorable, branded voice in their email messaging

Upkeep

Once you have the look and intention of your email outreach established, you'll need to make sure you don't let that foundation go to waste. Your nonprofit will need a clear plan for who will maintain the email campaigns' content and scheduling. You do not want your recipients to be unable to remember when they signed up for your email blast when they hear from you. For example, here at SW Creatives we read an email series called Sidebar which is delivered daily. I find I am more likely to open emails that I read on a routine basis and therefore look forward to finding in my inbox.

An email that your audience can anticipate with excitement has a power that an email that catches someone off guard does not. Consistent email updates reflect the strength and effectiveness of the work you do with your audience's donation, time and attention. If we only hear from you when you're having a fundraiser or need help, too many questions arise as to what efforts that contribution is really benefiting.

Partnering with our nonprofit clients, we know how crucial it is to be efficient with your time and resources. Take our experienced tips into consideration and don't let your email presence go to waste.

Choosing Type: Voices, Contrast and Family

Mon, 18 Feb 2013 05:00:00 GMT

As a designer, my love for typefaces has grown over the years. I find myself watching movie titles or credits and thinking, "Nice type choice," or "That type is so simple, but strong!" Or as I get email newsletters from some of my favorite type distributors announcing an amazing type family on sale for just $39 to the first 400 people, I get all excited and immediately check it out to see if it is worthy of our growing type collection! I know, I'm revealing my inner design nerd, but bear with me as we see how typefaces can be chosen and paired.

Exam the Voice

Each typeface has its own voice or character, even within the same genre or style of type, such as scripts. Some feel commanding and bold, others warm and approachable, or very formal and chic. It is important that you choose a typeface that is appropriate for your brand. Just as we choose color based on associations or meanings, typefaces should be chosen with the same strategy or thought. Because typefaces have their own voice, you want to make sure that it is speaking the right message.

As you can see, not all scripts or sans serifs have the same voice.

Look for Contrast

As the old saying goes, opposites do attract, but not every opposite is the right fit. The same is true with type. I love pairing a sans serif typeface with a serif or a script. In the process of logo development or layouts, I rely heavily on my type choices to bring forth the various emotions that a brand should elicit, instead of expecting imagery or a single mark to tell the whole story. This takes some exploration, or trial and error, to get the combinations just right. As you mix and match, sometimes you’ll have that peanut butter to my jelly feeling, and other times you’ll get a sardine and ham sandwich (yuck)! Check out this tutorial for more on pairing fonts.

Thirsty Rough is paired with Museo Sans (left) and Avenir with Chaparral Pro (right), creating interesting combinations.

Don't Neglect the Rest of the Family

My favorite typefaces to buy are the ones that come with a large font family, which means there are many variations, such as light, condensed, regular, semibold, bold and their italic counterparts. This produces a powerhouse font family with flexibility and expression, allowing me to design an entire annual report, brochure, or website with the flair and consistency of a single family. I guess it’s like a real family…each child is different, but they look good together in the family photo!

Arno Pro (left) and Myriad Pro (right) are two of my favorite large font families.

Thank you for sharing in my design nerd fun! Tweet us your #typecreations at @swcreatives!

Is Your Nonprofit Website Credible?

Wed, 06 Feb 2013 05:00:00 GMT

If you’re like most nonprofit leaders, you focus more on serving your constituents in the real world than you do on your website. But you could be missing opportunities to reach and engage your audience. A well designed website works as hard as you do—gathering donations, networking, organizing volunteers, and advocating for your cause.

You should start thinking of your website as a valuable member of your team. Any good member of your team is successful by their ability to establish and build relationships. And the foundation of any good relationship is trust.

You wouldn’t work with someone who seems untrustworthy, and the same goes for the audience of your website. In order for your website to engage and motivate your audience, it has to be trustworthy. Otherwise, what is the point of even having a website?

Trustworthy Visuals

People judge trustworthiness online in much the same way they judge it offline. Do I know the company? Are they familiar? Did someone I trust recommend the site to me? Does it look and feel right?

A study done by the Stanford Persuasive Technology Lab found that nearly half of online consumers assessed credibility based in part on the appeal of the overall visual design of a site, including layout, font size, and color schemes.

Dr. Brent Coker, who studies the impact of websites on human behavior, puts it a little more bluntly, “As aesthetically orientated humans, we’re psychologically hardwired to trust beautiful people, and the same goes for websites. Our offline behavior and inclinations translate to our online existence.”

If that isn’t enough to convince you to carefully consider the look and feel of your website, another study performed showed people reliably and consistently rated the visual appeal of websites after seeing the home page in just 1/20th of a second. That is not a lot of time to convince people to trust you and stick around.

Trustworthy Content

At some point you will hear the phrase, “Content is King,” and in most cases that is true. Do not ignore your content in service to the visual appeal of your website. Aesthetics and content are not mutually exclusive. Your site can be beautiful, but if it doesn’t have trustworthy content, it isn’t of use to you or your audience.

There is a consensus that having a few of the following markers quickly establish credibility:

Consistent and easily visible contact information on every page (or at least available);
Photos and bios of employees, staff, and/or board members;
Testimonials from staff, partners, and/or constituents; and
Consistently updated content in the form of news, announcements, and/or blog posts

However, it is important to make sure that all your content is updated and accurate. It won’t help people trust you if your list of staff includes members who are no longer involved or contact information that is outdated. Having organized and updated content shows your audience that engaging with your nonprofit is worth their time.

Putting it All Together

Now it’s time to really take a look at your own website and objectively evaluate its trustworthiness. Does the look and feel of your website match the tone of your organization? Does it serve to enhance and organize your website’s content or does it get in the way?

What about your content? Is it accurate? Can your viewers quickly and accurately find information about who you are, what you do, and get in touch?

Making sure your nonprofit website is credible will go a long way in insuring your website is a valuable team member, working in service to you (rather than against). If you have any questions or concerns about your nonprofit website, consult professionals. That is what we are here for.

Typefaces that Served us Well in 2012

Wed, 30 Jan 2013 05:00:00 GMT

As we plow through the end of the first month of 2013, we are able to take a moment to remind ourselves of some of our fond memories from 2012. And because we love what we do here at SW Creatives, those memories involve designing. And because we are designers, that fondness involves typography.

It is valuable to remember why we applied a specific typeface in certain cases so that we focus not just on the the character that gets us excited but also on the functionality of the visual expression. Of the typefaces we put to work in 2012, we were able to determine our top 3.

Avenir

The sans-serif Avenir was a star player in the Restore the Votes campaign we designed for the NAACP to promote awareness about voter disenfranchisement of former felons. The messaging of the campaign, "They made mistakes. They did their time. They deserve to vote." and "Restore the Votes," required a delicate balance between humanizing the disenfranchised voters and generating empathy for being denied their civic voice while also aggressively demanding action of the viewer. As a geometric sans-serif, Avenir's simplicity, sound architectural principals and lightness even at its boldest weights crystallizes the ideas and intentions behind the campaign as clear, luminous truths. When we expanded the initial billboard campaign design into a 44-piece Station Domination design for Reagan National Airport metro station, Avenir was stunning in its function as a commanding, kinetic link between all the different posters, signage and pillars dominating the station.

Trade Gothic

An advertising favorite first cut back in 1948, Trade Gothic came forward in two different contexts in our 2012 work. As part of United Way's brand, we admired the crisp force of Trade Gothic's condensed versions that we were able to craft to our advantage for several programs and reports. For infographics, charts and headings Trade Gothic helps lead the reader through dense or complicated text with a reliable certainty. In the bright core United Way colors of orange, red and blue, Trade Gothic activates the page without pulling away from the reading experience. When used for setting a logo such as in the case of the new logomark for the resourceful Fraud.org website, Trade Gothic's durable condensed, vertical marks communicated the authority and trustworthiness that we needed to achieve on first impact. In a more classic palette of grays and reds in subtle gradients, Trade Gothic keeps the logomark energetic and forward-looking.

Chaparral Pro

Chapparal Pro helped set the inviting tone for celebrating the accomplishments of a legendary nonprofit for the 2012 Family Services, Inc. Annual Report. The hybrid slab-serif typeface by type design rockstar Carol Twombly really shows off its graceful, compassionate spirit when used at larger sizes to highlight stories from program participants. Chapparal gives motion and depth as a stand-in for the human voices telling their compelling stories and authentic experiences. As body copy, its legibility and charm engages a relaxed reading experience. We may have had a few shared 'oos' and 'ahhs' in the office over the allure of this under-exposed charmer.

What's Next?

While we might be just as pleased to find new applications for these powerful typefaces, there are so many challenges to look forward to in 2013 to pair typographic expression with the stirring stories of our nonprofit partners.

Think About the User Experience

Thu, 24 Jan 2013 22:54:00 GMT

It’s not uncommon for nonprofit organizations to get entranced by all the new trinkets and toys that have appeared on the web frontier. Things are now sliding, fading, zooming, and animating in ways we would have never imagined over ten years ago, when I first learned how to design and develop websites. It’s all so…exciting…and new…and we just gotta…have it all! Well, before you write that RFP for a new, organization-changing website, or if you are designing that website, consider some of the following tips.

Watch out for information overload.

Sometimes requesting a slider, a video, another large graphic feature, and prominent buttons for every single audience can bury the home page, or any page, with “stuff.” It is best to create a clear hierarchy, deciding what should be the primary and secondary focus, then organizing the additional details or calls to action in supportive roles.

I Had Cancer™ has a very clear primary and secondary focus area.

Don’t get too cute.

With the rise of font replacement techniques (which we do love), we can get carried away with the idea of having a non-standard typeface online, but lose sight of legibility and overall comfort for the eyes. Also, watch out for “creative” labeling of your menu items or calls to action. If people have to pause or question what a button, link or title means, you probably need to simplify. It’s okay to use words people will instantly recognize, even if everyone else uses them. Different is not always better.

The Boys and Girls Club in Augusta, GA uses Garage Gothic Bold for their headlines and menu, while opting for legible Arial on the body copy. They also use conventional labels for their navigation.

Remember that the web is different from print.

Often times, people struggle with expecting design for print to translate well into design for the web. While inspiration can surely be gleaned for brand consistency, the elements, layout or structure may not always be appropriate for the web, leaving the user’s eye struggling when it comes to reading the body copy of a page. In print, you get the whole view of the page or spread at one time, and it’s easier to create hierarchy that draws the eye in different directions. On the web, page content is no longer restricted to “above the fold,” so as we scroll, it can be overwhelming if our eyes are directed in a more “creative” path.

ONE employs an interesting method for separating content on the same page, while maintaining many focal points. This is achieved by creating something similar to a vertical slide show, where each “slide” contains it’s own hierarchy, but are connected together.

While the topic of good user experience is vast, I hope that you can take these few nuggets of information into your organization’s next website project.

The Great Design Debate of 2012

Wed, 09 Jan 2013 05:00:00 GMT

The past year saw a lot of big design trends: mega menus, responsive design (which, incidentally, we’ve written about), and larger-than-life background images, to name a few. Out of them all, there is one trend you definitely shouldn’t go through 2013 without knowing about: skeuomorphism.

Skeuo-what?

Skeuomorphism is the imitation of a real world counterpart in a digital design when the design element is not needed for the sake of functionality. Consider the tabs at the top of your internet browser. These were designed to resemble the tabs of filing folders. They may be a good way to organize multiple windows of information and facilitate browsing in a way that is easily understood by being analogous in the physical world, but they aren’t needed for the browser to work.

While this trend isn’t new, the conversation surrounding its use (or misuse) hit the spotlight at end of October. Apple fired Scott Forstall, chief of design at the company and one of the most highly visible proponents of this visual style since Steve Jobs himself. He was replaced by Jonathan Ive, who is known for his polar opposite, no frills, approach to design. Elsewhere, Microsoft released its widely touted operating system, Windows 8, the design of which is made up of flat tiles and uses color, photography, type, and icons to signify their purpose.

Windows 8 Start Screen

So what’s the big deal?

The ongoing debate isn’t just about an aesthetic difference. At the heart, it is about how we interact with the digital realm, both physically and emotionally.

Those in favor argue skeuomorphic design uses visual metaphors familiar to the user in order to effectively guide them. A popular example of this is the many note-taking programs and apps that are styled to mimic how a physical notepad looks. Open the program and you see digitally ruled paper, binding, and sometimes even torn pages. No one needs instructions on how to use a program like this. The visual clues tell you that this is used for taking notes and you input them on the part of the screen that looks like paper.

But what happens when a real world metaphor is no longer relevant? For example, in many computer programs the action of “save” is represented by an icon of a computer disk. No one uses disks to save data anymore and there are growing generations of users who have probably never even seen a computer disk. The relationship of the icon to its function of saving data is learned now, rather than understood by virtue of its metaphor. Visual metaphors can provide contextual clues as to what something does, but time and thought must be given to the currency of the metaphor used.

Apple, Inc.'s "notes" and "calculator" mobile applications, respectively.

The visual metaphors used in skeuomorphic design elements can also add an emotional depth to interactions. Graphically mimicking 3D buttons aren’t technically needed for the buttons on a calculator app to work, or any app or website for that matter, but there is an emotional accessibility or comfort level in seeing them. Continuing with the digital calculator example, there is emotional reward or satisfaction in seeing the visual reinforcement of a 3D button compress and decompress followed by a number popup on the calculator screen. Success! Skeuomorphism grounds a purely digital interaction in a familiar and comforting real-world experience.

Yay or Nay?

There are a number of good arguments for coming down on either side of the skeuomorphic debate. Just as with all design decisions, the key is taking the time to think through whether or not your aesthetic choice is appropriate. Are you helping your users in any way? Does a skeuomorphic element add to the emotional experience in a compelling way; does it help your audience easily understand how to navigate your website; does it help you complete a task? Even if it does, is there a better way? If your decision isn’t in service to your goals, you need to rethink your approach.

The coming year will tell whether skeuomorphic design will grow or decline in popularity. With Jonathan Ive newly at the helm of Apple Design coupled with Microsoft’s new and popular Windows 8 operating system, 2013 could be the year design definitively shifts away from skeuomorphism. Either way, this won’t be the last time you hear the term.

Mood Boards: Your Designer's Best Friend for Communicating Visual Direction

Wed, 26 Dec 2012 05:00:00 GMT

One of the most exciting parts of a design process can be the mood boards phase. This is the point where we dive head-first into the design process of making an intangible feeling that only exists verbally into a visualized tangible product. It is also a device that prevents the design process from unraveling because the expectations of the client and designer clash.

A mood board is a format for pulling together existing imagery to discuss and narrow the goals for the mood or emotion a design should create. These goals are defined in collaboration by the designer and client. The imagery serves both as something concrete to help everyone unite on the same page and as inspirational momentum to push the visual creativity forward.

A mood board by Duffy & Partners

"We dig into cultural trends, our collective memory banks, past studies and relevant archives to gather imagery. Visuals that we believe are relevant to the brand and compelling to the people a brand seeks to connect with. This is where the designing starts—as we begin to turn words into pictures—as we create a holistic, visual expression of our brief. We create a collage, along with our clients, to establish an aesthetic filter through which design decisions will be made."
Joe Duffy in Everyone's a Designer

I think of mood boards as a tool for clarifying the communication that has already begun between the designer and client. At the beginning of a project, we will have a conversation with the client about their hopes, goals and visions for the project and for their organization. The designer will pull together imagery that represents relevant words and feelings from these conversations in order to discuss and agree upon the direction that the design details need to follow. This foundation has to be very solid before we can go about building up the design decisions about typography, color and graphic style. Such factors are meaningless without a purpose of impacting the viewer with a certain feeling.

When we start to analyze the initial building-block conversations, you often come across critical terms being used which may not be as universal as you felt when the word was first added to the process. One example of this would be something as simple as the goal of having a 'magical' theme for a design piece. In this instance, we had to break the term magical down into different concepts of 'magic' in order to narrow the term to match the precise goals of the client.

SW Creatives' mood boards to clarify the intention of a 'magical' mood

"Words fail miserably when trying to translate design concepts. What one person calls 'edgy' another might see as chaotic."
Mindy Wagner in Why Mood Boards Matter

In addition to the example of 'magical' having its different meanings, there are also words that probably mean something to every single person on the planet based on their personal experience. Mood boards help us pinpoint what kind of 'fresh' and what version of 'inviting' and just how 'out-of-the-box' clients mean when they use these terms.

Putting together a mood board is often a very dynamic process. I will be brainstorming all possibilities when I gather images to share with a client. Designers often have large reserves of stored and bookmarked images to make creating a mood board a very fluid process. I will spend my extra minutes between tasks scanning blogs for potentially useful pieces to store in my Pinterest account. Later, being able to sort through all the masses of images accessible to those that will generate productive discussion requires the designer's expertise. Curating my stash for images that are relevant to a specific project is an art in itself.

Designers constantly collect potential mood board imagery to make the process as helpful as possible for the client

It is challenging to step outside of yourself to determine what certain words used to describe design goals mean to your client and then will mean for your target viewer. The mood board is critical to make designer-client communication precise, productive and positive.

SWC Blog

WIll Your Nonprofit Messaging Survive the Story Wars?

Seeing the War

Understanding Your Weaknesses

Winning Over Your Audience

3 Nonprofit Websites We Love

Wishbone

Mission:

Why We Love It:

Focused Engagement

Compelling Narrative

Why it Matters:

Australian Red Cross

Mission:

Why We Love It:

Memorable Visuals

Reward Good Behavior

Why It Matters:

Acumen

Mission:

Why We Love It:

Arresting Photography & Bold Colors

Brand Building

Don't be Afraid of the Scroll

Why it Matters:

4 Ways Hand Lettering Can Support Your Nonprofit Voice

1. Distinct Personality

2. Authenticity and Tangibility

3. Local Character

4. Engaging Contrast

Tools for Finding a Unique Visual Voice with Type

Typecast.com

SkyFonts.com

Web Fonts Extension

What You Need to Know about Sponsor Logos

Lessons in Scope Creep, Part 1: Confronting the Beast

What is Scope Creep?

Why Scope Creep Hurts the Work

Scope Creep Frequent Offenses

Video: Using Adobe Acrobat for Comments and Revisions

Content Audits: Building a Strong Foundation for your Website Redesign

Expand Your Reach with Effective Nonprofit Email Marketing

Compatibility

Messaging

Upkeep

Choosing Type: Voices, Contrast and Family

Exam the Voice

Look for Contrast

Don't Neglect the Rest of the Family

Is Your Nonprofit Website Credible?

Trustworthy Visuals

Trustworthy Content

Putting it All Together

Further Reading

Typefaces that Served us Well in 2012

Avenir

Trade Gothic

Chaparral Pro

What's Next?

Think About the User Experience

Watch out for information overload.

Don’t get too cute.

Remember that the web is different from print.

The Great Design Debate of 2012

Skeuo-what?

So what’s the big deal?

Yay or Nay?

Mood Boards: Your Designer's Best Friend for Communicating Visual Direction

"Words fail miserably when trying to translate design concepts. What one person calls 'edgy' another might see as chaotic." Mindy Wagner in Why Mood Boards Matter

"Words fail miserably when trying to translate design concepts. What one person calls 'edgy' another might see as chaotic."
Mindy Wagner in Why Mood Boards Matter