If there’s one takeaway from 2011, it’s that the economy is haywire and technology is evolving faster than an oiled bullet. In that kind of nutty atmosphere, it can be a challenge to predict what will happen to web-based technology in the coming months.

What does 2012 hold for nonprofit websites?

We do see a few trends emerging for the next year, however. Here are our predictions for 2012 web trends. Take note for when you next talk to your web design firm about and also pay attention to so you can to succeed in your NGO or company.

1. More design for mobile devices.

Look around you. What’s in the hands of the people surrounding you, including your own? An iPad or iPhone? Nook? Kindle? Tablet? Blackberry? Everybody’s using some kind of handheld device. While corporate websites have been mobile-compliant for years, nonprofits will finally start to catch up. Want to peer into the future of mobile design? Read Mobile Web Design Trends and Best Practices.

2. App-lification of websites.

All those people with mobile devices are getting used to responsive design that they can manipulate with their fingers. Move over “point and click,” and make way for “touch and swipe.” People are beginning to expect interactive design with websites, so expect to see websites look and behave more like they came from the app store.

3. Websites focused on user experience.

Since people are spending so much time with their heads bowed over their handheld devices, they also expect to understand what to do with an app without having to guess. This means websites will be built with careful attention to user experience design (UX), in other words, built with humans in mind. Nonprofit leaders might finally understand that the less people have to think about a website, the more likely they’ll donate, sign petitions, volunteer or otherwise participate. Finally!

4. Less Flash.

We’ve long believed Flash to be big and clunky plug-in, with way too many distracting splash screens and blank spaces on the iPad. There are other technologies out there that make web movies and play on a host of devices, so expect to see more of these letters in the alphabet soup: AJAX, CSS3 and HTML 5.

5. Move to online donations.

Smart charities are already asking for money online with little more than a click. Many smaller nonprofits have been slow to relinquish check-cashing for ecommerce web design. We see some of that fear waning, and expect more nonprofits that don’t allow online donations to begin earning some electronic cash.

What do you think will be trending in 2012? Give your vote for one of these five in the comments below or tell us what you think we’ll see in the future.

Here’s a little secret: web designers like to be bossed around. Nicely. Under certain circumstances. They like to be told of your color preferences. They like to know what styles of fonts to avoid. They want to know what things you find hard to use on the web and the things you prefer to visit.

One of the worst things a web designer can hear is, “I don’t care. Just make it look good.” “Good” is one of those enormously subjective words, the way some people think cilantro is “good” – ugh. Even if you don’t think you know what kinds of design elements you like, the chances are high that what a web designer thinks looks super may not be what you think.

You really do have preferences, even if you think you’re a design noob. You just have to learn to tap into them. Then, when you go to create a project brief, you’ll have somewhere to begin.

Where to find web design inspiration

Here are a few places for finding design inspiration:

Check your stationery for branding.

If your organization or corporation already has business cards, letterhead, a logo or anything with approved colors or branding, you should look here first for design guidance.

Look through random magazines.

Flip through a few magazines at the library or bookstore and focus on the design rather than the articles. Note typefaces you like, colors, pictures, layout – anything that grabs you.

Scan your environment for cool things.

You might have unknowingly cultivated a design aesthetic through the pictures on your wall and the stuff on your desk. Look at this interesting coffee mug photo contest, where you can see the beauty in a cup of joe.

Look through image sets on Flickr.

This enormous image database has not only photographs that might spark your interest, but also all manner of design projects, products and just about anything that someone else finds inspiration.

Check the design of other websites.

Look at other web design for inspiration. Note down what resonates with you, including overall design and good logo examples, and why.

See artwork in galleries and museums.

Check out the masters to see how they use colors together and what kinds of patterns they put together. We once built a website to match the architectural style of Frank Lloyd Wright.

Check for design in nature.

Nobody does it better than Mother Nature: the colors, patterns, textures. All wonderful fodder for design.

Read a few children’s books.

Kids’ books have masterful balance, color and content. You can use them to glean some great ideas from the layout and textures.

Web design gift card and super cute mug

Contest time

[Update! Congratulations to Linda, who won the drawing for one of the cutest travel mugs on the planet. This contest may be over, but you're still welcome to keep sending ideas for creative inspiration.]

Now that you’ve got some solid ideas of the kinds of design elements you like, do something with it.

Enter our drawing for one of these enormously cute Brewed by Talance travel mugs, and you’ll automatically receive a $150 gift card good for any new web design or update work from us. It’s part of Talance’s Customer Appreciation Month, where every week through December, we’re offering a new giveaway or contest.

How do you enter? Just add your ideas for how you find design inspiration in the comments below, and you’ll be entered into a drawing to win the mug and will receive your gift card via e-mail.

Deadline for entries is January 9, 2012. We’ll pick one winner at random from all entries on January 10, 2012 and will notify the winner via e-mail. You must leave your name and a correct e-mail address to qualify.

Enter now!

Here’s a little secret many people don’t know about building projects for the web. You don’t have to do everything from scratch. There are so many tools out there that do the tricky stuff for you, that you really don’t have to be an HTML wiz to have a polished looking website.

Here are some excellent tools to help you fake web excellence:

Table Builders

Tables are the nemesis of many well-meaning web worker. They can be tricky to build from scratch, but no need with these.

Quackit HTML Table Generator

TableGen

Code-Generator.net HTML Table Generator

Color Palettes

Color theory is a practice that people spend years perfecting. But you can fake it pretty well with these tools that help you choose complimentary colors.

Color Scheme Designer

Color Schemer Online

Elvan Online

Image Generators

A few well-placed images can help bring your site to life. These three tools help you manage and create pictures to illustrate your pages.

PicMarkr lets you to add custom watermark to your images.

Digital Post It Note Generator

Create A Graph

[Professional photographer Morgan Ione Yeager is our guest writer today, sharing tips for making your online images better. Want more tips for using pictures on the Web? Check out Communicate Better Through Imagery.]

By Morgan Ione Yeager

Very often the simple inclusion or exclusion of a particular element can either result in a great photo or in a great photo gone wrong. Here are some details to pay attention to while choosing the photos you upload to your website or use for other media. Also, learn some simple tricks to capture better images in the first place and therefore cut down on editing time.

1. The man who grew a pole out of his head.

Are you looking at the chef or the pole on his head?

This one is really common. Once you start looking out for this you will notice it all the time and it will drive you crazy! Be aware of any kind of vertical or horizontal line that is in the background and behind a person’s head. It can create an odd intersection or look as though person has a weird protrusion. Most often this happens with street poles/signs, door frames or tree branches.

2. Remember that bright colors draw the eye.

If the subject of the photo is in the center of the image, then that’s where you want the viewer’s eye to go … not to the person wearing a bright red shirt in the top right corner. Often a simple crop can get rid of distracting peripheral objects or people.

Flash spots are also something to look out for. Generally taking photos of people in front of mirrors or glass can leave you with a blinding white spot, which is very distracting. Professional photographers know how to manipulate light and use off-camera flashes that make these kinds of photos successful.

3. Don’t amputate your subjects.

The father of the bride is cropped at his wrist.

This means try not to crop people at their joints. If you crop right at someone’s elbows, knees, neck, wrist, etc. it can often look very awkward.

A better crop, cropping them both mid-thigh.

4. Frame the image.

The vertical edge of the viewfinder was lined up with the beach sign for a straight and balanced image

If you are taking a photo, try to frame the image by lining the vertical edge of the viewfinder up with something vertical you see through the viewfinder. This will create a more balanced image and will simply look more professional. If you are working with photos that are already shot, use the rotate and crop tool in your editing software to straighten the image. Again, use vertical and horizontal lines to gauge how straight the image is.

5. Simpler is often better.

The photo has been cropped to eliminate the clutter and make the pole less obvious.

If there is too much going on in a photo it can be confusing. The viewer’s eye wanders restlessly, unable to find a place to focus or settle. Be aware of unnecessary props, extra people, any non-essential subjects or objects. Often cropping a bit tighter on the main subject can help.

About the Author

Guest blogger, Morgan Ione Yeager of Morgan Ione Photography, is a professional photographer based in New York. She specializes in shooting people, food, interiors and travel images. She travels all over New England to shoot for online and print publications, small businesses, restaurants and events.

View her portfolio and blog at:

morganionephotography.com

morganione.blogspot.com

[This appeared in our July newsletter.  Subscribe now so you get monthly tasty tech tidbits and special deals.]

The more you pay attention to images, the better your website will be. Good graphics make the difference between a webpage that attracts and one that repels. Here are a few essential graphics tips you can follow to make your whole website better:

1. Save photographic images as JPG and save illustrated images as GIF. Learn more about GIF vs. JPG.

2. Make sure your web graphics are saved as no more than 72 dpi. That’s the standard compression for the web. Anything bigger means slow loading. Learn more about optimizing images from The Comprehensive Guide to Saving Images for the Web.

3. Don’t use HTML to set the width and height. Instead, resize the picture to the appropriate dimensions. Doing otherwise will make your page load slowly and could skew the look of the picture. In other words, if you need

<img width=”200″ height=”200″ src=”boat.jpg” alt=”sailboat” />

then your image (boat.jpg) should be 200×200px rather than a scaled down 500×500px image. Just like this perfectly sized pic:

Here are more tips on web design from the Talance blog:

• Save Your Sanity AND Get the Logo You Love (Yes, You Can!)
• You’re Doing It All Wrong! How to Use Pictures on a Website
• How To Design by Committee (And Live To Talk About It)
• Make Websites Easier for Older People
• 7 Best Homepage Updates

The quickest shortcut to making your website look polished is to use icons. These little pictures, plenty of which are cheap or free, look way better than anything most mortals can do with Photoshop. A little pop of color, used judiciously, can help bring life to bland webpages. Coordinated sets of icons also make pages look like you put a modicum of thought into how the out-put looks. And, importantly, visitors are more likely act based off a compelling picture rather than a chunk of text.

So stop snagging any old picture off Google Image Search (naughty, naughty!). Here is a list of free icon sets guaranteed to make any non-profit’s webpage better, whether you’re into donations, social media, activism, environment, or health and human services. Have you seen anything I’ve left off? Leave a link in the comments.

Donations

Donate Now Buttons

Donate Now Buttons

Festive Donate Buttons

Festive Donate Icons

Open Source Icons (including money icons)

Open Source Icons

Themed Fundraising Buttons for Email

Themed Fundraising Buttons

Credit Card and PayPal Icons

Credit Card Images

Social Media

Vector Social Media Icon Set

Vector Social Media Icons

Scribble Social Icon Set

Scribble Social Icon Set

WG Social Media Icons

WG Social Media Icons

Double J Social Media Balloons

Social Media Balloons

Buddycons

Buddycons

Health and Human Services

Fruit/Food Bank Icons

Paradise Cherry Icons

Education Icons

Bitty Education Icons

Jana free baby icon set

Parenting/baby icons

People & Disability Icons

People and Disability Icons

Medical Toolbar Icons

Medical Toolbar Icons

Environment

Environment Icons

Environment Icons

Ecology Icons

Ecology Icons

Recycling Icons

Recycling Icons

Weather Icons

Weather Icons

Water Icons

Water Icons

Activism

Endangered Animal Icons

Endangered Animals Icons

Sign Up Petition Icon

Sign the Petition Icon

World Flag Icons

World Flag Icons

Military and War Icons

War Icons

Multi-ethnic People Icons

Multi-ethnic People Icons

Maybe your logo started with a clever idea you once loved, but now seems … well … hokey. Or it was something that no one on your Logo Procurement Committee absolutely hated. Or (this is the most likely scenario) you were over-rushed, understaffed, underfunded and that piece of clip art worked just fine, but now you’re still using what was meant to be a placeholder.

Whatever the reason behind having a look that doesn’t fit your organization comfortably any more, you know when it’s time to update. Just sprouted a couple gray hairs thinking about embarking on the process? Deep breaths. You can get through an image rebranding without rehashing past mistakes or subjecting yourself to the pain of collaboration. Invest a little time up front to think clearly about what you need out of a logo and what it should do, and the rest will come. Trust me; we do this all the time.

Of course, deciding that you need a new look is easier than deciding what it should be. The key is to think critically and logically. When Talance takes on a new project, we pull out a set of trusty checklists and run through them with our clients until we have a good idea of likes, dislikes and needs. Only then do we start thinking about creating a new image.

If you’re thinking about having a new logo designed in the near future, start now with solid planning. Start with the items below (you can bookmark this article and use it as a checklist), and when you begin on the logo design process with a designer, you’ll be that much close to having something you love and that works for you.

Peg the decision-makers.

If possible, peg just one decision-maker. Nothing kills progress and creativity more efficiently than a committee. Pick the chief to sign off on ideas, or – if you must – co-chiefs. It helps if they’re buddy-buddy, though, and can work together well.

(Can’t get by without a committee? Try this strategy guide.)

Know your audience.

I know, we’re always harping on about audiences in this blog. But you can’t hope to reach the people you really need to reach if you don’t know who they are. The over-50 crowd doesn’t respond to the same images as the under-20 crowd does. Dig up some demographics.

Work on your elevator pitch.

Can’t describe what your organization does in the time it takes to ride from the lobby to the fifth floor? Get to honing. Your logo will be a graphic representation of your work and must be communicated quickly and efficiently. You must be able to describe what you do succinctly in words before that can be translated to art.

Know your goals.

Seeing a trend here? You have to know what you want before you ask for it, and this includes knowing why you want that new logo. Is it because you want to appeal to a different cross-section of people? Do you need something that works better in print? Do you want to represent yourself with a new tone? Note your goals, and then prioritize them.

Find inspiration.

Copying is a no-no with logo design (and any designer that doesn’t respect that should be avoided!), but inspiration is a different matter. Start noticing colors you like (or need), typefaces that speak to you, patterns that catch your eye. Keep a folder of examples or even carry around a digital camera to take snaps of winning ideas. It can help push your designer in the right direction.

You can start with 30 Typography Focused Logo Designs and 70 Latest and Creative Logo Designs for Design Inspiration if you need some inspiration sources.

Find anti-inspiration.

This is arguably the easiest part of any logo design project: noting what you hate. I’m not sure what this says about humanity, but talking about your hates comes remarkably fluidly. It’s helpful too, because if you say so early in the project, you’ll help your designer steer away from what you can’t abide.

Slick web designs might impress the board, but what good does that do if your visitors can’t see? Making your website accessible is extremely important for people with visual or physical hindrances. Tiny fonts and low-contrast colors might look good in practice, but they’re useless if they can’t be read or used to navigate your website.

The upside to embracing accessibility is that your digital materials, be them websites, online courses or electronic documents, will be better used by everyone.

Here are nine tips that make a more accessible website.

[You can find an article about the importance of accessibility and helpful tools in the last issue of the newsletter. Subscribe to the newsletter.]

Graphics

Make sure you use images, icons and other visual elements consistently and appropriately.

Text equivalents

If you you’re using graphics, figures or illustrations, make sure you include a line of text or a longer description for people who can’t see them.

Headings

Use H tags to organize and structure your content rather than using larger fonts and different colors. This is a helpful article on H tags and best practices.

Remember PDFs

PDF documents are often neglected in an accessibility review. Make sure they’re accessible too.

Spell out abbreviations and acronyms

Screen readers have a hard time with acronyms – they think they’re full words. Either spell them out or use coding to make them readable. Look at the acronym in the previous paragraph to see an example.

Use tables appropriately

Not everything should be in a table; many contain information that’s more readable when they’re simply written out. If you do use a table, make sure you’re marking it up appropriately.

High contrast

When you use colors, make sure they stand out. I like to run websites through Vischeck to see how they display to people who are color blind.

Captions or scripts

If you’re using video or audio, use closed captioning or provide a script for people to read along.

Use descriptive links

No more “click here.” Use descriptive text around your hypertext.

Announcing the new Brockton Teen Pregnancy Prevention Program logo:

Brockton Teen Pregnancy Prevention Program Logo

BTPPP is an organization in Brockton, MA, that aims to reduce teen pregnancy rates. They needed a new logo for web and print that would appeal to teens as well as their mentors.

Talance delivered! The new logo is modern and abstract but still demonstrates health and wellness, rather than sex, and inclusiveness.

We’re not naming names, but we hear a lot of crazy requests when it comes to building websites. The worst are those that utterly disregard what the poor visitors have to contend with when they look at the site. Read these quotes, and do exactly the opposite.

[This appeared in our December newsletter. Wanna subscribe?]

Top 10 Most Ridiculous Web Design Requests of 2010

1. Can you please make that tab say [insert any 10 or more words here]?
2. We need this website built yesterday.
3. Can you create sub-sub-sub menus?
4. Put everything on the homepage so no one has to search for anything.
5. Half of our committee hates green, the other half hates blue, so just make it gray.
6. I know we’re ready to launch, but the CEO doesn’t think the site is “user friendly.” He’d like you to rebuild it so it looks like this [insert here schematic created solely from the rectangle tool on PowerPoint].
7. Can you make all the menu items open in a new window?
8. Can you make us #1 on Google?
9. Make the logo 200% bigger.
10. Can you copy this other site? We want ours to look exactly the same.