WPS District Style Guide

District Style Guide

Wayzata Public Schools has established a style guide to govern the use and publication of all materials in print and on the district, school and program websites. These styles have been established for consistency across the district’s publications and should not be altered. Questions regarding the style guide or website publishing should be directed to the district’s webmaster at 763-745-5112 or the communication department at 763-745-5068.

Table of Contents Use of district and building logos – Page 2 District print style guide – Page 8 District website style guide – Page 13 Website protocol – Page 15

1

Use of district and building logos Our institutional identity Wayzata Public Schools visual identity is established through the appropriate use of the following: the WPS district logo which consists of the words Wayzata Public Schools surrounded by a laurel/open ended circle. The words and the “laurel surround” may not be used separately or without each other, nor should the words be repositioned inside the laurel surround. The exceptions to this usage will be included in various sub-brand and social media logos that are the approved district designs for those sub-brand entities (see page 3).

Spacing A minimum amount of space is required around all edges of the WPS logo to buffer it from other graphics and type that appears in close proximity. The space between the logo and all typography, other logos, graphics and photos should be equivalent to or greater than the gray region illustrated below. Plenty of white space around the logo is optimum, particularly the space above the logo should be left clear with as much white space as possible, so the “laurel surround” appears to breathe and not be closed in.

2

Use of district and building logos (continued) Sizing In general, the WPS logo should be displayed prominently on all materials where it is used. At all times, the logo should be scaled proportionally. The logo should never be stretched, squashed or distorted in any way to fit in a desired area. To maximize legibility in both print and electronic materials, the logo/mark may not appear smaller than illustrated in the examples below. Some promotional materials, such as pens may need to use forms of the logo at smaller sizes. Consult the WPS communications department for approval of versions of the logo smaller than one inch across.

Smallest size: Print: one inch minimum width Electronic/web: 80 pixels wide at 72 dpi

Incorrect use Below are a few examples of incorrect usage. Please contact WPS communications department with further questions at 763-745-5068.

Examples of improper scaling/distortion

WPAYZATA UBLIC SCH O OLS

Examples of improper reconfiguration

3

Use of district and building logos (continued) Logo with tagline The tagline should be used in conjunction with the logo as needed, in the following ways. On occasion, the tagline may appear separated from the logo, such as the bottom of the website home page where there is either the tagline or the mission statement. Please request logo and tagline art from the communications department.

4

Use of district and building logos (continued) Colors Wayzata Public Schools has two colors that are primary to its logos. Below are the proper color breakdowns for the logo for various purposes. There are files appropriate for print use and web use.

Please contact the communications department for the correct file type for where you want to use it.

3-color, blue, gold and black

Reverse logo on a dark background

2-color, blue & gold

Black

1-color, blue

Black & gray

Pantone Print

CMYK Print

Web RGB

Web Hex

PMS 295 Blue

C:100 M: 57 Y:0 K:40

R: 0 G: 68 B: 124

Hex: #00447C

PMS 124 Gold

C:0 M: 28 Y:100 K:6

R: 238 G: 177 B: 17

Hex: #EEB111

5

Use of district and building logos (continued) Sub-branding Wayzata Public Schools sub-branded logos are an extension of the district’s brand identity, and function as a specific identification for entities under the WPS umbrella that require personalized branding while still maintaining a visual link to the parent brand of the district. Below are the logos for the schools and offices within the WPS identity. Please contact the communications department for information on any Wayzata Public Schools identity questions.

6

Use of district and building logos (continued) Sub-branding (continued)

7

District print style guide Use of image and names The district identity of Wayzata Public Schools has been designed to encompass all elements of our school system in a unified, consistent image. It allows flexibility to promote the wide range of schools, programs, services and resources we offer. As you communicate with parents, students, policy makers, the news media, employees, vendors, volunteers and other audiences, it is important to maintain a consistent identity for Wayzata Public Schools.

Promotion of district information

District logo

The district logo should appear on all printed materials, including brochures, newsletters, ads, flyers and other publications. This immediately and obviously identifies the school, program or service as part of Wayzata Public Schools.

If you have space in your publication, it’s helpful to remind readers about the many ways they can access school district information. Information resources available in the district are: Cable Television - EDsTV, etc.

Website - www.wayzata.k12.mn.us

District logo color

Wayzata Public Schools

The district logo will appear in the colors identified in the previous section of this style guide on district-wide materials such as business cards, stationery and communications materials.

We encourage the use of these colors whenever possible. However, to be cost-efficient and flexible, the district logo may be used in the various approved black and gray versions.

Use Wayzata Public Schools when referring to the school district. It is our goal to encourage people to refer to us as a name, not a number. Wayzata Public Schools is a singular unit and takes a singular verb. For example: Wayzata Public Schools maintains a long tradition of high academic achievement.

Residents of Wayzata Public Schools are invited to an open house and school carnival

District stationery

Stationery is one of the most effective ways to communicate the district’s identity. Letterhead, envelopes, business cards and other materials have been designed to be consistent for all district schools and programs and convey a clear impression of Wayzata Public Schools.

The district’s stationery was also designed to be personalized. Your name, phone and address will appear on these printed materials to identify your individual school or program. Each school and program should use the standard district format when printing stationery. For assistance with your stationery printing needs, please contact the purchasing department at 763-745-5032.

School names

When referring to schools within the district, the preferred usage is just the name of the school without the name Wayzata first except when identifying the high school: • Birchview Elementary School • Gleason Lake Elementary School • Greenwood Elementary School • Kimberly Lane Elementary School • Oakwood Elementary School • Plymouth Creek Elementary School • Sunset Hill Elementary School • Central Middle School • East Middle School • West Middle School • Wayzata High School 8

District print style guide Writing style Active voice

Gender-neutral language

Effective design

Parallel structure

The active voice in writing is more interesting and appealing to the reader. Active voice simply means using an active verb, rather than a passive verb (is, are, am, was, were, be, being, been, has, have, had) There was a celebration for students in the spring.

Better: Students are celebrated in the spring.

Use nonsexist language as much as possible.

However, avoid excessive use of he/she and him/ her. Try to rewrite sentences to avoid the need for a pronoun. For example: When a student wants to change his or her registration, he or she should see a counselor.

Better: A student who wants to change registration should see a counselor.

A clean, simple design is always best. Design your publication so the reader has no opportunity for confusion. Make your message obvious. Cute, hidden messages may be trends for web pages and advertisements, but clean, simple publication designs will communicate your message most effectively.

Use parallel structure for parallel items. In the example below, each phrase begins with a verb (underlined).

The goals of this course are to improve spelling, understand punctuation and write cohesively.

Remember your audience

“Anything written to please the author is worthless,� writes Blaise Pascal. You are not the audience. Identify your audience and write a message that is appropriate, meaningful and interesting for them.

Avoid more than three fonts (type faces) in the same publication. Usually, one sans serif font, like Helvetica, is used for headlines and a serif font, like Times, is used for body copy. Serif type is most easy to read in print publications.

When working on websites, the opposite should be used, i.e. a serif font for headlines and a sans serif font for body copy. Avoid putting too much copy in reverse type and all caps. These are nice styles for emphasis of short copy blocks, but both are difficult to read. The smallest type for easy readability is 10 to 12 points, depending on the font. Anything smaller is difficult to read.

Subject, pronoun and verb agreement

It is essential that the pronoun and verb agree with the noun subject. Each pronoun should agree with its antecedent in number, and verbs must agree with their subjects in number.

Incorrect: Have your child (singular) bring their (plural) books to school.

Correct: Two students (plural noun) ride (plural verb) their (plural pronoun) bikes to school.

Effective writing

Age

Clear, concise writing is best. Use short words, short sentences and short paragraphs whenever possible. Some people read at lower levels, and others simply don’t have time to read long passages. To communicate effectively, keep it simple.

Do not spell out ages, use cardinal numbers. It is not necessary to use the term age before the number.

He is 7. The 6-year-old girl started kindergarten in the fall. Bill, 65, announced his retirement in April.

9

District print style guide Writing style Headlines

subsequent references.

The principal of East Middle School (EMS) is Paul Paetzel. EMS is located in Plymouth, Minnesota.

Date

Apostrophes

Capitalize all words in a title of publications and documents, except the following: a, an, the, at, by, for, in, of, on, to, up, and, as, but, it or, and nor.

Use a comma with month, day and year. No comma is needed with month and year. Use cardinal numbers only; no th or nd is needed.

September 3, 2011 / September 2011 January 30 (not January 30th)

Money

Use cardinal numbers. $5 (not $5.00) $1, $2 million, 25 cents

Numbers

Spell out numbers less than 10, except in reference to age, time, date, percentage or money.

Always spell out a number when it begins a sentence.

The 12-year-old boy ate four apples in 30 minutes. Twenty-five women, three children and 11 men attended the parent meeting.

Percent

Spell out as one word. The word should always be written out in narrative copy. Use cardinal numbers in front of the word percent.

1 percent, 2.5 percent, 97 percent

Phone numbers

Separate area code from prefix with a hyphen 763-745-5000

Time

Use numeric figures. Do not put a 12 in front of noon or midnight. It isn’t necessary to complete the time with :00. Use lowercase letters and periods when writing p.m. and a.m.

Abbreviations and acronyms

Avoid abbreviations; always spell out words.

When using acronyms, always state the complete name of the organization first, followed by the acronym in parentheses. Use the acronym in

Apostrophes are used to show possession and indicate omitted letters and numbers.

To show possession with a singular noun or a plural noun that does not end in s, add an apostrophe and an S (‘s) To show possession of a plural noun that does not end in an S, simply add an apostrophe (‘).

To show possession with our name, Wayzata Public Schools, you may add an apostrophe or rewrite the phrase.

Good: Wayzata Public Schools’ marching band Better: The marching band of Wayzata Public Schools Do not use an apostrophe with these common pronouns that show possession: its, mine, ours whose, yours, his, hers, theirs.

Contractions use an apostrophe to indicate the omission of a letter: can’t, won’t, didn’t.

Do not use an apostrophe to designate plural terms, unless it’s for a single letter.

Commas in a series

Do not use a comma with the conjunction and at the end of a simple series. Use a comma if the series is complex.

The fox jumped over the dog, the cat and the turtle

Commas with clauses

Use commas to separate clauses that have their own subjects.

The fox went down to the river, the wolf went to the prairie.

Do not use a comma when the subject of the two clauses is the same and is not repeated.

The fox went down to the river and swam across.

10

District website style guide Homepage Design Website Design Methodology

This iteration of the Wayzata Public Schools website incorporates a more collegiate look and feel that is intended to make it easier for users to find and use the information — streamlining the functionality and navigation. Changes include updates for: • Consistency / Precise Navigation • Communication • Functionality • Design • Vision

Layout and App structure explained Wireframe of Website Layout

A B

A. Channel Bar Navigation B. Site Interaction 1. Sign In 2. Select a School 3. District Home 4. Translate this page...

5. Help 6. Site Search C. Quicklinks D. Feature Story E. District Headlines F. School/Program Happenings G. Links to Schools’ Homepage H. Link to GuideK12 I. School/Program Contact Information

C

D

E

G

F

H

I

11

District website style guide Internal page design and structure

Internal Page no sub-navigation

Internal Page with sub-navigation

When fewer than a select number of pages within a section exist, this standard page format will be used.

When a greater number of pages have been created within a section, this page format will be used. If you are using this layout, only “one column� layout should be used.

Page layout options for pages with no sub-navigation One Column

Right Sidebar (Header/Footer)

Two Column (Simple)

Two Column (Header/Footer)

Right Sidebar (Simple)

Three Column (Header/Footer)

Left Sidebar (Simple)

Left & Right Sidebar

Three Column (Simple)

Two Column Right Sidebar

Width is equivalent to 100 percent

Header/Footer are 100 percent Left space is 67 percent Right space is 33 percent

Each column is 50 percent

Header/Footer are 100 percent Each column is 50 percent

Left space is 67 percent Right space is 33 percent

Header/Footer is 100 percent Each column is 33 percent

Left space is 33 percent Right space is 67 percent

Left and right spaces are 25 percent Middle space is 50 percent Header/Footer is 100 percent

Each column is 33 percent

Left columns are 33 percent each Right sidebar is 33 percent Header/footer is 67 and 100 percent 12

District website style guide Typography Internal Page no sub-navigation Header and Body Paragraph fonts on the district website are Google Font Lato. Use of this font allows for quick loading of the website in all browsers. No substitute fonts or colors should be used as this slows page load times and creates an inconsistent look for the district.

Static Pages Headings 1, 2, 3, and Subhead

Font: Lato Font Size: 24, 22, 20 and 16 pixels Color: 00447C

Body Paragraph

Human Resource Services Welcome to the Wayzata Public Schools Human Resource Services Department. Wayzata Public Schools employs approximately 1,300 staff, including teachers and certified

faculty, secretaries, educational assistants, custodians, food Font: Lato Font Size: 13 pixels service workers, principals and administrators. (Read More) Color: 3a3a3a (Charcoal) White Background Link Color: 00447C (Wayzata Blue) Dark Background Link Color: EEB111 (Wayzata Gold) Line Height: 19.2 pt

These style guide selections are listed under paragraph styles in the editing window ­—

Content Posting Directions When posting content in the content management system of Schoolwires and copying from another document or website, always use the paste plain text tool in the tool bar — This tool allows the built-in template to style your content and prevents bringing over underlying code from Microsoft Office and styles that will disrupt the appearance and functionality of the page.

When posting images to the page, they should be right aligned.

Web Color Palette Table Colors

Heading Bar: 00233F (Wayzata Blue) Left Column: 004579 Alternating Rows: B8CCE4 Text Font: Arial Font Size: 10 pt Color: White on color cells Charcoal on white cells: 3a3a3a

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

Text Here

13

District website style guide Homepage Artwork Feature Story Space

Headline text has space approximately 25 characters including spaces.

Teaser text has space for approximately 175 characters, including spaces.

The feature article photo should be sized to 550 pixels wide by 325 pixels tall.

Non-photo artwork, including clipart, should not be used in this.

School Happenings

The headline has space for approximately 30 characters including spaces.

Do not use the teaser text line for the school happenings app.

Artwork for the school happenings should only be the month/date image.

District Headlines

The headline has space for approximately 36 characters including spaces.

Teaser text has space for approximately 52 characters.

Artwork for the school happenings should only be the month/date image.

Photo Galleries Headline and Feature Story articles should use Flickr photo galleries.

Photo galleries should only be used when there are four or more photos associated with a story and always used for four or more photos.

Staff should contact the site webmaster for assistance with uploading photos to Flickr and embedding a gallery to a site.

14

Website protocol for site webmasters Web access Access to administering on the district’s website is limited to district employees only. District employees cannot hand out access codes to non-employees to administer the site in compliance with the district’s technology acceptable use policy (School Board Policy 631 and 631-R).

Parent volunteers and non-employees may generate content for the district’s website, but it must be uploaded only by a district employee or a building webmaster.

Site webmasters granting any rights to additional users should work through the district webmaster prior to granting privileges in order to track total usership of the site for security purposes.

Management of Homepage, Channel and Section Navigation The navigation and structure for the site has been developed by the district’s webmaster in conjunction with all departments and buildings in the district. These include items in the channel bar and sections as well as QuickLinks. This structure should not be altered at the building level.

Pages within sections may be created by the site webmaster and district staff as necessary within sections that they have access to edit. However, refrain from using additional pages to organize numerous individual content items as this creates long and unnecessary left-side navigation menus.

This iteration of the website has apps that allow this information to be presented in a clean and concise manner and one of the goals of the design is to remove left-side navigation when possible and make content easier to find with fewer clicks necessary.

Beginning with this iteration of the district website, site webmasters will have access to their building’s: Homepage and Calendar. Site webmasters will have access to all channel bars with the exception of the hidden Teacher channel, wherein all teacher sites reside.

Modifications should not be made by site webmasters to Channel Bar (horizontal menu on all pages), Section navigation (drop-down menus), and QuickLinks. These have been set by the District Technology and Communications Departments for consistency. Changes or additions may be handled on a case-by-case basis and it is requested that site webmasters work with the District Webmaster.

If a teacher needs assistance with their site (section), the site webmaster will need to be present and access using the teacher’s Active Directory (AD) credentials. The District Webmaster is available for advanced support as needed and may be contacted at 763-745-5100 or by email at webmaster@ wayzata.k12.mn.us. Resources, including how-to-videos, help cards and copies of the style guide and copyright/fair use guidelines can be found on the webmaster’s district site at www.wayzata.k12. mn.us/andrew.hagen.

All site webmasters are expected to follow established guidelines and work using the tools provided.

All content posted to the District website should be posted in accordance with this document.

15

Website embedding protocols and resources More information can be found about these protocols at www.wayzata.k12.mn.us/webmaster.

Embedding a Google Calendar A. Enter www.google.com/calendar/a/isd284.com in your browser address bar.

B. Your username is firstname.lastname C. On the calendar view, hover your mouse over the calendar that you would like to embed on your page.

D. An arrow will appear to the right of the calendar name; click on this arrow and select “Share this Calendar.”

E. Two boxes need to be checked 1. Share this calendar with others 2. Make this calendar public F. Click on “Calendar Details” near the top of the screen G. Copy the code as it appears to the right of “Embed This Calendar” H. To embed the calendar onto your site, you must be logged into the website (Schoolwires Centricity2) and in the Site Manager.

I. Select the page you wish to have the calendar on.

J. Click on “HTML” at the bottom of the Flex Editor App K. Paste code from Google. Look for width=“800” and replace 800 with 100% L. Click “Save” M. Refresh your calendar page to verify that the calendar posted correctly.

Embedding a video from Vimeo Consult your site webmaster to upload videos to Vimeo.

Videos should be placed in apps that are full-width. If embedded on a page that has left-hand navigation, the width of the video should be set to 660 pixels. If the page does not have left-hand navigation, the width should be set to 880 pixels.

Embed codes should begin with <iframe src=. If the embed code begins with anything else, it will play as a Flash video and not be playable on iPads or other iOS devices.

Embedding a photogallery from Flickr Consult your site webmaster to upload photos to Flickr.

Flickr photo gallery player should be placed in apps that are full-width. If embedded on a page that has left-hand navigation, the width of the photo gallery player should be set to 660 pixels. If the page does not have left-hand navigation, the width should be set to 880 pixels.

Photo galleries from Flickr are Flash based and cannot be viewed on iPads or iOS devices. Text should be provided at the top of the page that reads “To view this gallery on an iPad or to download pictures to your computer, click here.” The words “click here” should be linked to the set on the District’s Flicker account website.

16