I have to admit, when I got the design from Christina Paone for what would be the new non-profit Web site for the Canadian Association for International Nursing, I was really excited. It exceeded my expectations and surprised my own traditional thought of what a great Web design would be. I loved the modern-ness of the background texture, the simplicity of usage of colours in their pure form, and not to mention a colour palette in itself that worked so well together and allowed for very little colour interference if the client wanted to make updates with photography on their own.
This site also shows what great things can be done with the Genesis Framework, and was eventually featured on the Studiopress showcase.
Here are some great photographs of before and after:
BEFORE the non-profit website was redesigned:
Some other great features of this non-profit website AFTER it was re-designed:
For the home page slider the web designer decided not to use photographs – an unconventional thought in itself. Instead, great captivating quotes in a beautiful font design and colour were used. For SEO purposes and also to make sure the words would not become pixelated if viewed at lower screen resolutions, I made sure the text would be live text, not text embedded into images (a pet peeve of mine I try to avoid whenever possible).
Logo is ‘burnt’ into the background texture in a fixed position using CSS – this allows for further branding of the organization throughout the site, not just in the most common spot to see a logo, which is usually the top left corner. Yet is it is also not intrusive.
Featured images appear at the top of posts and pages automatically. This is a great way to make the site more visual while not restricting images to special gallery pages or within posts. It also automatically sizes the images so they look good and aligned on every page, which most non-designers and coders don’t have an eye to watch out for otherwise. If a post doesn’t have a featured image, the blog post still looks ok.
“From our blog” featured post widget on the home page and interior sidebars shows the blog’s latest posts automatically, along with the featured image, which is captivating and encourages clicks to the blog.
The search bar at the bottom right of the site is transparent – I find that so cool.
The newsletter sign up form on the home page leads to a MailChimp e-mail newsletter list – users do not have to visit a new page to sign up for the newsletter (a pet peeve of mine), their info is automatically fed into MailChimp.
Membership sales are enabled with e-commerce and an extended form to process applications from new members. What we did here is add more fields to the checkout form, so the purchase of a membership is in itself the application to become a member. This streamlines a lot of processes for the organization and now they don’t have to gather that info manually. Users can pay by PayPal or cheque. The e-commerce design was also customized to look like the rest of the site – beautiful!
Twitter feed on the left sidebar is designed with site colours and simplicity, highlighting content and allowing users to access what they really want – the actual tweets, rather than fancy icons and graphics.
Navigation menus and web page titles are different – we were able to do this using WordPress Menus. That way, the label for the menu item leading to the Contact page says “Contact Us” but the title on that page says “We foster connections between Canadian nurses,” adding to both the visual and messaging impact of the site as a whole. It helps tell the organization’s story on every page.
Top right of every page has a link to social media platforms this non-profit organization is on, Facebook and Twitter, in very simple icons with hover states. These links also open in a new tab or window using “target=’_blank’” on the link.
Even the contact form is well designed. This site doesn’t leave anything unturned. We used the Contact Form 7 plugin and added CSS styles to it so it doesn’t use the ugly default browser design for form fields.
Custom sidebars were made using Genesis Simple Sidebars and Widget Logic plugins for WordPress. This allowed us to have, for example, a sub menu for the “About” page, leading to “About CAIN” and “Meet the Board” only where its relevant to the content. Other pages don’t have this menu on their sidebar, keeping the sidebar clean and uncluttered, and most of all, relevant.
If you liked the job we did as a Web developer and Web designer team duo for this non-profit, let us know in the comments below! We appreciate your feedback!