Colleges & Institutes Canada

Size: px

Start display at page:

Download "Colleges & Institutes Canada"

Sheila McDowell
5 years ago
Views:

1 a digital creative agency Colleges & Institutes Canada Web Style Guide Prepared by: Benjamin Waldman Date: July 10, 2014 Project Number: bv Bank St. Suite 103 Ottawa, ON K1S 3W3 T x389 ben.waldman@bv02.com

2 Introduction Colleges and Institutes Canada - Web Style Guide Page 1 Introduction At bv02, we re thrilled to be working with Colleges and Institutes Canada (CIC) to improve its web presence. As part of the website redesign process, bv02 has developed the following web style guide in order to help owners, management, and vendors shape and protect the strength of the CIC brand. Using this guide will help ensure that Colleges and Institutes Canada is projecting its desired values to be in line with the audience's needs with the following benefits: Consistency The brand message is relevant and consistent for each use case / type across channels. Confidence The guide will take some of the guesswork out of day-to-day decisions about how to communicate and design messages. Savings The guide can act as a starting point for briefing creative services firms.

3 Introduction Colleges and Institutes Canada - Web Style Guide Page 2 A Living Document As the research and discovery process for the CIC web development project is ongoing, it is important to consider this a living document. The guidelines and recommendations here are based on findings from early discovery sessions, the initial design phase, conversations, and on a creative audit of the existing website content. They will change as the project evolves.

4 Visual Style Guide

5 Visual Style Guide Colleges and Institutes Canada - Web Style Guide Page 4 Fonts Gotham The primary typeface used on the site is Hoefler & Co. s Gotham. The typeface was developed to have an honest tone that is assertive and friendly, but not imposing or folksy. The font weights used on the site are Book, Medium and Bold. Book ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

6 Visual Style Guide Colleges and Institutes Canada - Web Style Guide Page 5 Colour Usage The primary colour palette consists of purple, dark grey and black. A modern blue is used for all text links while green is used for Post a job buttons. Yellow is also used for small, bold splashes of colour. R98 / G37 / B157 R68 / G68 / B68 R0 / G0 / B0 R18 / G131 / B202 R60 / G164 / B40 R255 / G204 / B0

7 Visual Style Guide Colleges and Institutes Canada - Web Style Guide Page 6 Responsive Grid Layout The website is built on a responsive universal grid. The total width of this grid is 1164px and it is divided into twelve equal columns. Each column has a width of 86px followed by a 12px gutter.

8 Visual Style Guide Colleges and Institutes Canada - Web Style Guide Page 7 Baseline Grid This site also uses a 24px baseline grid to help vertically align components on the page. While column widths are mandatory, the baseline isn t. However, the baseline grid should be considered as it does help to create vertical rhythm on the page.

9 Visual Style Guide Colleges and Institutes Canada - Web Style Guide Page 8 Wells Site content can be divided in multiple ways. The example below shows news items displayed in four content wells. Each well spans a width of three columns and two gutters. The universal grid allows for a wide range of uses and layouts.

In specific instances, like the homepage or secondary page header banners, specific sizes must be adhered

10 Visual Style Guide 1 Images & The Grid In general, images for secondary pages can be a variety of shapes and sizes as long as they align to the grid. In specific instances, like the homepage or secondary page header banners, specific sizes must be adhered too. 2 Homepage 1 Hero unit, min size 1280 x Recent, min size 282 x Widget callout, min size 582 x Secondary Page 4 Header banner, min size 1165 x 264 4

11 Voice & Tone

12 General Findings The current website content appears to be written largely for a federal government audience. In some cases (such as in The Issues ), this is appropriate: it is descriptive of activities, authoritative, logical and meaningful for the audience. For the remainder of the website however, the existing voice and tone is more problematic. It is largely written in the thirdperson about the organization and its members or its partners. Despite the organization s clear values, mission and goals, the writing lacks a unified voice: it doesn t speak for the members, to the members, or to potential partners in a way that is meaningful to them, or in a way that is likely to incite action. Furthermore, the content frequently starts with lengthy introductions that lack an early point of interest or clear benefit to the reader. This is coupled with a lack of calls-to-action and natural hyperlinks to information throughout the content, leaving the reader without a quick sense of subject matter, importance, and a simple follow-through to next steps.

13 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 12 Examples of Third-Person Writing The following opportunities to grow market share are o ered to ACCC Corporate Partners As a prospective partner, growing market share is what I am after. Why doesn t it sound exciting? This Leadership Development Initiative will be of interest to those considering deans, directors or equivalent positions across all areas of college/institute operations. Of interest to others, but not the reader? Canadian Partnerships projects contribute to Canada s advanced skills agenda through private partners and federal government departments. This may be a fact, but how does it benefit the prospective partner?

14 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 13 Examples of Opening Sentences / Paragraphs From World Federation of Colleges and Polytechnics Congress : Jointly organized by the World Federation of Colleges and Polytechnics (WFCP) and the China Education Association for International Exchange (CEAIE), the WFCP World Congress 2014 will be held at the China National Convention Center in Beijing, China, from October 24th to 26th, 2014, with pre-congress events on October 22nd and 23rd. What is the congress about? Why should I be interested? From ACCC Corporate Partner Program Program Information : The Association of Canadian Community Colleges (ACCC) is the national voluntary membership organization representing colleges in Canada and internationally. ACCC s members are 130 public colleges, institutes, cégeps and polytechnics located in 1,000 communities across Canada and serving 1.5 million students. Why is this important to the audience? The information would be more meaningful with context. For example, does 130 members represent nearly all of the market? This is Colleges and Institutes Canada's unique value proposition.

15 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 14 Writing Tips Avoid using the third person when writing to elicit a response or an action. Tailor content to the reader, and make the reading experience more human and decisive / accountable. Instead of writing like this: The following opportunities to grow market share are o ered to ACCC Corporate Partners Consider writing like this: We o er the following opportunities to our corporate partners Or speak directly to the reader with a quick, readable benefit: Grow your market share

16 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 15 Value Proposition, Elevator Pitch and Calls to Action When driving actions or business, think of your content as an elevator pitch. You want the reader to be driven by the benefits early and to have a clear path to more information and / or conversion. Be specific and concise early in your content. You can always get more descriptive the further the reader goes, but start with the content that will entice them to keep reading. Ask yourself: what is the benefit to them? Include a call-to-action early-on rather than at the end of the page. The same applies to important documents (such as PDF forms). Note that the as the project progresses, bv02 will address this issue via user experience design. This tip should be exercised within reason: avoid including multiple calls to action that break content flow. When possible, use infographics, video or presentations to illustrate larger concepts / benefits in a digestible format. Use web markup what it was designed for: hyperlink naturally from within your content. It is common (and even beneficial) to link from the title of a program or an action (such as register for x ) mid-sentence. This will allow users to absorb chunks of information quickly and to find information (or complete an action) naturally. It is important to be measured in your use of this tip: too many links will break content readability. Use relevant links for logical actions related to the the content.

17 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 16 Specific Content Types The following recommendations were devised for two specific cases where the audiences specifically di er from the government. These cases relate to content where a business action is sought through engagement.

18 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 17 Describing Services and Activities (e.g., What We Do) Government Knowledgeable Authoritative Professional United International Members

19 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 18 Tone Guide: Describing Services and Activities Reader Write like this Potential members, existing members, government, international institutions, potential private partners Since the ACCC was founded in 1972, the national and international success of Canadian colleges has grown as a result of the vision, expertise and guidance of strong executive leadership. Our innovative annual Leadership Development Programs have been instrumental to this success, cultivating future presidents, vice-presidents, deans and directors while enhancing executive leadership capacities for all CIC member colleges. Reader feelings Curious, inquisitive, interested Tips Establish authority Use language that demonstrates knowledge acquired through precedent Use a decisive voice Do not use phrases like we believe Your tone should be Knowledgeable, united, authoritative, professional Show vision Highlight the larger goals (missions) Be sure to illustrate the benefits for the customer (existing / potential members) In-line and / or in bullet-form (at very least in bullets) Highlight accomplishments Be sure to include a clear call to action (and in-line links where appropriate)

20 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 19 Writing for Marketing Purposes (e.g., Events, Programs) Prospective Members Informative Inviting Professional Prospective Partners Members

21 Voice & Tone Guide Colleges and Institutes Canada - Web Style Guide Page 20 Tone Guide: Marketing (e.g., Events, Programs) Reader Write like this Potential college executives, potential members, existing members, federal government influencers Discover the excitement and challenges of an executive career in college operations. An amazing experience. I learned so much about the directorship role and what it takes to be a leader in this sector. - Reader feelings Interested, ready to participate Steve Smith The Leadership Development Initiative is an intensive, residential program designed to help participants explore a career path toward an executive role of dean or director. Guided by an experienced group of faculty, participants will build on their leadership skills and knowledge in a 5-day series of interactive sessions hosted at the lovely Wakefield Mill in Quebec. Your tone should be Informative, inviting, professional Tips Be descriptive, goal-oriented and focussed on benefits from early-on Highlight past success (via testimonials or otherwise) Be descriptive about the event, leaders, speakers, and schedule Be sure to include a clear call to action (and in-line links where appropriate)

22 Next Steps

23 Socialize, Educate, Enforce & Iterate In order to get the most from this guide, it is important that it be distributed throughout the organization, particularly amongst those in communications or those that have administrative abilities on the website. By socializing the document amongst the team, the guidelines will eventually become secondnature, bringing focus to your unique value proposition and communicating your values naturally. As mentioned earlier, the website redesign project is still underway so this document will change and grow over time. And while you can expect new guidelines as the project matures, these recommendations should serve Colleges and Institutes Canada for new content or changes to content under the current website. When in doubt, don t hesitate to contact bv02 with questions. We love the opportunity to meet your challenges and bring new ideas to the table.

24 a digital creative agency Thank you. bv Bank St. Suite 103 Ottawa, ON K1S 3W3 T x389 ben.waldman@bv02.com

IDENTITY SYSTEM GUIDELINES

IDENTITY SYSTEM GUIDELINES Whether you re starting out, moving up or starting again WE RE READY WHEN YOU ARE August 2014. Version 1.5 Contents 02 CONTENTS 03 Our brand 04 Our Identity 04 Our logo 05 Logo