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.
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.
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.
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.
Headlands Center for the Arts also color codes their horizontal navigation, but instead it’s upon hover, where secondary levels are highlighted.
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.
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.
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.
Successful Website Projects: 4 Things to Discuss BEFORE You Start
In the age of content marketing, control of your website is a must. Your visitors expect fresh content constantly.
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.
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.
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.
Below are commonly used "standard" web-fonts that we think are particularly strong:
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
Abril Fatface, serif
PT Sans + PT 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
Futura Medium, sans-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 Favicon Might 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 Logo Whatever 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. Navigation If 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 Effects So 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 Slideshow Do 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 Gutters I 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 Text Headers 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. Buttons Give 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 Fields Even 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. Lists Unordered, 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 Quotes So 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.
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!
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're feeling overwelmed with all the information out there about multi-channel marketing and how to drive more traffic, you're not alone. Here are a few steps to help you make sense of it all.
What are Marketing Channels?
It sounds fancy, but marketing channels are simply the different ways you can communicate with customers, clients, donors, volunteers, etc. Here is a quick list of marketing channels that might be on your mind:
Website: Clearly you need a website, but depending on your size, this can be anything from an interactive "brochure" with a few clear calls to action to a fully integrated social hub. Make sure you are keeping your content fresh and that visitors will get a clear sense of what you do in the first 3 seconds they land on your home page. See attached picture for more info.
Blog: Though always important, your content strategy is becoming more and more important not only so you can communicate what you do, but also for your Search Engine Optimization. Key words are important to include in what you are writing about, showing in infographics or creative artwork, but meta-tagging and all that other "behind-the-scenes" magic is just not as useful as it once was.
Print/Direct Mail: Yes, people do still do these and if created and used sparingly can be really effective. Just make sure you are creating something useful that people will want to keep for some reason. Maybe it is sharing information about something your company/organization knows a lot about...then the fact that it also has your branding and is a reminder of where they got this great tool is just a bonus.
Email Newsletters/Flyers: A strategic email campaign schedule can go far as long as you are thoughtful about the information you are sharing and are not sending out "junk mail" too often. 1-2x month or less, keeps people engaged and not annoyed with the amount of emails they are recieving from you. Also, keep your message short, sweet and more about then rather than just broadcasting your latest good news. Give them something they will want to share with the people they know. As in all marketing, 80% of what you send should be sharing information for the greater good, 20% can be broadcasting why you are great.
Facebook/Google+: These two platforms are more about awareness than anything else. Posting fresh content with attached images 4 or so times/week, liking and commenting on other people's posts will keep you engaged in your community and also give you the social credability you want. That being said, posting too often can hurt you so think about what you are sharing and why as well as how others are engaging with your posts. It may seem obvious, but if a lot of people are liking and sharing something, you are on the right track, if it is always just the same people, rethink what might be more successful. Asking questions and again making about them
Twitter: Great for sharing articles, artwork and information with your community. Keep in mind this is something that takes constant engagement on your part. You can not build a following if you are not spending min. 30 minutes a day/5 days per week reading, retweeting, favoriting and posting.
Instagram/Pinterest: Choosing one of these as a channel you focus on can be great if you generate a lot of photos and/or short video clips on a regular basis. Posting images at least 3x/week from your last function, fundraiser, meeting, or just pictures from around the office, with a quick caption can go far in communicating your brand and getting people interested in following you.
Be Strategic About Selecting a Marketing Channel
If you are reading this, you probably already know that spreading yourself too thin will actually get you no where. Being thoughtful about your approach will not only save you valuable time, but come across to your audience as more authentic and grounded. There is plenty of noise out there so be more focused and directed.
Know Your Audience and What Marketing Channels Work Best for Them
To use the correct marketing channels, you have to know how to communicate with your audience. For instance, if you're customers are 40-60 years old, you probably don't want to use SnapChat as a major marketing channel - you won't reach them there. However, you might want to look at growing your email list, or use Facebook, since older populations tend to be in those spaces.
Take Multi-Channel Marketing One-Step at a Time
There is no need to jump in all at once. Be strategic about how you start marketing through the channels that you use. Pick a channel to focus on, build out your program, then move to the next. You'll also see that once you have one channel built, you can use that to build more. For instance, if you have a large email list, you can use that to promote your Facebook page.
Do Work in Bursts: Automate Your Marketing Channels as Much as Possible
As a marketer, it is really important to manage your time. Rather than spending time each day managing your marketing channels, use tools that allow you to do work in focused bursts, and schedule content. Note that it is really important with social channels that you continue to "listen" and respond in real time. But, planned content can be written and scheduled easily.
Here are some ideas for how to do work in bursts and some useful tools to help you get this done.
1) Write all your blog posts for a month in at one time. Use native functionality Wordpress or Drupal scheduling to publish them over time.
2) Once you have the content for your website you can write and schedule 2 weeks of social posts in one sitting. Tool: buffer, hootsuite
3) Once you have your website content written, you can also write and schedule all of your email newsletters. Tool: MailChimp, VerticalResponse
In today's world, multi-channel marketing is extremely important. If you haven't had a chance to start, today is the day and Rootid can help. We provide a free marketing channel assessment to anyone that mentions this blog post!