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 Header Templates

When sending an email to UNCG employees and/or students, please use one of the following email header templates:

For Your Information email header

(click to download)

or

Action Required email header

(click to download)

As indicated in the design, each email header template has a specific use. To communicate to UNCG employees and students, please use the same direct language in the subject line. For example, emails that require action should include the subject line “Action Required: Update your benefits,” and use the corresponding email header template.

These email header templates are for your use within your unit. Please note that HR, ITS, The Provost Office, and the University Communications Office (on behalf of the chancellor) have the ability to send email campus-wide. Student Affairs has the authority to send to all students.

Please note UNCG credentials are required to access the email header templates.

Customizing Email Header Templates

Download preferred banner from the link above.

Drag the banner into your Google mail message.

Email header template

Open the gray bar template.

Gray bar template

Insert your cursor into the gray bar and replace the text.

When completed, tap or click File/Download as/Jpeg

Saving the file graphic

The filename will be Email Gray Bar Template.jpg.

Drag this into the email message.

Close drawing file.

Final header with gray bar

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. 
  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. 
  8. Choose the Web Address (URL) option and paste the following URL into the field if you want the logo with the University tagline “Find Your Way Here”  https://uncgcdn.blob.core.windows.net/email/UNCGLogoTagline.png or paste the following URL if you want the University logo without the tagline https://uncgcdn.blob.core.windows.net/email/UNCGLogo.png
  9. Click select.
  10. 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 4fc2bf

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

Navigation

Navigation on websites and other electronic communications should be styled in all upper case Sofia Pro with Arial as a substitute. (font-family: Sofia Pro, Arial, sans-serif;)

Sidebars

Sidebar headings and sub-headings should utilize Sofia Pro. All other text and/or navigation elements in a sidebar should be displayed in the Sofia Pro in appropriate case, with Arial as a secondary option: (font-family: Sofia Pro, Arial, sans-serif;)

Body copy

Body copy on websites and other electronic communications should be styled in the san-serif font Sofia Pro with Arial as a substitute option. 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: Sofia Pro, Arial, 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 especially 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.