We can’t help but feel happy when we come across a ClubRunner website that shows a balance between creativity and good design. This month, we set our eyes on District 7300’s website in Pittsburgh.
Fun fact, did you know that Pittsburgh has a long history as a transport hub and center of industry and culture. Coincidentally, that’s exactly what a website is as well – a central hub of information. If you can tie in your core message and relate your overall website back to what defines your group, you’re one step closer to mastering the essence of what makes a good website.
District 7300 ties these elements in a very creative way, starting on their website banner, which features a backdrop of the bustling Pittsburgh skyline and a cartoon train, which proudly carries this year’s Rotary theme flag. They even went one step further to add a personal touch where District Governor Bill Segar is whimsically depicted as a passenger aboard what we’ll call the Rotary Express. Tie in the additional Rotary branding, with the Rotary wheel that is placed in position of the sun, their website banner itself is a prime example of creative branding at work while the text reading "All Aboard" sets the tone of a welcoming site.
Did you know you can add your own custom banners to your ClubRunner website? For best results, we recommend keeping the image width under 960px. If you don't have your own background image but really want to add some sort of design element, take advantage of the banner library. There are lots of background options you can choose from as well.
Consistency plays a huge part in good website design, whether that is consistency in font, color, page layout, language or more. A website visitor needs consistency to easily navigate through the website without having the elements on the page act as restrictions. Even having too many colors all over the site hinders the user's journey. Here, you see consistency in the colors used and even in the branding. The same Rotary theme flag is used within the welcome widget where we see a picture of the district Governor and his spouse and the color scheme is kept consistent throughout. Adding real photos allows the visitors to relate to your site as it puts a face to the name.
The use of videos engages the viewer with a dynamic and interactive presentation through which they've easily shared details on what service above self truly means, Rotary's ambitious membership goal, a youth project the district is involved in and even one about what Rotary clubs do. Videos allow you to 'upsell' or convey a message in a shorter time, evoking feelings in the viewer to have them relate back to the message. While they could have had a write up on all of these topics, through the use of videos, they were able to get their message across without having to worry about whether the amount of text is overwhelming for the reader.
Fun fact, another benefit of adding videos to your website is that they actually help with your ranking on search engines, as search engines base your ranking on how engaging your site is.
One particular innovation of the site is its use of a "President's Briefcase", which if clicked on prompts the visitor to log in and then directs them directly to the resources a club President would require. This is a great use of linking to internal pages with the help of graphics, which attracts the eye of the reader. As a design tip, always ensure that all of your images have an "ALT tag" associated with them. An alt tag stands for alternative information, which will appear if for some reason the image does not load. Ideally, you would just add one or two words to describe the image or its destination. For website visitors that are using screen readers to navigate through the site, having an alt tag present will ensure that they are aware that there is an image present and what it is. In ClubRunner, you would add your alt text within the "Alternative Text" field when editing the image properties.
Another creative use of resources is using Site Pages as a job board for clubs to browse through. The Job board link is accessible via the main menu where visitors can download detailed job descriptions. There are a lot of small things you can do to make an impact through your site. Perhaps District 7300's website will inspire you.
Click on the banner below to view their site.
No comments:
Post a Comment