Introduction
Website design trends are evolving all the time. As a result, easier navigation, simple layouts that also look good on small screens, and creative elements are all a part of websites attempting to remain competitive. This post will showcase 20 hot examples of cutting edge website from the not-for-profit and NGO sector and highlight 7 key trends in website design you can expect to see more of in 2014. We'll discuss flat design (what it is and why it works so well in digital formats), unique typography, long scrolling home pages, fullscreen or large photos, HTML5/CSS3 animations/transitions, navigational cards, and video. Whether you access the web from a mobile, tablet or desk top, a website is an essential piece of communication infrastructure in 2014 for all businesses and organisations. Reviewing your site design regularly and keeping abreast of major design trends will help your brand to stay current, competitive and most importantly ensure your website is driving results you want. Let's dive in to the latest web design crowdsourcing trends!
#1 Flat Designs / Decluttering the Screen
The flat design trend that started with Apple iOS7 for iPhones and iPads and then Google and Microsoft, has now overtaken website design contests. It's easy to see why, though, with its clean and simple look and feel. Flat design is a new design approach that takes the minimalist aesthetic of 'less is more' to extra lengths. Sometimes websites, especially some nonprofits, can become too cluttered with 3D effects. A flat design takes away all of the design extras to give a fresh, contemporary website so that your message stands out.
Read more: Is flat design the new black?
The Ecology Center uses a flat design to make its website stand out, and complements this with HTML5, video, large stylized photos.
The flat design on the Messages for Japan website keeps the scroll over effect from feeling like too much.
News websites can be too busy, but this NP news site keeps it both clean and interesting with a flat design and effective use of block colors that draws the eye to the content
#2. Unique Typography
One way that an NPO website can immediately stand out is with original typography. Now with so many web-optimized fonts available for free, non-profits and small businesses who priortise design can access unique good-looking font types at the click of a button.
The typography on 'War Child' really cuts through when the user hits the page. The original hand drawn font strikes a chord, which really helps viewers pay attention to their core message about protecting children in war-torn nations.
The typography on the Amity website is a nice bold, rounded font that stands out immediately. The flat design elements are a nice touch too. Full screen photography also drives home the message and the use of a bold color palette draws the eye immediately to the orange call-to-action button in the top right hand corner.
#3. Long Scrolling Home Page
A long scrolling home page can benefit a non profit in that it puts all of the information in a single spot for donors who are looking to scan quickly. Keep in mind that long scrolling sites, whether they are single page or multi-page, can be too overwhelming if they go 'forever'. This trend carries through to other creative industries where long scrolling web pages are an alternative to creating additional pages and navigation. If your page is image driven, light on text and you want the user to perform one action than the long scroll is a valid approach.
Not only does the Dream Year website have a clean one-page design but also incorporates video and flat design trends.
This long scrolling site remains simple yet engaging with links to helpful resources and a flat design.
The WWF Food Story page scrolls left to right, rather than up and down. The animations and sliders keep it engaging through its interactive elements and brilliant graphics.
This long scrolling page includes just enough beautiful photos and HTML5 transitions to keep it interesting but not overwhelming.
#4. Large Photos / Unique Imagery
Images on the page focus our attention on key messages. Think about a newspaper or magazine, they thrive on the use of strategically placed images to support their stories. Businesses or organisations that have visually stunning products, or NFPs with unique images that convey their passions should consider large full screen photos of their work in action. Some have photos littered throughout the site, some choose a scrolling gallery at the top of the page, and others use full page photo as the entire background. Ask your designer to play with different photoshop filters to make images pop or recede depending on what your message.
Already got a Flickr or Instagram feed going for your business or organisation? Then you already have a library of images available!
The Eye Am project captures attention immediately with a full screen photo and large text message.
The Friends & Family Plan uses full screen photos as the background to present the message beautifully.
The Bill and Melinda Gates website helps visitors connect with the organization with beautiful photos of its work throughout the site.
#5. HTML5/CSS3 Animations/Transitions
No longer is Flash a bane in the Internet world's existence! Now with HTML5 in combination with CSS3 and Javascript techniques, animations are viewable even on mobile devices. Another excellent outcome of this programming technology team-up is cool transitions, such as hovering a mouse over a button to see the button change color.
This one page poll from the Australian Red Cross keeps it clean and simple with a short page and flat design, but buttons that change color when hovered on.
This simple Mother's Day card creation page makes its website more appealing with animated sparkles.
The animation and transitions on this site keeps this clean scrolling website interesting and engaging.
#6. Navigation Cards
Some non-profits / charities have too much information to convey, and this is where organizing information into cards comes in handy. Cards (boxes of information) are usually linked to another page that contains more information, such as the full article. Some designers keep cards as color and text only, while others include photos or graphics
The information on the Danish Refugee Council website is organized into cards, some with photos and others text-only.
The Global Humanitarian Assistance website neatly organizes its resources on cards that contain both graphics and text.
The Anne Frank website is an excellent example of just how neatly tons of information and links can be organized using cards.
#7. Video / Mini Movies
Video media can be a powerful medium to drive home emotionally-driven messages. Imagery and visual metaphors enable the communication of complex messages to connect deeply with audiences. It's also a pefect medium to explain how a new product or service works, take design crowdsourcing for example :). All you need is some images and an idea for a script and you can get an awesome video made that won't break your budget. Some websites have committed completely to the video-only homepage, stripping out other content on their homepage like Into the Artic and Designed to Move.
This Into the Arctic website has a fullscreen video on the homepage that runs automatically.
The homepage of not for profit exercise website Designed to Move places the button to watch the informational video dead center on the screen, which is brilliant since the video is so moving.
Hire a Designer, Start Designing!
Startups and small business websites share the same goals, albeit with a different outcome. A contemporary usable website says that a non-profit is trustworthy, organized, and up-to-date. If a non-profit website also works on mobile devices, even better, since many donors may access an NPO website when spotting an ad on-the-go.
Like a small business or startup fighting to be noticed, non-profits have to resonate with their audience on more than one level to really move them to action, and one way to do this is by reaching viewers emotionally with a powerful website design and converting them to donors.
Written by Jo Sabin on Thursday, February 20, 2014
Jo Sabin is Head of Designer Community at DesignCrowd. She's led the company's public relations and social media programs since 2012. With more than ten years' experience working with Australian and international tech startups in the creative industries, Jo has been instrumental in meeting DesignCrowd's objectives in Australia and abroad. Get in touch via Twitter.
