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.
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.
Every organization has a story. Somewhere along the line, a spark inspired someone to challenge the status quo, and that idea was tempered by milestones to forge the business we see today. What better way to celebrate that history than to put it on display?
Your audience wants to connect with you. They want to relate and invest in your success. But to do so, you have to let them in on the narrative. That’s why timelines are so popular in web design right now. With a few clicks, audiences are able to see an organization’s impact through solid, qualitative facts that stick with them. When executed properly, they might even encourage your visitors to become part of your future—but how?
Don’t worry. We’ve searched far and wide for seven of the best tips and examples to inspire you.
Information architecture and page hierarchy can make or break you. Your interface should be designed with your end goals in mind.
Website visitors arrive with many levels of literacy, attention spans and 'will' to figure out how to use your website. If they are not able to find what they are looking for quickly, you've lost them. Start by defining the goals of your page, and what journey you want users to take:
Identify the "who" (stakeholders and target audience). Who is reading the content you are presenting? What do they need to know in 1 sentence.
Identify the "why" (your goals). Why do they need to know this information, giving them a line of context is helpful.
Identify the "how" (functional website requirements). How are they going to accomplish what they came to your site to do. (eg. 'Welcome to site 'X' you are hear to learn about 'Y.' You should learn about 'Y' so that you can accomplish 'Z.' Here are the steps you need to take to accomplish 'Z.')
By setting clear expectations for your users from the start, they will not get lost or confused in their process through your website.
The following is a short list of page elements and a few best practices too make your website's pages easier to read and digest.
1. Effective Headings & Sub-headings
Pages are typically divided into sections and sub-sections.
Each section is usually started with a heading.
Use headings in a hierarchical way.
The hierarchy of headings is limited to five starting with H2 - the most important - and finishing with H6 - the least important.
You should use them in the following way:
The page heading - the title of the page - is always formatted as an H2. It is the only heading on the page that should use this setting.
Use H3 for sub-headings
Use H4 for sub-headings within a subsection that is started with an H3
Use H5 and H6 for subheadings within sections
Align all headings and subheadings to the left as a general rule, unless the design of your website is mobile first and all your headings are centered....either way...
Use sentence case for all heading and sub-headings. Sentence case is the standard approach to using upper and lower case letters, mainly in titles and headings. It is the most legible for all levels of readers and gives them a visual queue that something is a heading (since each word has a capital letter).
2. Succinct Paragraphs
Paragraphs are single blocks of text which flow from left to right, often running to more than one line, and have a single blank line above and below.
Lower literacy readers need chunking, so if it going to take you more than 2 normal length sentences to make your point, consider editing.
All paragraphs should be aligned to the left (the default alignment). Avoid aligning paragraphs to the center or right unless you have designed a site that has intro sections of text that are centered. If you do, only have 1 sentence centered, as a rule it is more difficult to read since English readers are used to reading left to right.
Keep your text short and to the point.
Use bulleted lists with plenty of space between items—this helps slower readers absorb your information more effectively.
3. Text formatting
Within text, there are a number of options available to emphasize text:
Use italics sparingly. It is ok to use for publication titles of course, but large amounts of italicized text is very hard to read online.
Use bold sparingly. For clear emphasis of an idea or sub-heading, it is great, but large amounts again are very hard to read. Plus, you can't emphasis everything!
Use color very sparingly. Excessive use of a different color, for example red, makes it very quickly lose effect and again is just hard to read. If you must highlight an important point in a different color, limit it to as few words as possible and do not make it a habit.
Use all capitals sparingly. Excessive use of capitals can get very annoying very quickly and should be reserved for special cases. Words in all capitals are very difficult to read online and often feels as though you are shouting at someone.
Note: ALL CAPS are a great use case for buttons, main navigation items, and other situations where a single word is used.
Do not underline. As a rule, you should NEVER underline because most browsers make links appear underlined. If you underline text that is not a link, it will only confuse your site visitors.
If you are not a designer, or have not had a designer create a styleguide for you, as a rule, the settings for any table should be as follows: Cell padding = 5; Cell spacing = 0.
Text within cells should be vertically aligned to the top of the cell. This makes it the easiest for people to read the contents of your table by keeping the text from running into itself or floating at random heights within your table (depending on the length of your text).
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.
Download our comprehensive guide that breaks down the technology and strategies into easy to follow steps. The solutions are simpler than you think.
There are a variety of ways of approaching logo design as well as determining what makes a good logo. We choose an approach that is extremely collaborative and iterative with our clients, focusing on the following concepts: simplicity, appropriateness, distinction, and practicality.
First and foremost, a good logo is easy to recognize—it is versatile and of course memorable. Keeping it simple, means trying not to incorporate too many ideas into one image. Ask yourself, "What is the most important thing for people to understand about this brand? What is its most important value or service?"
Creating a beautiful mark is important, but the idea you are communicating to your audience is the key to this process. Begin by rooting any idea in the core values/inspiration of the business or organization you are designing a logo for. Keep in mind you are 'teaching' about this brand—visually representing its personality, values and what it does in a single idea. Not sure where to begin? Read our article How to Revitalize your Brand »
Creating something unique is not always the easiest thing considering the amount we are bombarded by advertisements and branding everywhere we look. That being said, every business and organization has something distinct that it provides to the world. Figuring out what that one thing is, is the key to its logo. For Rootid, we focus on collaboration and being rooted in the values of the organizations we work with...hence we have small roots coming out the bottom of the "r" in our logo. It is a simple idea, distinct and illustrates tour most important core value.
There are a lot of logos out there that are difficult to read, are combining too many different ideas and elements, or are impossible to reproduce across different media. A great logo takes all of this into consideration, and at the end of the day, is practical. Think about what your logo will look like as a square avatar on Facebook, or horizonatally across the top of a website. Will it still look good small on a business card as well as on a huge banner overlooking the freeway? When you are putting it on a t-shirt, does it have too many colors so it will be really, really expensive to reproduce and will need many different screens?You may not need all of these use cases, but it is important to consider them.
Though there does need to be a timeless quality to any great logo, there also needs be thought around its evolution. Businesses and organizations are organic in nature, they change and adapt as they grow and develop. Therefore, a logo that is created at 'founding' will not necessarily still suit you perfectly 3, 5, 10, 20 years down the line. Take a look at these logos of well known corporations and how they have changed over the years...just to give a sense of what to expect from your own logo's evolution.
A couple of places to go for inspiration...just don't copy someone else's work: LogoMoose | Dribble
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:
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.
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.
Infographics are come in many different shapes, sizes, formats and quality. I am sharing the process in developing this particular infographic because my learning process was particularly interesting this go.
Our goal was to use as much of the branding from the Ignite online exhibition (a project of the Global Fund for Women), but make sure it felt like a stand alone piece as well. In my intial research, I found quite a few infographics that already used some of the statistics we wanted to put forth, but we wanted to tell the story from a place of empowerment and hope, rather than bitterness or negativity. Sometimes, this is a little hard when you are talking about gender inequalities...
In any case, let me share our process with you.
STEP 1: Figure out what the top 3 goals are.
In our case, as I said, it was to set a tone of empowerment and hope. It was to display important points in a visually appealing way that still expressed the weight and inequality of the information. And most of all... to tell a strong story—to guide our viewers from a place of superficial impressions to one of, "Wow! Can that be true? How can I help make this better?"
STEP 2: Nail down what statistics you want to use to tell your story.
It is important to drill down as fast as possible from "concepts & feelings" to "specifics & numbers." If it is still taking a paragraph to say what you want the reader to understand, then brainstorm a different way to get across your point. Or maybe, that point needs to be replaced with another. Even though you need to nail down your stats quickly, it is also important to always use your original goals as a touchpoint. Check back that you are not getting lost in the numbers and loosing the story.
STEP 3: Make a sketch or wireframe of how you want the information to be laid out on the page.
Your first wireframe should be as loose and general as possible. In our case, we broke the infographic into 7 main sections.
1. Header/Banner with Title 2. The Introductory Idea/Thesis/Hypothesis...however you choose to label this [technology reflects the people who make it] 3. & 4. The 2 points That Support Our Claim [less access to technology/ideas but not opportunities] 5. The Conclusion [inclusive teams are smarter, faster, etc.] 6. A Quote and Closing Statement 7. Footer with Branding and Get-Involved Info
Now it is time to begin design. In this case, we already had branding to work with so we could skip moodboards and visual identity creation and instead focus only on how to illustrate the important bits of information in a way that would flow visually and emotionally. We did not want to weigh the infographic down with too many images, but also did not want to make it too text driven either. It is important to create a clear visual heirarchy that smoothly guides the reader, providing strong "ah ha" moments as well as moments of rest and reflection before moving onto the next data point. Color use was an important consideration since pink and blue are a bit over used when illustrating points of male vs. female—we wanted to come up with options that would feel more gender neutral while still communicating gender inequalities clearly.