You are here

website design

Last year, we showed you a great way to save time and money by letting your web team produce a website for your annual report. Online presentations are easy to deliver and easy to track, making them the perfect approach for conscientious...Read more.

If you're still putting out annual reports the old fashioned way—pulling stacks of statistics, rounding up designers, blowing your budget on print copies, etc.—this post might be an eye-opener for you. Not only are annual report websites generally...Read more.

We're back with our 2017 favorite examples (in alphabetical order) of what a great non-profit website looks like and what makes it stand out. Our hope is that by emulating these exemplary non-profits, you'll soon be able to provide an even greater...Read more.

Nonprofits ask us all the time: “how can I raise more money through our website?” Although there are many moving pieces to the answer, there are several donation page best practices that will help raise more money online. Our team has compiled a...Read more.

Even in a debate-driven world, there’s one thing most professionals agree on: Word-of-mouth is king. Think about it. Would you be more likely to trust the intentions of a banner ad or the person sitting across from you at brunch? A recommendation...Read more.

Imagine going to a new grocery store and not having a clue where anything is. There are signs, but they’re vague and confusing. Maybe they’re so obscure you don’t notice them at all. Would that make for a good first impression? If you’re anything...Read more.

Designing a new website, or redesigning your old website, is a large project to undertake. Larger than most people think. According to SME Website Statistic , 48% of people cited a website’s design as the number one factor in deciding the...Read more.

There are a few basic prinicpals to keep in mind when choosing typography whether it is for print or web design. Let's start with what needs to be considered for both and then we will focus on web design specifically. Personality & Tone The...Read more.

As I am sure any front-end developer can attest to, there are a lot of "small bits" (and maybe some large ones) that we as designers forget to create, or just simply overlook. This can include functionality like hover effects that maybe unclear, or...Read more.

The California Family Health Council is a statewide nonprofit that champions & promotes quality sexual + reproductive health care for all. They are leaders in passing recent legislation that as of 2015, gives those covered under another person's...Read more.

Deciding which marketing channels you want to focus on and what you want to present on those channels can be challenging. Many organizations and companies try to "do it all" and find that they are not getting the results they had hoped for. If you'...Read more.

10 Impactful Annual Report Websites

Last year, we showed you a great way to save time and money by letting your web team produce a website for your annual report. Online presentations are easy to deliver and easy to track, making them the perfect approach for conscientious organizations.

This year, we wanted to revisit that notion with a fresh dose of inspiration. From standout styles to user-friendly features, these annual reports are raising the bar for everyone:

Scroll through this vibrant report and you’ll find a clever way to display a lot of (pertinent) information. Donor lists are accessed by selecting a contribution level and navigating side-to-side, rather than appearing as one giant wall of text.

According to the text, “Visitors to the Museum are encouraged to leave a message on digital screens near a piece of World Trade Center steel.” Here, some of those impressions have been incorporated into the design and are displayed on a loop.

This organization provides a print (.pdf) option at the end of its digital report.

Our Takeaway

Websites may be the future of annual reporting, but for these impressive organizations, that future is here. If you’re ready to join them, shoot us a quick message. We’d love to help you show off your work to the world!

Online Annual Report Website Examples - 2018

If you're still putting out annual reports the old fashioned way—pulling stacks of statistics, rounding up designers, blowing your budget on print copies, etc.—this post might be an eye-opener for you. Not only are annual report websites generally less expensive, they're also easy to fill with impactful media, easy to deliver, and easy to track. Plus, they're much more conscientious of the planet.

Letting your web team produce a professional site for this year's accomplishments could be a great step into the future for your non-profit—but don't take our word for it. Check out these reports from businesses and organizations who've already adopted the process to impressive results:

GRID Alternatives

gridalternatives.org/annual-report-15GRID Alternatives' adopted an online annual report format a few years ago and now simply updates the stats, graphics and stories each year with new information...saving time and money. Their annual report is styled in a familiar, almost print-like layout.

Echoing Green

echoinggreen.org/2014 Echoing Green's 2014 report used floating side navigation to make it easy for visitors to jump to the information they were most interested in.

MailChimp Again...

Lemon.ly

lemonly.com/2016reportLemonly encouraged visitors to interact with their 2016 report, using a circular beam of "light" to reveal facts.

Flama

2016.flama.is/Flama laid out their 2016 report as a click-through slideshow.

One.org

one.org/annualreport/One's bold use of color and typography combined with compelling photography and language really makes their annual report shine.

Our Takeaway...

Styles may vary, but all successful annual report websites have two things in common: professional presentation and convenience. Sounds like a win, win!Need help with your next Annual Report? Drop us a line!

17 Inspiring Nonprofit Websites—2017 Edition

We're back with our 2017 favorite examples (in alphabetical order) of what a great non-profit website looks like and what makes it stand out.Our hope is that by emulating these exemplary non-profits, you'll soon be able to provide an even greater user experience for your own site visitors—generating all the support you need!

acumen.org: Acumen’s color palette is energetic and modern. Their use of angled boxes gives a flare of visual interest, further making them seem like a forward-thinking, innovative and compelling organization. Acumen also does of a good job of showing both the qualitative and quantitative nature of their impact through engaging story-telling and simple, yet bold infographics. Their incredibly strong and authentic photography is the final piece that really sets this website apart.

amnesty.org: Amnesty International's website combines news site-like feel with clear nonprofit impact. Their home page uses large, compelling photography with an action-oriented visual language. Their newsfeed allows visitors to filter by topic, region/country, and resource type. Combined with directive and clear iconography, this website takes bold and engaging to a new level.

care.org: Care’s website does a great job of showing visitors the various ways they can take action, get involved and share content. Their site illustrates a campaign focused, impactful layout through the use of engaging infographics with clear calls to action. Care’s bold use of iconography and mapping, takes their visual language to the next level.

charitywater.org: Charity Water's website is well-organized and illustrates ‘hope’ in its truest form. Clear water, happy faces and bright photography are used in perfect balance with simple iconography, impact numbers and well composed calls to action. Lastly, their color palette and typography are both welcoming and approachable and once navigated to, their donate page is simple and unintimidating, making it easy for visitors to support their work.

farmland.org: The American Farmland Trust uses a vibrant, earth-tone focused color palette that feels warm, engaging and modern. They display information in some unique ways such as their navigation dropdown taking the form of a full-page color overlay, their challenge statement is displayed through interactive statements paired with colorful infographics and impact numbers paired with compelling photography. Their internal pages display layers of information on a single page through clear hierarchies and language.

feedingamerica.org: Feeding America's use of bold colors, large photography and unobtrusive text overlays is simple, direct and to-the-point. Their content strategy is excellent—they know their audience(s)— headlines like, “No one can thrive on an empty stomach,” are extremely compelling and give site visitors an engaging introduction to the importance of their work.

gatesfoundation.org: The Gates Foundation website stands out with an extremely clear and well organized site navigation. Though they utilize a more minimalist approach with a mobile-focused, pop-out menu, site visitors are able to quickly and easily expand sub-menus to see the full depth and breadth of this organization. Their typography is also an excellent example of classic and modern, serif and sans-serif well combined for a sophisticated legibility.girleffect.org: Girl Effect's about page guides you through a carefully crafted narrative. They clearly and directly explain why they exist, what the issue is that they solve and the impact statistics that support their work. Girl Effect’s writing is engaging and easily digestible, inspiring site visitors with their energy, optimism and ambition.

globalfundforwomen.org: Global Fund for Women combines striking visuals with bold color and modern typography, creating an engaging and sophisticated home page. Their ‘grant-making’ ‘voice’ and ‘join’ triad illustrates an ideal content strategy and information architecture—guiding site visitors from understanding their work to a clear call to action. Internally, in addition to traditional monetary gifts, the Global Fund for Women's donate page encourages support in a variety of forms, i.e. cause marketing, corporate matching, etc.

KIPP.org: KIPP’s website utilizes a vertically oriented, color block layout that offers succinct information about their work. Small animations are included to give a sense of light-hearted professionalism. Color overlays, tabbed interfaces and a variety of sliders are used to conserve space while allowing site visitors to smoothly peruse content more deeply.

namesforchange.org: Names for Change has a visually appealing, masonry layout with a unique and compelling interactivity—it truly makes you want to ‘play.’ Their color palette is vibrant, warm and accessible with clear contrast. The site’s simple language and modern typography gives a sense of innovative social change. Furthermore, Names for Change’s use of page overlays rather than click away pages allows users to quickly and effectively absorb information before returning to the main landing page.

nature.org: The Nature Conservancy’s home page is an excellent example of large, beautiful photography, sophisticated typography and a modern layout that is approachable, engaging and has an excellent page hierarchy. Their minimalist use of iconography, combined with a back and forth grid format, ads visual interest without over-crowding the white space. Finally, The Nature Conservancy hosts a carbon footprint calculator as a content offering to drive traffic that may not be as familiar with their work or website.

onedrop.org: One Drop’s website has a sophisticated modernity illustrated through its blue-centric yet warm color palette, action-oriented typography and compelling photography. The site makes good but sparing use of animations, clean and directive information architecture and bold infographics to help site visitors move smoothly throughout the site and engage more deeply.

oxfamamerica.org: Oxfam Foundation’s visual language has a youthful vibrancy all its own. Taking a different approach than similar organizations, their color palette is bright and endearing, using a chunky paper cut-out motif for iconography and typography.

pawschicago.org: Paws Chicago’s home page illustrates well-crafted, meaningful information sharing. Their header bolsters their impact numbers by tying them to navigation right off the bat. Rather than using a slideshow, they have a nice News & Features carousel that highlights import information directly below the first ‘fold’—giving it weight and allowing site visits to jump into what’s new. Continuing down the page, site visitors are given a clear understanding of Paws Chicago’s work is important, what they do and ample opportunities to engage, learn more and donate.

possiblehealth.org: The Possible Healthcare website is a very simple brochure. It does a very good job of staying extremely lean and making good use of 3rd party softwares rather than trying to have the website do its own heavy lifting (Classy for donations, BambooHR for job postings, and clever use of Medium for blog posts and the spreading of their work on a more international platform). A newsletter popup with a compelling photo and tagline captures visitors' attention on Possible Healthcare's site

wcs.org: The Wildlife Conservation Society’s home page is full of bright images of animals, yet still finds a way to give your eyes space to rest along the way. Their left-hand menu is stationary throughout and though it takes up slightly more real estate than a top, horizontal menu, its ‘stillness’ and color palette are welcoming and calm in contrast to the activity of the page content. Internal pages again have bold photography and modern typography with the navigation tucked away into a mobile menu.

By focusing on certain website elements (i.e. navigation, layout, forms, opt-ins, calls-to-action, content offerings, etc.), nonprofits like these have been able to generate swells of interest and support online. If you haven't already, you might consider giving some of their techniques a try!

How to Create the Best Nonprofit Donation Page

Nonprofits ask us all the time: “how can I raise more money through our website?” Although there are many moving pieces to the answer, there are several donation page best practices that will help raise more money online.

Our team has compiled a list of features from the best nonprofit donation pages on the web so that you can create a donation page template for your organization that rocks!

Use Compelling Imagery on Your Donation Page

To put it simply, do not make the donor read your page. Compel them to support your mission with imagery.

Preferably use a human that is looking directly at the camera. Studies show that website users are immediately connected to humans. So, an image of humans will draw the donor in and reinforce why they are donating in the first place.

Your Donation Page Title

The headline on the page should be short and catch your attention.

The purpose is to get the donor to read the initial content on the page and start a flow of working their eyes down the page.

First Two Sentences

The first two sentences of the page are critical to orienting the donor and reinforcing the donation process.

The copy focus on:

Reinforcing the donor’s initial intentions to donate. Remind them what they are doing

Reminding the donor of the impact their donation will make

Reminding the donor of the larger problem that they are solving by supporting your organization

Donor Quotes and Testimonials

Quotes and testimonials support the credibility of your mission and organization. They can also speak to the impact that your work has had on their lives.

Quotes are best if they come from an individual that is impacted by your work, or a well-known or well-respected person (maybe a celebrity) that supports your work.

Donation Page Security and Privacy

Remind the donor that you respect their privacy and personal data. More than ever donors are aware that their personal and financial data is vulnerable online, so make sure they know they can trust your organization.

It’s critical that your donation page is served over https.

You can also reinforce this by ensuring donors that your organization does not sell personal data to any 3rd parties.

Include a Form on a Branded Donation Pages

Include your donation form on a branded donation page. Do not send donors to a third party page that has different layout and design from your website.

Donation pages that have the same branding as your website generate 6x more donations than those that don’t.

When donors go to a page that looks completely different from your site it is jarring, and often creates issues with trust. Both of these issues will lead to increased drop off rate.

Provide Recurring Donation Options

Always give the donor an option to make their gift recurring on the donation form. Recurring gifts help provide your organization a steady flow of revenue.

Also, research shows that donors that give recurring gifts versus one-time gifts usually end up giving more over the course of the year.

If a donor considers a donation to your organization as part of their monthly budget, it is a clear sign they are advocates for your cause. They can be your most valuable donors.

Establish Trust on the Donation Page

Reinforce that your organization is responsible with your donor funds.

Use banners or badges from watch dog organizations like Charity Navigator, GuideStar or the Better Business Bureau to prove to your donors that their funds are going to good use.

Mobile Responsive Donation Pages

According to research, mobile donations made up almost 18% of all online donations in 2016. More importantly, this number is growing rapidly each year as consumers become more comfortable making purchases on their mobile devices. Allowing users to donate on their mobile devices is critical.

Remove Navigation From the Page

One Step Further...

Your donation page is one very important part to raising money online. But, there are additional pieces as well. Download our guide to building a whole website that will help you raise more money online.

8 Seamlessly Social Sites We Love

Even in a debate-driven world, there’s one thing most professionals agree on: Word-of-mouth is king.

Think about it. Would you be more likely to trust the intentions of a banner ad or the person sitting across from you at brunch? A recommendation between friends is always going to carry more weight than an organization-sponsored advertisement. There’s just one problem...

We can’t control it.

Sure, we may do our best to create advocates, but we’re not working with puppet strings here (and we wouldn’t want to be). Something has to incite readers to action. Fortunately, we live in a day and age where word-of-mouth has given rise to a more amplified version of itself: word-of-text. Even the most well executed campaigns can’t hold a candle to sincere advocates taking to social media. That’s why we’ve compiled a list of eight organizations with exemplary integrations. Take a look:

Pacific Environment introduces one of our favorite integrations to the list: click-to-tweet messages. Not only do they enable visitors to spread the word to their own followers, they take the pressure off by providing a visible social script.

Do Something has a unique approach to social integration—and advocacy itself, for that matter. They help visitors find ways to participate based on their interests and how much time they’re willing to spend. Example: A few quick, exploratory clicks brought up a selfie campaign using social media.

Note that each of these examples made the experience simple and painless for visitors. Remember, people are busy. We have a small window of time to catch their interest and an even smaller window to convert that interest into action. Use both wisely.

6 Site Navigations That Made Us Want to Explore

Imagine going to a new grocery store and not having a clue where anything is. There are signs, but they’re vague and confusing. Maybe they’re so obscure you don’t notice them at all. Would that make for a good first impression? If you’re anything like us, you wouldn’t make a return visit anytime soon.

Now shift that scenario from a store to a website.

The same principles apply. If the navigation isn’t clear and inviting, chances are, you won’t bookmark it to visit again—or worse, you’ll leave without exploring any further. So, what can be done to save our own websites from this fictional fate? Let’s take a look at six organizations with an abundance of navigational inspiration.

6. Earthjustice.org

EarthJustice uses color-coded horizontal navigation to differentiate informational tabs from calls-to-action. Upon hover, second and tertiary levels drop down in easy to follow menus.

5. Headlands.org

Headlands Center for the Arts also color codes their horizontal navigation, but instead it’s upon hover, where secondary levels are highlighted.

4. GatesFoundation.org

The Bill & Melinda Gates Foundation uses a minimalist approach by containing its navigation within a menu symbol in the upper left corner. Once clicked, vertical categories appear on the left side with dropdown arrows to expose further sublevels.

3. Comedy Central

Comedy Central has a horizontal navigation that changes color and drops down upon hover, displaying alphabetized secondary menus.

2. AIGA.org

AIGA differentiates itself by dropping a semi-transparent gradient over the content, upon hovering over its horizontal navigation. Visitors can focus on navigational options, while still viewing the page they landed on.

1. HugeInc.com

This larger full screen overlay is responsive friendly, and gives you the ability to tuck away your main navigation items while still giving them full attention when called upon. A little bit more intense than the AIGA example, but another well designed and engaging option.

Navigation and Donations

You'd be surprised how much navigation can affect the amount of donations that your website receives. To help navigate this, we've put together a comprehensive guide to boosting your organization's online donations.

We demystify the technology and strategies that make it easy to raise more money.

3. System Integration: “Our website and CRM don’t talk to each other.”

Ever downloaded a CSV from one system and uploaded it into your CRM?

I thought so. We all have had that *pleasure*.

If systems don’t talk, they suck up valuable staff resources. Now’s the time to get serious about integration. Investing some money today will pay off in the long run.

4. Staff Training: “I can’t update our website content.”

In the age of content marketing, control of your website is a must. Your visitors expect fresh content constantly.

Bottom line:

Make sure you you get trained on how to manage your website.

Great, I have my obstacles, now what?

It’s important to provide context to the obstacles. Once identified, it’s important to better understand how they contribute to your goals not getting met.

For example: “I spend so much time downloading and uploading CSV’s to our CRM, that I can’t follow-up to thank our donors.”

Know Your Audience

I can’t stress how important this element is:

It’s hard to engage an audience that you don’t fully understand. Take the time to get to know and understand them. Your success counts on it.

Your organization should have a clear description for each audience group your work with and the top 3 things that you want them to do.

Do you know what they do on your site currently?

Do you know what you WANT them to do on your site?

Notice: there is a big difference between what they do, and what you’d like them to do. This is an important distinction.

How do you measure success on our website?

It’s hard to measure if you never set goals.

We find that many people don’t set goals because they don’t want to know if they’re not meeting them. Failure is not celebrated enough.

Failure to meet a goal can be as bad as blowing a goal out of the water because maybe you set your expectations too low.

At the end of the day, you need establish what you’re going to measure and how you’re going to measure it.

How to get started

Getting this conversation started can be difficult, especially in an organization that has a lot of voices to be heard. Here are some keys:

Set expectations that you would like to hear all staff thoughts on these matters, but not all suggestions provided will be implemented on the new website. It’s important to establish this early and often.

Internal surveys can be helpful to facilitate this process.

Make sure to engage senior staff early in the planning process. Getting their buy-in on the project is extremely important.

Download our comprehensive guide that breaks down the technology and strategies into easy to follow steps. The solutions are simpler than you think.

Web Typography (Fonts) Best Practices

There are a few basic prinicpals to keep in mind when choosing typography whether it is for print or web design. Let's start with what needs to be considered for both and then we will focus on web design specifically.

Personality & Tone

The first and most important thing to consider is what you want your typography to "say" to your viewer. Different fonts have different personalities and will evoke specific feelings or moods. Historically, more modern fonts tend to be sans-serif and rounder. If you want greater impact, choose something bold, thick and/or tall. But keep in mind, choose carefully and limit the number of fonts used on a single page so that you do not overwhelm and distract from your content.

Visual Heirarchy & Scanability

Once you start designing a layout (whether for print or web), making proper use of headings, sub-headings and other levels of text will help your reader (and the google bots) better be able to scan and more quickly gather important information.

Contrast & Readability

There are two different ways to think about contrast and how it relates to typography best practices. 1. What fonts you are using and 2. How your fonts are displayed on a page or screen. Once you have considered tone and scanability, next you need to decide if you want your heading fonts to be different than your body text. Again, limit the number of fonts you use—don't create a big 'ol mess—consider staying within a single font family or using one contrasting font to add personality. Now, think about how your typography is going to show up on the page. What background colors are you using? Make sure that your text can be read from far away or under different lighting conditions. This is especially important for mobile devices which are often viewed in the sun...your words need to be easily viewed when dealing with glare, etc.

Space

Whether setting text for print or web, line-height and spacing is important. For print, the general rule is 1.5 times the "x" height. For web it is a little looser and actually, it is often easier to read text on small screens if the light-height is 2 "x" or higher.

Fonts

Below are commonly used "standard" web-fonts that we think are particularly strong:

Verdana, sans-serif

Georgia, serif

Arial, sans-serif

Helvetica, sans-serif

Tahoma, sans-serif

Trebuchet MS, sans-serif

Palatino Linotype, Palatino, serif

MS Serif, serif

We really like using Google Web Fonts, which are free, but do not always have the highest quality. That being said, the ones included below are strong and we have found work across most browsers and systems. (However, be advised, Microsoft Outlook does not support Google Web Fonts.)

Open Sans, sans-serif

Josefin Slab, serif

Arvo, serif

Lato, sans-serif

Vollkorn, serif

Abril Fatface, serif

Ubuntu, sans-serif

PT Sans + PT Serif

Raleway, sans-serif

Old Standard TT, serif

Droid Sans, sans-serif

Finally, there are a lot of other online resources for "not-so-free" fonts including Typekit, Fonts.com, Fontdeck, Webtype, FontSquirrel, MyFonts.com, or FontSpring. Some fonts we like from there that are not necessarily free are:

Proxima Nova, sans-serif

Museo Slab, serif

League Gothic, sans-serif

Univer, sans-serif

Futura Medium, sans-serif

Rockwell, serif

Web Designer Checklist: From General Features to the Forgotten Bits

As I am sure any front-end developer can attest to, there are a lot of "small bits" (and maybe some large ones) that we as designers forget to create, or just simply overlook. This can include functionality like hover effects that maybe unclear, or even just basic design elements that are not explicitly described. In agile development, some of this would be taken care of through user stories, but at the end of the day, there are still things like "what does the favicon look like?" that sometimes get forgotten.

Below is a checklist of all the forgotten bits and general web design features we need to make sure to consider and describe.

The Forgotten Bits

1. The FaviconMight as well start at the top of the page. How many times have you gone to a site and seen a Wordpress, Drupal, or whatever other CMS's default icon in your browser window tab? Too many times, that's how many. This is such a small thing, literally, that it often gets forgotten. 16 x 16, save as an optimized for web .png and send it over. Remember it is going to be super small, so make sure your lines are thick enough.

2. Site LogoWhatever logo you have designed (or been given) needs to show up well on desktop, mobile and as a square avatar for social media. When you are designing where on your home page the site logo is going to live, keep this in mind. Heck, provide the three options to your developer from the start, it will save both of you a considerable amount of time.

3. NavigationIf you have 2 layers of navigation on your desktop view, make sure to think about how this is going to work for mobile. Is it going to just translate to a drawer menu with the "hamburger" icon; will users click and layered navigation will just expland down the page? Do you have an upper navigation with search bar that you need to keep for whatever reason? Just make sure you have considered these things when you are designing, and make notes of how you want the navigation to play out across devices.

4. Hover EffectsSo you just finished designing your awesome navigation and menu system—now what happens when someone hovers on desktop? Is there a block that appears in a color with your link on top? Is there a drop-down menu? How many layers deep does it go? (Please say 1 or 2 max...I think we have moved past where deep drop-downs are even useful and not just cumbersome.)

Hover effects for inline links are also important to consider. Maybe your link changes color, just gets more bold or has a simple underline. In any case, you need to show or describe this somewhere in your design or notes.

5. Header Image or SlideshowDo you have a header image or slideshow at the top of your page? If yes, what are the dimensions? Your client will need to know this. Also, keep in mind that if your header image/slideshow and the images on the rest of your site are inconsistent dimensions, your front-end developer should be alerted sooner than later. There are a lot of plugins/modules/tools that make photo-cropping/sizing, etc. easy these days, but it needs to be a conversation with your web team from the start.

Also, remember that slideshows need some visual queue for moving to the next slide like arrows, dots or thumbnails. What do these look like? Do they only appear on hover?

How does your slideshow translate to mobile? Does it have big blocks of text on top? Where does that text go? Usually below the image, but consider removing the slideshow on mobile altogether...there maybe a better way to show this content that is more effective.

Last thing about this: make SURE to optimize your images. That means "Save for Web & Devices" in Photoshop and if it is a .jpg you are making, try looking at it in the 2 or 4-up mode and compare everything from 50% to 80%. As long as it does not look grainy, keep moving it closer to 50%. The smaller the image, the faster the load time. That being said, you also need to consider retina displays. So you will need a version of your images that is 2x the 'pixel density' of what you optimize for all other screens.

6. Column widths and GuttersI always start designing from a responsive, boot-strap grid. It is really important for your column and gutter widths to be consistent and responsive/mobile friendly. Even though your elements are ultimately going to move around the page depending what device your site visitor is using, you don't want your design to get all jumbled. When choosing your basic column width, consider how that is going to look on a small iphone screen. Having super narrow or wide columns is probably not going to translate well.

Basic Features & "Atomic" Elements

7. Header Labels & Body TextHeaders vs. main body text are often different fonts, but their sizing still needs to be considered in relation to one another. Especially, when you are asking your developer to pull sizes from the design into CSS. Start with your body text and then plan your header sizes up from there. If you have typography training, think in terms of your "x" height...don't just choose random sizes. Yes, you want to play around a bit so it looks good, but also remember that you need this to be mobile friendly, and thus sizes need to be proportional to one another. Here are the sizes and proportions to consider.

Body Text: Often around 14-18px, sometimes larger these days. Make sure you are choosing web safe fonts from trusted resources like Google Fonts, Font Squirrel, Adobe Font Kit, etc. You do not want the font you choose to look super different across browsers.

H4: This is probably a sub-sub heading and maybe the same font as your body text, just all caps, bold with a color change. Consider its line-height in relation to the rest of your body text.

H3: This maybe a normal section heading so could have a font change or just be 2x as large as your body text. Again, consider line-height and its style (bold, caps, color, etc.). Make sure these are consistent and documented.

H2: Probably your page title. It is often 2.5 -3x the size of your body text, depending on your overall visual language. Is it centered? ALL CAPS? Does it have a color change or other visual element added like a horizontal line above, below or to the sides? Again, make sure it is consistent across your page templates.

H1: This may be only used for a "Call to Action" or some other unique element that you want to be LARGE...but it still needs to be thought about and described. This can be 3-4x your body text...but really it is up to you. I feel like this is the most "personal preference, design specific" heading tag.

8. ButtonsGive your website consistent buttons. It is ok for them to change color a little (ie. 1-3 colors if we are using them for different types of "call to actions," but keep their font, size, and shape consistent. You want to train visitors from the beginning to "click here" and you don't want them to have to relearn that on every page load. You also don't want your front-end developer to have to create a million custom buttons. They need to be able to do it once, probably some time towards the beginning of their CSS creation, know what the button does on hover, where it links to through your user story and how far from other elements on the page it should be.

9. Form FieldsEven if you are not including forms right now, you need to include this in your design somewhere. It will be needed at some point and you don't want it to just be stuck in there. You know what that will look like? Bad. Make sure you have created some form field, its label and how far it is from the next line's field. Also, consider what error responses are going to look like. If you are using a CMS like WordPress or Drupal, there will be a default built in, but make sure that the basics are ok with you.

10. ListsUnordered, ordered and defined lists need to be considered since ultimately, the chances of you handing over a site that does not use bullet points anywhere seems highly unlikely. So consider this, what shape are your bullets? What is their line-height? Are they indented? If so, how far and on one side or both?

11. Pull QuotesSo these are not always used, but still important to consider. Especially, since when they are not designed, they end up looking "not so great." Make sure you have set the rules for the quote itself, the byline/person's name, the sizes and style of these different elements and how much line-height is between them.

Design Matters...

Your website design is critical to raising more money online. But, some of the solutions are simpler than you might think...

That's why Rootid put together this comprehensive guide to demystify the technologies and strategies that will help you raise more money online. Check it out.

Creating Campaign Assets

The California Family Health Council is a statewide nonprofit that champions & promotes quality sexual + reproductive health care for all. They are leaders in passing recent legislation that as of 2015, gives those covered under another person's health plan—like a parent or spouse—the ability to keep their health information private. Shocked this was not already the case? So were we... and we are so proud to have helped them develop a comprehensive marketing campaign to support this landmark legislation.

When building a campaign there are a lot of things to consider. Who the audience is, what information they need to know and how many different kinds of assets you need to create to inform them. The types of assets span print, web and social media platforms, so when beginning the visual identity process, you need to keep in mind how your design elements are going to be used.

Who are the audiences?To market this landmark legislation there are a few important groups to consider.

Providers: Since it is their job to alert and to educate their patients about these new confidentiality rights, the visual language for this campaign needed to be clean, clear and welcoming.

Patients: There is a large range of age groups to appeal to, so the basic artwork and themes needed to feel universal. Then you can focus more specifically on distinct groups through social media as needed.

Partners: A lot of different people and organizations participated in getting this important legislation passed so the artwork created needed to also appeal to their organizational stakeholders.

What information do they need to know?Especially with new legislation, there is often A LOT of information that needs to be shared. Leaning that down to items that are easily digestible is an undertaking unto itself. Working together, we determined that a combination of "take action" language and the bare minimum of descriptive text would be the most effective way to communicate this information.

How many different kinds of assets need to be created?Next, we determined how many different types of assets we needed across print, web and social media. With print design in particular, it is important to create only what you need. We want to always be conscious of what will actually be useful to people versus what will just end up in the recycling bin. We decided to create Posters and Info Sheets for health care providers, Postcards and Wallet Cards for patients so they could take a small reminders with them, a micro-website for people to access via web or mobile, and of course custom Facebook and Twitter headers. [view all resources]

This was a really fun project to work on with everyone over at CFHC—we are thrilled to have been a part of it!