U T A H V A L L E Y U N I V E R S I T Y

V o l u m e 1 : W e b S t y l e G u i d e v 1 . 0 . 1

U T A H V A L L E Y U N I V E R S I T Y

HOW TO USE THIS STYLE GUIDE

This guide is to be used in conjunction with, and is a expansion of, the

branding style guide. Please refer to the branding style guide for basic guidelines. This guide is specific to web usage. For print material, please refer to the

branding style guide.

To view this style guide online, visit uvu.edu/marketing/style

If you have a question about University logo usage that is not answered in this volume, feel free to contact our office.

UNIVERSITY MARKETING & COMMUNICATIONS

(801) 863-8206

Program Manager, Integrated Marketing

(801) 863-8346

Director of Publications & Marketing

(801) 863-7149

Director of Creative Services

(801) 863-6411

For Web and Marketing Purposes

Published by Utah Valley University University Marketing & Communications

TYPOGRAPHY

We require that all fonts used on the UVU site be Web-safe fonts. See examples to the right. Do not underline text. Underlines should be reserved for links. Use other methods of empha-sizing text, such as bold, italics, headers, etc. We recommend a limit of three or fewer fonts and font colors used on any page.

We do not recommend or support Comic Sans MS, Cursive.

FONT EXCEPTIONS

To enhance and maintain the UVU marketing standards, we have provided the use of Stratum. This font is available with these specifc guidelines: Stratum is reserved for the official UVU header and footer. It is not to be used as body text.

However, you can use Stratum as a headline, such as h1-h6, as a paragraph header or a section header. If you need assistance or feel you have a need other than those described above, please contact the marketing department for advice. FONT SIZES

UVU sets the h1-h6 fonts to certain settings and they are the recomended for university standards. These sizes are a rounded estimate of the current most popular browser settings.

h1: 32px h2: 24px h3: 18px h4: 15px h5: 13px h6: 11px EXAMPLES Serif fonts Georgia, serif

Palatino Linotype, Book Antiqua, Palatino, serif Times New Roman, Times, serif

Sans-serif fonts

Arial, Helvetica, sans-serif

Arial Black, Gadget, sans-serif

Comic Sans MS, cursive, sans-serif Impact, Charcoal, sans-serif

Lucida Sans Unicode, Lucida Grande, sans-serif Tahoma, Geneva, sans-serif

Trebuchet MS, Helvetica, sans-serif Verdana, Geneva, sans-serif

Monospace fonts

Courier New, Courier, monospace Lucida Console, Monaco, monospace

Institutional Primary (use in headings) AaBbCc123 ABCD Stratum 1 Thin AaBbCc123 ABCD Stratum 1 Light AaBbCc123 ABCD Stratum 1 Regular AaBbCc123 ABCD Stratum 1 Medium AaBbCc123 ABCD Stratum 1 Black

Institutional Secondary (body copy) AaBbCc 123 ABCD

Arial Regular, Bold and Oblique Aa Bb Cc 123 ABCD

= x

1 x

1

x

1

x

1 x

32px

54px

PRIMARY

INSTITUTIONAL MARK

144 px

= x

1 x

1

x

1

x

1 x

115px

The Beveled Monogram should not be used smaller than 54px height from top to bottom, as shown here.

SECONDARY

INSTITUTIONAL MARK

The Solid Monogram may be used — in one color — if a smaller size is required, but should not be reproduced smaller than 32px in height from top to bottom, as shown here.

Clear space: To determine clear space, the height of the “U” has been defined as “x.” Clear space should be at least 1 x.

HORIZONTAL VERSION

While the Primary Institutional Mark should be used whenev-er possible, a horizontal vwhenev-ersion of the Institutional Mark has also been created to offer maximum flexibility for consistant branding when vertical space is limited. You may use all the color and bevel options listed with in the primary pallet section.

The Horizontal Beveled Mark should not be used smaller than 144px in length from left to right, as shown here.

Color use at smaller scale (minimum size or close to minimum size) for all University marks will depend upon reproduction capabilities. Color should not be forced if it impedes clear legibility.

The Solid Mark may be used — in 1 color — if a smaller size is required, but should not be reproduced smaller than 115px in length from left to right, as shown here.

Clear space: — To determine clear space, the height of the “U” has been defined as “x.”

ALTERNATE

INSTITUTIONAL MARK

16px

75px

= x

_1/

2 x

1/2 x

1/2 x

There will be instances where the “UVU”

monogram may be applied to a design without the words “Utah Valley University.” Please follow these guidelines. With the use of the monogram, all publications must also include the Primary Institutional Mark on the document. Minimum size: The minimum size will differ between the two versions. The Beveled version should never be used

smaller than 75px from left to right and the solid should never be used smaller than 16px from left to right.

Trademark: Please adjust the size of the “TM” appropriate to the image usage.

Clear space: To determine clear space, the height of the “U” has been defined as “x.” Clear space should be at least 1/2 x.

SECONDARY

SYMBOLS

In communicating the UVU brand, there will be instances in which it will be appropriate to identify a specific depart-ment in conjunction with the institutional logos. At the same time, it is critical to the brand that this communication be unified. For this purpose, a uniform system for “Secondary Symbols ” for departments and extensions of the University has been developed. The consistent use and application of this system will help identify and add credibility to the University. Campus entities should not create their own logos.

HOW TO GET A SECONDARY SYMBOL Secondary symbols can be ordered online at:

uvu.edu/marketing/style/. When your order form has been received, the University Marketing & Communications department will contact you and send your Secondary Symbol via email within five working days from the date your order was submitted.

SECONDARY SYMBOL GUIDELINES

Secondary Symbols may be used on Web pages, but must not replace the institutional UVU mark in the primary header of the Web templates. All Secondary Symbol orders should be cleared through the appropriate supervisor (some schools, for example, may wish to have a consistent look at the departmental level).

The same color and clear-space requirements that apply to the Insitutional Primary Mark also apply to Secondary Symbols.

Colleges and schools

The look and feel of college and school marks were predetermined in Dean’s Council. Please visit uvu.edu/mar-keting/style/ for more details and to receive a personalized mark for your college or school.

Departments, programs, centers and other organizations A variety of formats are available to choose from. Once your department has determined the style it likes best, visit uvu.edu/marketing/style/ to submit your order and receive a personalized Secondary Symbol for your organization.

Version 1

Version 2

Version 3

(not intended for use by academic departments)

Note: A single mark should be selected and used on a long-term basis. Academic departments should use the template option that reflects the UVU institutional logo. TO ORDER SECONDARY SYMBOLS, VISIT: uvu.edu/market-ing/style/

PRIMARY

ATHLETIC MARK

16px

w i d t h = x

1/4x

1/4x

1/

4

x

1/

4

x

50px

Like the Institutional Mark, there are several University Athletic Marks — a Primary, Secondary and Alternates (Mascot and Mascot with Wordmark) — to provide options for display, taking into account purpose, size, prominence and production methods.

DO NOT’S

Do not alter the proportion of the artwork horizontally or vertically.

Do not reflect or “mirror” the mark so it is facing left instead of right.

Minimum size: no smaller than 50px in width.

Clear space: To determine clear space, the height of the Primary Athletic Mark has been defined as “x.” Clear space should be at least 1/4 x.

THE UV CLAW

The Secondary Athetic Mark, also know as the “UV Claw,” provides an alternative to the Primary Athletic Mark, and is also available in alternate color schemes (see page 21), taking into account purpose, size, prominence and production methods.

Minimum size: The Secondary Athletic Mark should not be used smaller than 16px in height from top to bottom, as shown here.

Clear space: To determine clear space the width of the UV Claw has been defined as “x.” Clear space should be at least 1/4 x.

COLOR SCHEMES

Consistency in color usage is essential to establishing a recognizable and cohesive identity. The full-color versions of the University Athletic Marks should be used whenever possible.

The UV Claw can be reproduced in any of the schemes at right.

SECONDARY

ATHLETIC MARK

ALTERNATE

ATHLETIC MARK

w i d t h = x

1 / 4 x

1 / 4 x

1

/

4

x

ALTERNATE

ATHLETIC MARK

1 / 3 x

1 / 3 x

1

/

3

x

= x

= x

1 / 3 x

1 / 3 x

1

/

3

x

74px

= x

1 / 3 x

1 / 3 x

1

/

3

x

85px

30px

The Wolverine mascot plays a big part in the visual repre-sentation of the University Athletics Department. It is made up of several color layers that offer flexibility for production while maintaining visual consistency.

DO NOT’S

Do not alter the proportion of the mascot artwork horizontally or vertically.

Do not reflect or “mirror” the mascot so that it is facing left instead of right.

Minimum size: no smaller than 74px in width.

Clear space: To determine clear space, the width of the logo has been defined as “x.” Clear space should be at least 1/3 x. Minimum size: no smaller than 85px in width.

Clear space: To determine clear space, the width of the logo has been defined as “x.” Clear space should be at least 1/3 x. Minimum size: no smaller than 30px in width.

Clear space: To determine clear space, the height of the Primary Athletic Mark has been defined as “x.” Clear space should be at least 1/3 x.

WORD MARK

LICENSING

VENDORS

TRADEMARK

The name and identifying marks of the University are registered trademarks and, as such, should always bear the indicative “TM.” The size of the “TM” may vary, depending on the application of the mark, but should always

be legible.

WORKING WITH VENDORS

UVU has a contract with Strategic Marketing Affiliates (SMA), which handles all licensing issues and royalty collections associated with the UVU logos.

Vendors that desire to produce licensed products for resale to the general public must be licensed through SMA as a standard license. Vendors that desire only to produce licensed products for internal use at UVU must be licensed through SMA as a restricted licensee. Both licenses require the vendor to fill out an application and pay an application fee, although the application and fee vary slightly between the two types of licenses. A more comprehensive explana-tion can be found online at uvu.edu/marketing/style. Only vendors licensed through this licensing program may produce items bearing the UVU name and/or identifying marks.

The application process to become a restricted licensee takes between 10-15 days, so campus entities are encour-aged to think ahead in working with their vendor. A number of local vendors are already licensed. An updated list of licensees is available online at uvu.edu/marketing/style. For more details and a-ssistance with licensing issues, contact University Marketing & Communications (x8346).

Trademark: The “TM” should always be connected to each identifying mark you use, including institutional, athletic and secondary symbols. Size should be adjusted to ensure legibility.

HEX #4d7123

R:77 G:113 B:35 HEX #000000R:0 G:0 B:0

-PRIMARY

COLOR PALETTE

While creating and saving a document, turn off all color management in Adobe and make sure Adobe is running in RGB color. When outputting to the Web, use “Save for the Web” with no color management.

Specifically, under “Mode” set Adobe to RGB. Under “Color Settings” make sure it’s set to the preset of “Monitor Color.” When saving for the Web, make sure “Internet Standard RGB (no color managed)” is selected.

If you’ve already created artwork in a color managed mode using the CMYK Pantone palette, re-open your document in Adobe already set with color-managed turned off (monitor color) and allow Adobe to “convert” your managed docu-ment to its non-managed environdocu-ment.

If you have used the proper hex colors, but found out they were in a color managed space, you need to change your document to “monitor color” and NOT allow Adobe to convert your document (since you are using the right colors in the first place).

THE PALETTE

The University color palette provides a fresh and flexible foundation for all communication materials. Color is a powerful communicator. Please be sensitive to what you are saying. The University color is green and the palette as a whole should support that message.

The color palette is divided into three separate sets: Primary, Complementary and Accent.

The Primary palette is to be used for all institutional marks and official communications which represent the Universi-ty.

The Complementary palette, as defined by its name, is used to complement the primary palette in the design of campus communication materials. It should be used in conjunction with the Primary palette, but not overpower or distort the color perception of the University, which is green. These colors should not be used on any of the logos except where already indicated and authorized in this guide.

The Accent palette, as defined by its name, should never be used alone. It should be used sparingly to “accent” the Primary and Complementary palettes with brighter colors when needed.

Proper usage is essential for building a consistent visual representation of the University through color.

If you have questions or concerns in regard to a particular combination or application of these colors, please contact University Marketing & Communications, [x8346]

THE PRIMARY PALETTE

The Primary palette is to be used for all institutional, college, school and departmental marks and official communication which represent the University.

HEX #687722 R:104 G:119 B:34 HEX #95a1aa R:149 G:161 B:170 HEX #bbb3a5R:187 G:179 B:165 HEX #5c707c R:92 G:112 B:124 HEX #877f70R:135 G:127 B:112 HEX #b2ba31

R:178 G:186 B:49 HEX #e7e7d5R:231 G:231 B:213 HEX #efe2c7R:239 G:226 B:199

HEX #7aa238

R:122 G:162 B:56 HEX #b1a980R:177 G:169 B:128 HEX #cab67cR:202 G:182 B:124

HEX #ffcd30

R:255 G:205 B:48 HEX #aa701dR:170 G:112 B:29 HEX #e7cf29R:231 G:207 B:41

HEX #e6a52d

R:230 G:165 B:45 HEX #775106R:119 G:81 B:6 HEX #c2a224R:194 G:162 B:36

HEX #c3e5dd R:195 G:229 B:221 HEX #b85920 R:184 G:89 B:32 HEX #f4e889 R:244 G:232 B:137 HEX #e9d66e R:233 G:214 B:110 HEX #a7a9ac R:167 G:169 B:172 HEX #004a13 R:0 G:74 B:19

-COMPLEMENTARY

COLOR PALETTE

THE COMPLEMENTARY PALETTE

The Complementary palette — as defined by its name — is used to “complement” the Primary palette as you design materials. It should be used in conjunction with the Primary palette, but not overpower or distort the color perception of the University, which is green.

Please note: These colors should not be used on any of the logos except where already indicated and authorized in this guide.

THE ACCENT PALETTE

The Accent palette — as defined by its name — should never be used alone. It should be used sparingly to “accent” the Primary and Complementary palettes when needed. It should not be used on any of the logos.

ATHLETIC PALETTE

The Primary Athletic Green Pantone 350 is not the same as the Primary Institutional Green. The darker color of this Athletic green offers more contrast to the other athletic colors, and allows us to use green instead of black in most every primary applications.

INSTITUTIONAL

SEAL

The Institutional Seal, with a representation of the campus and Mount Timpanogos behind it, has been created for use on official University documents, such as diplomas and certificates, that are somewhat formal in nature. The seal should be used with discretion.

Institutional Seal: The seal is to be used in one color: #4d7123 (institutional primary green), black or reversed white. The background on which it’s placed should offer sufficient contrast for legibility.

Clear space: To determine clear space, the height of the seal has been defined as “x.” The proper clear space for the seal is at least 1/4 x.

Minimum size: Proper logo size is vital to maintaining readability. This is particularly important for the Institution-al SeInstitution-al. It should never be reproduced smInstitution-aller than 114px in diameter.

The production method should dictate the true minimum size for the seal. If it is “plugging” or looking splotchy, it will need to be bigger.

DO NOT’S

Do not alter the proportion of the seal artwork — horizontal-ly or verticalhorizontal-ly.

Do not alter or add anything to the center illustration. Do not substitute a different font or words for “Utah Valley University” or “1941.”

A specific file has been created for the reversed white version — see example above. Do not simply reverse the black or green version. Contact University Marketing & Communications for the file.

= x

1/4x

1/4x

1/

4

x

1/

4

x

114px

IMAGES

SIZE

When using images on a page, it is best to use an image editor such as GIMP or Photoshop to scale the images to the final size that you want to use.

Example: If your image is 800px wide, do not resize it with HTML to <img width=”100“ height=”XXX” src=”XXXX” alt=”XXXX” />.

Scaling images down with HTML may cause loading issues. Do not stretch images to fit the container or area on a page. Images must maintain their aspect ratio.

Scaling up an image will pixelate it, or force the image to appear out of focus. Images should not be larger than the width of the current UVU Web templete.

For images that require a transparent background, it is recomended to use .png files rather than .gif files. Image file names should use lowercase letters, and, in cases where there is a space, it is recommended to use a dash or underscore.

Example: image-title.jpg or image_title.jpg

SEO (search engine optimization)

It is required that all images used on the UVU site are SEO- friendly by setting the “alt” attribute in an “img” tag. The attribute can also be set using the “image description” field when inserting an image through OUCampus.

Example: <img src="imagepath/image-title.jpg" alt="im-age discription" width="304" height="228" />

src = the path to the file you want to use.

alt = the text that will display if the image can’t be loaded.

this is also what is read by a screen reader for accessibility.

title (optional, recommended) = text that displays when a

user hovers over an image or HTML tag. Web crawlers, such as Google, use “alt” and “title” attributes to provide users information when they search for keywords.

Note: Using extra words and descriptions in the ‘alt’ and ‘title’ tags can be considered a violation in some search engines and will work against you; keep the information in these tags specific to the content to avoid issues.

Images with flattened text require properly tagged “alt” and “title” attributes.