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 Web Assets page. Additional guidelines on how to apply the brand to your web content may be added as developed as the technology in this 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:

(click to download)

or

(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.

Open the gray bar template.

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

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

The filename will be Email Gray Bar Template.jpg.

Drag this into the email message.

Close drawing file.

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 from the choices below and paste it into the field.
   • Logo with “Find Your Way Here” tagline
     https://uncgcdn.blob.core.windows.net/email/UNCGLogoTagline.png
   • Wide format logo with “Find Your Way Here” tagline
     https://uncgcdn.blob.core.windows.net/email/wide_uncgreensboro_w_tag_signature.png
   • Logo without 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

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.

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/.

Abbreviations on webpages

Abbreviations on web pages can help convey a message quickly and efficiently. 

However, they can also be confusing, especially for first-time visitors who may not be familiar with your program. Additionally, abbreviations can cause confusion for visitors who have different accessibility needs and may be using adaptive technology. 

In consultation with Accessibility Resources at UNCG, the following guidelines should be followed to ensure online content is available to all users:

• Organizations, departments, programs, etc. should be spelled out on first reference. For example, the College of Arts and Sciences should be spelled out on first reference, and then CAS can be used on subsequent references if necessary. 

• Avoid less common techniques such as adding periods between letters or spelling phonetically, as these are not the generally accepted style and will probably be more confusing than helpful. 

• Keep your audience in mind. If there is a chance for confusion, take the time to provide clarification within the sentence or paragraph. Make sure to consider adaptive technology and test with screen readers and braille readers if possible. 

Copyright

The copyright in the footer of the webpage should be kept current to reflect the current year. This helps the reader know that the page has been updated and kept current.

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 Zip file (widescreen or standard) of the chosen template.
3. Unzip the downloaded Zip file and 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.

• PowerPoint Wide-screen (16:9 aspect ratio)
• PowerPoint Standard Screen (4:3 aspect ratio) link

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.

• PowerPoint Wide-screen (16:9 aspect ratio)
• PowerPoint Standard Screen (4:3 aspect ratio)

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 Slides, see this guide, “Google Slides training and help” at Google Support or contact UNCG 6-Tech at 6-TECH Online.