The UVU Web Style Guide
Total Page:16
File Type:pdf, Size:1020Kb
UNIVERSITY WEB STYLE GUIDE Web Logo & Graphic Standards web how to use this guide This guide is to be used in conjunction with, and is a expansion of, the If you have questions about branding style guide. Please refer to the branding style guide for basic guidelines. University logo usage that are not answered in this volume, do not hesitate to contact our office. UNIVERSITY MARKETING & COMMUNICATIONS (801) 863-8206 Licensing Manager (801) 863-7628 Art Director (801) 863-6411 To view this style guide online, download applicable marks, and find additional resources, visit uvu.edu/ marketing/style Published by Utah Valley University This guide is specific to web usage. Marketing & Communications For print material, please refer to the branding style guide. use this guide INSTITUTIONAL MARKS logos Minimum Clear space is half of the height of the “U” within the logo represented by “X”. The recommended space is X*2 where possible or when used with other logos. Minimum height for web ussage is listed next to the respective logos. MIN HEIGHT 32PX MIN HEIGHT 32PX MIN HEIGHT 20PX See the university style guide for logo color recommendations. UNIVERSITY STYLE GUIDE 1 UNIVERSITY SEAL seal Minimum Clear space is half of the height of the seal represented by “X”. The recommended space is X*2 where possible or when used with other logos. MIN HEIGHT 114PX See the university style guide for logo color recommendations. 2 UNIVERSITY STYLE GUIDE seal PRIMARY ATHLETICmascot MARK MIN HEIGHT 32PX Minimum Clear space is half of the height of the Primary Athletic Mark represented by “X”. The recommended space is X*2 where possible or when used with other logos. MIN HEIGHT 75PX See the university style guide for logo color recommendations. UNIVERSITY STYLE GUIDE 3 PRIMARY ATHLETIC WORDMARKwordmark Minimum Clear space is half of the height of the “U” within the logo represented by “X”. The recommended space is X*2 where possible or when used with other logos. MIN HEIGHT 24PX See the university style guide for logo color recommendations. 4 UNIVERSITY STYLE GUIDE wordmark OFFICIAL UNIVERSITYcolor COLOR PRIMARY COLOR PALETTE #275D38 #000000 #FFFFFF #8E8C89 RGB: 39 93 56 RGB: 0 0 0 RGB: 255 255 255 RGB: 142 140 137 Pantone 7483 (Primary) Black White Pantone 8001 — web COMPLEMENTARY COLOR PALETTE #275D38 #00843D #48A23F #78BE20 #C5E86C RGB: 39 93 56 RGB: 0 132 61 RGB: 72 162 63 RGB: 120 190 32 RGB: 197 232 108 Pantone 7483 (Primary) Pantone 348 Pantone 7738 Pantone 368 Pantone 374 #823B34 #E1523D #D45D00 #FFB500 #FBDB65 RGB: 130 59 52 RGB: 225 82 61 RGB: 212 93 0 RGB: 225 181 0 RGB: 251 219 101 Pantone 7609 Pantone 7625 Pantone 717 Pantone 7549 Pantone 120 #595478 #0095C8 #00BFB3 #86C8BC #BDD6E6 RGB: 89 84 120 RGB: 0 149 200 RGB: 0 191 179 RGB: 134 200 188 RGB: 189 214 230 Pantone 5275 Pantone 639 Pantone 3262 Pantone 564 Pantone 544 #696158 #8C8279 #A7A8AA #D0D0CE RGB: 105 97 88 RGB: 140 130 121 RGB: 167 168 170 RGB: 208 208 206 Pantone 405 Pantone Warm Gray 8 Pantone Cool Gray 6 Pantone Cool Gray 2 UNIVERSITY STYLE GUIDE 5 typographyINSTITUTIONAL FONTS FONT STANDARDS FONT SIZES We require that all fonts used on the UVU site be UVU sets the h1-h6 fonts to certain settings and Web-safe fonts. See examples. they are the recomended for university standards. Do not underline text. Underlines should be These sizes are a rounded estimate of the current reserved for links. Use other methods of emphasizing most popular browser settings. text, such as bold, italics, headers, etc. h1: 32px We recommend a limit of three or fewer fonts and h2: 24px font colors used on any page. h3: 18px h4: 15px We do not recommend or support h5: 13px Comic Sans MS, Cursive. h6: 11px FONT EXCEPTIONS We recommend in most cases the body copy on web To enhance and maintain the UVU marketing pages use a 14px font size, smaller fonts can be used standards, we have provided the use of Stratum. with additive text. 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. 6 UNIVERSITY STYLE GUIDE typography EXAMPLES SERIF FONTS INSTITUTIONAL PRIMARY — SANSERIF (USE IN HEADINGS) Georgia. AaBbCc123 ABCD Palatino Linotype, Book Antiqua, Palatino. Stratum 1 Thin Times New Roman, Times. AaBbCc123 ABCD Stratum 1 Light SANS-SERIF Arial, Helvetica. AaBbCc123 ABCD Stratum 1 Regular Arial Black, Gadget. Comic Sans MS, cursive. AaBbCc123 ABCD Impact, Charcoal. Stratum 1 Medium Lucida Sans Unicode, Lucida Grande. AaBbCc123 ABCD Tahoma, Geneva. Stratum 1 Black Trebuchet MS, Helvetica. AaBbCc123 ABCD Verdana, Geneva. Stratum 1 Black MONOSPACE FONTS INSTITUTIONAL PRIMARY – SERIF (BODY COPY) Courier New, Courier. Lucida Console, Monaco. AdobeAaBbCc123 Garamond Pro, Regular and ItalicAaBbCc AaBbCc123 Adobe Garamond Pro, Semibold and SemiboldAaBbCc Italic AaBbCc123 AaBbCc Adobe Garamond Pro, Bold and Bold Italic Institutional Secondary (body copy) AaBb Arial Regular, BoldCc and Oblique123 ABCD AaBbCc123 ABCD Arial Narrow Regular, Italic, Bold and Bold Italic UNIVERSITY STYLE GUIDE 7 imagesPHOTOGRAPHY IMAGE DOWNLOAD INFORMATION uvu.edu/marketing/photography 8 UNIVERSITY STYLE GUIDE SIZE EXAMPLE: When using images on a page, it is best to use an image <img src=”imagepath/image-title.jpg” alt=”image dis- editor such as GIMP or Photoshop to scale the images cription” width=”304” height=”228” /> to the final size that you want to use. SRC: Example: the path to the file you want to use. If your image is 800px wide, do not resize it with HTML to <img width=”100“ height=”XXX” src=”XXXX” ALT: images alt=”XXXX” />. the text that will display if the image can’t be loaded. The alt tag is also what is read by a screen reader to help Scaling images down with HTML may cause loading with accessibility. issues. Do not stretch images to fit the container or area on a page. Images must maintain their aspect ratio. TITLE: (optional, recommended) = text that displays when a Scaling up an image will pixelate it, or force the image user hovers over an image or HTML tag. Web crawlers, to appear out of focus. Images should not be larger than such as Google, use “alt” and “title” attributes to pro- the width of the current UVU Web templete. vide users information when they search for keywords. For images that require a transparent background, it is NOTE: recomended to use .png files rather than .gif files. Using extra words and descriptions in the ‘alt’ and ‘title’ tags can be considered a violation in some search Image file names should use lowercase letters, and, in engines and will work against you; keep the informa- cases where there is a space, it is recommended to use a tion in these tags specific to the content to avoid issues. dash or underscore. Images with flattened text require properly tagged “alt” Example: and “title” attributes. 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. UNIVERSITY STYLE GUIDE 9 ONLINE PRESENCE Many people interact with UVU’s brand identity through a variety WEB DESIGN ASSISTANCE of online properties, including the University’s website, search engine uvu.edu/marketing/webweb results, and your department’s social media accounts. It is imperative GETTING DIGITAL SIGNAGE ON THE WEB that the information they find there is clear and concise and that your uvu.edu/marketing/sliders use of brand images is appropriate. Whether your content is in front of or behind a login screen, please continually take inventory of how you SOCIAL MEDIA PROTOCOL present UVU’s brand identity, making sure that all information is up-to- uvu.edu/marketing/social date and clearly and consistently stated. WEB COMMUNITY RESOURCES uvu.edu/web If you feel the web properties representing your department or area need assistance, please contact University Marketing & Communications who will work side-by-side with Web Development to create a web presence that is attractive while also meeting your department’s objectives. 10 UNIVERSITY STYLE GUIDE.