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

Transcription

1 U T A H V A L L E Y U N I V E R S I T Y W E B S T Y L E G U I D E V olume 1: Web Style Guide v1.0.1

2 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) Program Manager, Integrated Marketing (801) Director of Publications & Marketing (801) Director of Creative Services (801) For Web and Marketing Purposes Published by Utah Valley University University Marketing & Communications

3 TYPOGRAPHY FONT STANDARDS 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 emphasizing 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 Arial Narrow Regular, Italic, Bold and Bold Italic

4 PRIMARY INSTITUTIONAL MARK The Beveled Monogram should not be used smaller than 54px height from top to bottom, as shown here. 54px 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. 32px Clear space: To determine clear space, the height of the U has been defined as x. Clear space should be at least. SECONDARY INSTITUTIONAL MARK HORIZONTAL VERSION While the Primary Institutional Mark should be used whenever possible, a horizontal version 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. 144 px Clear space: To determine clear space, the height of the U has been defined as x. Clear space should be at least. 115px

5 ALTERNATE INSTITUTIONAL MARK MONOGRAM 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. 1/2 x 1/2 x 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. 75px 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. Approved alternates 16px

6 SECONDARY SYMBOLS THE SECONDARY SYSTEM In communicating the UVU brand, there will be instances in which it will be appropriate to identify a specific department 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 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). Colleges and schools The look and feel of college and school marks were predetermined in Dean s Council. Please visit uvu.edu/marketing/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 The same color and clear-space requirements that apply to the Insitutional Primary Mark also apply to Secondary Symbols. 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/marketing/style/

7 PRIMARY ATHLETIC MARK THE PRIMARY ATHLETIC MARK 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. 1 / 4 x 1 / 4 x width =x 1 / 4 x 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. Version 2 Version 3 Version 3 50px SECONDARY ATHLETIC MARK 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. 16px 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. width=x ALTERNATE ATHLETIC MARK 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.

8 ALTERNATE ATHLETIC MARK THE MASCOT The Wolverine mascot plays a big part in the visual representation 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 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 30px 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. 85px SUPERSCRIPT WORDMARK 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. 74px

9 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 explanation 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. 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. The application process to become a restricted licensee takes between days, so campus entities are encouraged 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).

10 PRIMARY COLOR PALETTE 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 The Primary palette is to be used for all institutional, college, school and departmental marks and official communication which represent the University. Institutional Primary The Primary palette is to be used for all institutional marks and official communications which represent the University. 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] HEX #4d7123 R:77 G:113 B:35 HEX # R:0 G:0 B:0 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 document to its non-managed environment. 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). -

11 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. HEX #b2ba31 R:178 G:186 B:49 HEX #e7e7d5 R:231 G:231 B:213 HEX #efe2c7 R:239 G:226 B:199 Please note: These colors should not be used on any of the logos except where already indicated and authorized in this guide. HEX #7aa238 R:122 G:162 B:56 HEX #b1a980 R:177 G:169 B:128 HEX #cab67c R:202 G:182 B:124 HEX # R:104 G:119 B:34 HEX #95a1aa R:149 G:161 B:170 HEX #bbb3a5 R:187 G:179 B:165 HEX #5c707c R:92 G:112 B:124 HEX #877f70 R:135 G:127 B:112 HEX #ffcd30 R:255 G:205 B:48 HEX #aa701d R:170 G:112 B:29 HEX #e7cf29 R:231 G:207 B:41 HEX #e6a52d R:230 G:165 B:45 HEX # R:119 G:81 B:6 HEX #c2a224 R:194 G:162 B:36 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. HEX #c3e5dd R:195 G:229 B:221 HEX #b85920 R:184 G:89 B:32 HEX #f4e889 R:244 G:232 B:137 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. HEX #004a13 R:0 G:74 B:19 HEX #e9d66e R:233 G:214 B:110 HEX #a7a9ac R:167 G:169 B:172

12 INSTITUTIONAL SEAL THE 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 Institutional Seal. It should never be reproduced smaller 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 horizontally or vertically. Do not alter or add anything to the center illustration. Do not substitute a different font or words for Utah Valley University or px 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.

13 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 SEOfriendly 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="image 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.