Find the right digital tools for your nonprofit. Download our free guide today!
overlay Multi Colored Paint Rollers

Web Design Details For Better User Experience

When your organization embarks on a website design project, you’ll be asked to make a lot of decisions. Which CMS will you choose? (Firefly recommends WordPress). Who are the right people to create and review content? When should you start planning for the site’s launch? These questions are important.

But just as critical are the creative choices you’re going to make. After all, your website is the online front door to your organization and the first introduction to your mission for many people. Here are four visual elements that seem small but can make a big impression on your site visitors.

1. Imagery Matters

Choosing the right imagery is a powerful technique that nonprofits can use to tell their story. It can help you stand out and generate an emotional response.

  • All your imagery should be high resolution. Grainy photos will negatively impact the experience visitors will have on your site.
  • Show off the people, animals, or environments you serve as a way of complementing the stories you tell.
  • Consider the diversity of your supporters and select images that allow site visitors to see themselves reflected in your mission.

Pro- tip: Stock photos have come a long way and there are even some amazing free online resources, so there’s no need to worry if you can’t swing a photoshoot unique to your organization.

2. Choose Fonts Wisely

With all the web fonts available these days, it’s time to move away from the standard options like Helvetica and Arial, and to avoid contentious options such as Comic Sans.

  • Be consistent: you should have one standard family of fonts that you use across all aspects of your site.
  • Take advantage of unique (and free) Google Fonts. There are a ton of great web-safe options to choose from. You can sort by category and read resources to help guide you in the right direction.
  • If you use design elements that feature text on top of images, make sure it pops. You can use semi-transparent overlays to ensure that your text is legible.

Pro-tip: Big, bold, and easy to read is the right approach for all the text on your website. While a super complex font might set you apart, we recommend prioritizing readability – particularly as sites are being viewed more and more on mobile devices.

3. Put Your Brand Colors to Work

Once your brand colors are dialed in, use them thoughtfully and consistently on your site. Well-placed colors can help buttons, headlines, and menu items to stand out, drawing attention to your most important content.

  • If you need more variety in your color palate, find variations of your standard colors such as lighter or darker tones. Focus on both brand consistency and enhanced legibility.
  • It’s always good for your color palate to include a contrasting highlight color that stands out against your dominant colors.

Pro-tip: There are free contrast checkers online that allow you to test your color palate, ensuring visibility for as many visitors as possible.

4. Make Space For Your Content

You probably clean your house before you have visitors, and your website should follow the same model. A tidy website can give people a good first impression of your organization while a cluttered and confusing site could make you seem disorganized and unfocused.

  • Separate sections with whitespace – the text- and image-free gaps that exist between content. This makes it easier for people to concentrate on one element at a time and helps colorful elements draw the eye to action.
  • Identify the primary actions you want your most important audiences to take and organize your page’s elements based on these priorities.

Pro-tip: Something as simple as line spacing can contribute to a good first impression on your site. If headlines and paragraphs are too dense it could negatively impact legibility.

Every organization is different, and each will need a website unique to their mission and programs. But using this list as a guide means you’re thinking correctly about small decisions that can make a big impact for your site visitors. If you’re considering a website project and want to learn more about great design approaches, reach out to the Firefly team to get started today!

Subscribe to Our Blog

Post a Comment

  • Colors play a vital role in subconsciously creating credibility of websites. Web designers should be more aware of psychology associated with colors so that they can perform better with targetting right customers through conveying right subconscious messages as per brand image and personality.

  • This is simply the best summary of an effective web page design I have ever read. Thanks! It confirms much of what I knew or suspected, but also challenged my assumptions about issues such as vertical displacement and the power of loss.

Stay Connected