Brand Guide – Web and eMedia

Web and E-media

Integrating our brand across the University’s web presence and various electronic media, or e-media, enables us to make a good first—and lasting—impression as we take giant steps. Consider the power of a consistent identity in the signatures on tens of thousands of emails a week; on hundreds of web pages; on countless social media channels. This is where the brand gets built – and without a strong digital identity, this is where the brand can break down too.  It is essential that our digital presence adheres to the brand guidelines at the individual, departmental, unit and University levels.

 

All employees must include appropriate email signatures, use official graphic standards in presentation templates, properly implement guidelines for web pages, and adhere to policy for social media posts and communication.

 

Please check all of your relevant electronic content areas to ensure that you are proactively implementing UNCG’s brand guidelines and helping the University achieve its strategic goal of building a strong, highly visible, and distinctive brand.

 

New assets delivered

 

With the brand launch in August 2018, University webmasters and developers are tasked with implementing a consistent, wide-screen format header and footer for all websites, existing and in development. ITS will provide these assets in collaboration with University Communications via an automatic push out or the ITS Website Templates page. Additional guidelines on how to apply the brand to your web content may be added as developed as the technology in these arena is quickly changing. For help in updating the new header/footer, please contact 6-TECH at 336-256-TECH (8324) or visit the 6-Tech website.

 

Individuals responsible for eMedia shall obtain the necessary assets from this brand guide website. When referring to eMedia it could include videos, blogs, e-newsletters, social media, interactive media, slideshows and electronic presentation templates. 

 

As always, if you have questions about compliance with the brand identity you can contact brandaid@uncg.edu.

 

Email Signature Tips

 

Placing the email signature graphic into your Google email is fairly easy but does require that you use a specific link.

Here is the process:

    1. Log in to your gmail account so that you can see your inbox.
    2. Click on the gear icon near the top right corner. Gear icon
    3. Choose settings from the pop-up window.
    4. Scroll down until you see the section titled “Signature:”
    5. Choose the Signature option and place your Name, Title, Department, Department Web Address into your signature.
    6. Place your pointer below your information and click to place a cursor where you want the graphic to be inserted.
    7. Click on the “Insert Image” button in the signature toolbar. Insert Image
    8. Choose the Web Address (URL) option and paste the following URL into the field- https://uncgcdn.blob.core.windows.net/email/UNCGLogo.png
    9. You should see the email signature populate the window.
    10. Click select.
    11. Scroll to the bottom of the settings page and click the Save Changes button that is right above the Google logo.

 

Web Guidelines

 

The components that form the requirements, guidelines and recommendations for creating websites at UNCG originate from two sources:

 

University Web Standards and Requirements are presently set and overseen by the Internet Oversight Committee (IOC). The IOC website outlines all unit website standards and required elements, web policies and initiatives, detailed technical information, instruction and downloads regarding the UNCG HTML templates and WordPress templates.

 

The UNCG Brand Guidelines were determined by the University Communications department. This group developed UNCG brand guidelines in conjunction with other University stakeholders with the goal of sharing a unified message and presenting a clear, compelling, unique identity within the UNC system and among the nation’s universities.

 

Getting Started with Web Design at UNCG

 

If you are just getting started with designing or developing websites at UNCG, below is an overview to help you create effective unit websites that adhere to all UNCG guidelines and recommendations.

 

Be aware that even if a unit website doesn’t live on an official UNCG server, it is still subject to, and should adhere to the UNCG Brand Guidelines. You can get oriented by starting with an overview of the UNCG web templates. There are three parts to a basic UNCG web template: the header, the body/content area and the footer. The body/content area is where a unit’s website content belongs.

 

Web Colors and Fonts

 

In-depth information about UNCG’s official colors and supporting color palettes and their use may be found on the University Colors page. Information on fonts and a Font Request form can be found on the University Fonts page. 

 

Sometimes text can be presented as a graphic when a non-system font is needed, but this should be done sparingly and with thought. When text is presented as a graphic — as in a header, for example — the text graphic should utilize the ALT text attribute with the text for that content and the graphic should be optimized to be as small as possible in file size to allow for faster page loading. Without the ALT text search engines will have no idea about the subject matter of the image and will not be able to index it. This could reduce your search engine optimization.

 

Web Color Pallete

 

 

UNCG Blue
PMS 2767 Coated
PMS 2757 Uncoated
CMYK Coated 100/89/41/43
CMYK Uncoated 100/70/0/40
RGB 15/32/68
HEX 0f2044
UNCG Gold
PMS 1235 Coated
PMS 1225 Uncoated
CMYK Coated 0/31/98/0
CMYK Uncoated 0/21/82/0
RGB 255/183/27
HEX ffb71b
UNCG Grey
PMS Cool Grey 6 Coated
PMS Cool Grey 6 Uncoated
CMYK Coated 0/0/0/29
CMYK Uncoated 0/0/0/26
RGB 190/192/194
HEX bec0c2

 

Supporting Colors

 

To provide flexibility while maintaining a consistent look across the  marketing and communication materials, the University maintains a palette of complementary, bold and neutral colors. The University’s supporting colors are to be used as design accent color options only.  Most work should heavily focus on and emphasize our primary colors, not our secondary ones.

 

Supporting color - Dark Grey
PMS 7543
CMYK Coated 19/9/8/22
CMYK Uncoated 29/13/13/2
RGB 166/176/183
HEX a6b0b7
Supporting color - Cool Grey
PMS Cool Gray 1
CMYK Coated 4/2/4/5
CMYK Uncoated 4/3/6/7
RGB 229/230/228
HEX e5e6e4
Supporting color - Dark Brown
PMS 7536
CMYK Coated 11/13/30/32
CMYK Uncoated 31/28/38/2
RGB 165/156/135
HEX a59c87
Supporting color - Light Brown
PMS 453
CMYK Coated 11/7/35/15
CMYK Uncoated 11/6/36/15
RGB 197/194/155
HEX c5c29b
Supporting color - Green
PMS 345
CMYK Coated 43/0/37/0
CMYK Uncoated 46/0/40/0
RGB 146/209/179
HEX 92d1b3
Supporting color - Blue Green
PMS 3258
CMYK Coated 63/0/30/0
CMYK Uncoated 65/4/36/2
RGB 79/194/191
HEX 00698c
Supporting color - Blue
PMS 634
CMYK Coated 100/13/10/41
CMYK Uncoated 100/12/14/31
RGB 01/105/140
HEX 00698c
Supporting color - Red
PMS 7427
CMYK Coated 8/100/70/33
CMYK Uncoated 7/87/61/20
RGB 160/12/48
HEX a00c30

Tips and Best Practices

 

Choose a sub-set of the supporting color palette and use it consistently for your unit’s communications — including your websites and other eCommunications. Using a limited palette will allow your unit’s communications to be recognized as originating from a single source while still adhering to the overall University brand standards.

 

Limit the use of your supporting color choices to a selection of two or three. Some combination of gold, blue and grey should always be used prominently to showcase your relationship to the greater University. Using too many additional colors can dilute your design and mask the primary University colors.

 

Keep the ratio of UNCG gold to no more than about 10 percent of your web design. 

 

The UNCG gold is a strong color and is most effectively used as an accent color, calling attention to specific elements in your design. Large areas of yellow can be overwhelming and even make readability difficult. Remember — a little goes a long way.

 

Web browsers use the fonts installed on a visitor’s computer, so a list of commonly installed, similar-looking fonts should be specified in a website’s CSS file in order for a website to display as it is designed. A font-family CSS statement should present fonts in order of preference.

 

Review your web code with a validation checker such as https://validator.w3.org/.

 

Use the href=”tel:…” tag for telephone numbers so that users can click-to-call. Best practice is to include the country code (01 for USA.)

 

Use ABBR tags to help explain abbreviations in your text. The <abbr> element is used along with a title attribute to associate a full-text explanation with an abbreviation or acronym. Website visitors do not see the text in the title attribute, but browsers, search engines, and assistive technologies do use this information.

 

Other Headings, Sub-Headings and Callouts

 

Georgia regular may also be used for headlines and Georgia regular, italic, bold or bold italic may be used for sub-headlines, headers, sub-headers and callouts. Because Georgia is a common system font, it is the preferred font for headlines, sub-headlines, headers, sub-headers and callouts. CSS font-family declaration for headlines and sub-headlines should be declared in the order as shown below. Georgia should always be the first font presented in this list. (font-family: Georgia, ‘Times New Roman’, sans-serif;)

 

Navigation

 

Navigation on websites and other electronic communications should be styled in the san-serif font Arial. (font-family: Arial, Helvetica, sans-serif;)

 

Sidebars

 

Sidebar headings and sub-headings should utilize the serif font, Georgia. All other text and/or navigation elements in a sidebar should be displayed in the san-serif font Arial, with Helvetica and sans-serif listed as secondary options: (font-family: Arial, Helvetica, sans-serif;)

 

Body copy

 

Body copy on websites and other electronic communications should be styled in the san-serif font Sofia Pro with Arial and Helvetica as substitute options. In most instances, body copy should be set as flush left. Font size for the content part of a web page is set at .75em in the UNCG global styles which will make content copy sized at 75 percent of the visitor’s default browser font size. The content copy line spacing (or line-height in CSS terminology) should be 1.7.

 

  • font-family: Arial, Helvetica, sans-serif;
  • font-size: .75em;
  • line-height: 1.7

 

In most cases, when web developers use the UNCG web assets including the global style sheet, body font styling should default to the above CSS. In situations where it is not possible to directly use the UNCG web assets, developers should approximate this font styling as closely as possible.

 

Accessibility

 

Readers may have difficulty when text, images and the background color are too close together in the color spectrum. The measure of this variation is contrast ratio. A good example of this is that you would not want to put navy blue text on a black background because there is not enough contrast ratio to allow good separation between the text and the background. It is best practice to ensure that text and backgrounds have a contrast ratio of 4.5:1 and there are tools on the web to help determine the contrast ratio.

 

Accessibility tests can be performed using tools such as webaim.org/wave and axe-core.org/.

 

Logo Use in Web and eMedia

Guidelines regarding UNCG logos and their use in various materials are available in detail in the University logos page of this brand guide. Members of the UNCG family — faculty, staff and students — who use our logos should familiarize themselves with the guidelines.

 

Units are encouraged to use either the primary University logo or unit logos in their eCommunication products and applications with the exception of UNCG websites (see below). Logo use is encouraged, but not required, on instructional materials.

 

Use of logos in websites

 

The primary UNCG logo is included in the top left corner of the web page header that is part of the UWSR. As a best practice, we recommend against repeating your unit logo in the body/content of your website. Follow the guidelines in the University logos page and do not modify the logo in any way without consultation with University Communications. Be especicially careful with responsive design layouts that adjust the screen layout based on the screen size. Test the common breakpoints to ensure the logo is not modified so that it is no longer compliant or removed.

 

UNCG web favicon

 

A favicon (or favorite icon) is a small icon or graphic that is placed in most browsers near the title of the web page at the top of the screen. Because of the small size of this graphic, usually less than 16 pixels, the only time that the letters “UNCG” may be removed from the Minerva shield in the University logo is for the UNCG favicon. Use of the UNCG favicon is strongly encouraged. If it is not used, no other favicon is allowed.

 

Place this icon in the root directory of your website. Many browsers will use this icon as a customization for the your address when users visit your pages. Also when users bookmark a page within your site, this icon will often be associated with the bookmark.

Download: favicon.ico

 

Presentation Templates

Students, faculty and  staff often use slide presentations on and off campus. Every speaking engagement is an opportunity to incorporate the University’s brand and your affiliation with UNC Greensboro. To maintain a consistent look for audiences, UNC Greensboro branded templates for PowerPoint and Google Slides are  available for presentation needs. Widescreen (16:9 aspect ratio) and standard screen (4:3 aspect ratio) formats of the presentation templates are provided. When a projection image is needed, a logo-only cover slide can be used from the slide layout options of the chosen template.

 

PowerPoint

 

Using the PowerPoint templates:
1. Determine whether you want to present in 16:9 (widescreen) or 4:3 (standard) format.
2. Download and save the appropriate template file (widescreen or standard) of the chosen template.
3. Open the downloaded template file in PowerPoint.
4. Save as a PowerPoint presentation (*.pptx), and then add your slides and content for your presentation.

 

Template Option 1: Logo Bottom Left with Navy or White Background
With this option the logo is in the bottom left. Slide layout choices include either a navy or white background, cover slides, and additional slides for a “Thank You” slide and a tagline slide.

 

UNCG Powerpoint logo bottom left

 

 

Template Option 2: Logo Top Left with Navy Top Bar
With this option the logo is in the top left over a narrow navy bar at the top and a white background. Slide layout choices include cover slides, and additional slides for a “Thank You” slide and a tagline slide.

UNCG Powerpoint logo top left

 

 

Google Slides Templates

 

As an alternative to Microsoft PowerPoint, UNCG faculty, staff and students can create Google presentations using their iSpartan account, using Google Slides.  Templates similar to those provided for PowerPoint Themes are available in the UNCG Templates Gallery.

 

How to use a UNCG Google Slides template in your iSpartan account:

 

  • Open Google Slides from any UNCG Google application. (You’ll find the icon if you click on the nine squares in the top right corner of the screen near your avatar.
  • If not logged in via single sign on then you should log in so that you will have access to the UNCG templates.
  • Once you’re on the Google Slides page you may see a template gallery just below the top of the page.
  • Clicking on “Template Gallery” will give you a tab labeled UNCG and you’ll find the new templates described above on that tab. There may be other templates in that gallery that have been added by other departments so be careful to choose the correct template.
  • File names are:
    uncg-ppt-tmpl-2018-standard43-logo-bl-horiz-v2 (blue background, standard screen)
    uncg-ppt-tmpl-2018-wide169-logo-bl-horiz-v2m (blue background, wide screen)
    uncg-ppt-tmpl-2018-standard43-logo-top-left-navy-bar_v2 (white background, navy stripe, standard screen)
    uncg-ppt-tmp-2018-wide169-log-top-left-navy-bar_v2 (white background, navy stripe, wide screen)
  • Chose the template you wish to use and the presentation will begin and you can add content and additional slides.

 

Alternative method:

 

You may not find the template gallery option open when you launch Google Slides. If not, follow this procedure.

 

  • Make sure that you’re logged in to your iSpartan account.
  • Hover over the red plus sign in the bottom right corner.
  • Move mouse up to hover over the blue circle that appears.
  • Click that blue circle to open the template gallery.
  • You should now see a tab labeled UNCG and you’ll find the new templates described above on that tab. There may be other templates in that gallery that have been added by other departments so be careful to choose the correct template.
  • File names are:
    uncg-ppt-tmpl-2018-standard43-logo-bl-horiz-v2 (blue background, standard screen)
    uncg-ppt-tmpl-2018-wide169-logo-bl-horiz-v2m (blue background, wide screen)
    uncg-ppt-tmpl-2018-standard43-logo-top-left-navy-bar_v2 (white background, navy stripe, standard screen)
    uncg-ppt-tmp-2018-wide169-log-top-left-navy-bar_v2 (white background, navy stripe, wide screen)
  • Chose the template you wish to use and the presentation will begin and you can add content and additional slides.
For a general introduction to Google Presentations, see Information Technology Services page for Google Presentations documentation or at 6-TECH Online.