UMass Boston News

UMass Boston Web Brand Manual

The UMass Boston Brand Manual for the Web should be considered a companion piece to the 2009 UMass Boston Brand Manual. It contains information on photography guidelines, social media branding, as well as acceptable colors and fonts for online applications.

The UMass Boston Visual Identifier

Other Visual Identifiers

The Type Palette

The Color Palette

Type Styles

The Sail Motif

Photographic Style

Videos

Social Media

Editorial Style

The UMass Boston Visual Identifier

The UMass Boston visual identifier is the only visual identifier that should appear in most UMass Boston communications. See page 6 of the Brand Manual.

Color Options for the Visual Identifier

The preferred color of the visual identifier is UMass Boston Blue, which matches PMS 7462C. The visual identifier may also be reversed out white from a solid color (preferably UMass Boston Blue), and it also may be rendered in black when black is the only option. The UMass Boston identifier should not be rendered in any other colors. See page 7 of the Brand Manual.

Minimum Size

The minimum width of the visual identifier is 35 pixels in online applications. See page 7 of the Brand Manual.

Incorrect Applications of the Visual Identifier

See page 8 of the Brand Manual for examples of correct and incorrect uses of the visual identifier.

Other Visual Identifiers

Identifiers for Individual University Units

When the UMass Boston visual identifier appears in communications of all kinds, its appearance will tend to connect the university’s achievements in people’s minds. The success of one UMass Boston activity – when the audience knows that it’s a UMass Boston activity – will make that audience all the more receptive to other, similarly identified UMass Boston activities; and repeated associations will eventually build a powerful idea of UMass Boston that serves every part of the university well.

As a rule, no organization that is fully an element of the university may use a visual identifier other than the UMass Boston visual identifier in external communications, including the website and social media platforms. Visual identifiers of student organizations are exceptions to this rule. So are those of the UMass Boston Athletics Department, GoKids Boston, IDEAS Boston, and WUMB Radio.

Partnering with Off-campus Organizations

Where an organization is affiliated equally with UMass Boston and an outside organization or organizations, the UMass Boston visual identifier should be given equal standing with the identifier(s) of the outside organization(s). This rule also applies to communications for projects that are equally sponsored by UMass Boston organizations and other organizations. If the visual identifier of a supporter of a project undertaken by a UMass Boston group should appear in a communication as an acknowledgement of support, the UMass Boston visual identifier should be given greater prominence. If the UMass Boston identifier must appear in a single area, such as a web page, the UMass Boston identifier should be separated from any others and treated in a way that clearly indicates that UMass Boston is the source of the communication.

The Type Palette

The specific typefaces selected for written communications are a subtle but effective way to communicate our visual identity and personality. See page 10 of the Brand Manual.

Fonts for Online Applications

UMass Boston realizes that in the case of some social media, like Facebook and Twitter, it may be impossible to use other fonts, but if given the option you should use Arial and Arial Bold font for headlines, and Georgia for longer text. See page 11 of the Brand Manual. Sizes below are in pixels, for base reference. Relative units of measure, such as ems, are encouraged.

Web CSS

Below is a general overview of fonts, basic colors, and styles used on the University of Massachusetts Boston website. Please see page 12 of the Brand Manual. and/or the source code and CSS for details. For web style assistance, please fill out a web request form to contact one of our web designers.

Download the UMass Boston logo bundle here: 2 EPS files, 2 JPEG files (blue and black), 1 PNG file. For designers, we provide a Photoshop layered file (logo in vector format and fully scalable)

The Color Palette

Basic Principles Regarding Use of Color

Color is an extremely important component of the UMass Boston visual identity. The most successful and memorable visual identity systems use color consistently – and even relentlessly – to “own” one color in their market. Think of IBM blue, UPS brown, and Nickelodeon orange. Among the Ivies, Harvard is crimson, Yale is blue, Dartmouth green, and Princeton orange. Among the public universities in our region, UMass Boston is blue.

Secondary colors are not used in this system to signal sub-brands (e.g., one secondary color for the College of Liberal Arts, another secondary color for the College of Management, etc.) or for any other semantic reason. To use colors this way would dilute the identity of UMass Boston overall. The secondary colors should be used only as an element to provide visual contrast or to harmonize with a dominant color photograph. There are no “rules” for the use of the secondary colors, except that they should never be used in a way that dilutes the overall effort to establish blue as the color of UMass Boston. See page 12 of the Brand Manual.

Primary Palette: Two Blues

UMass Boston Blue is a match to 7462 C
A second blue is UMass Boston Light Blue, matching PMS 291 C  
See page 12 of the
Brand Manual.

UMass Boston Blue
HEX: #005A8B
Pantone: 7462  C
R:0  G:90 B:39
C: 100 M: 45 Y:6  K:27 (coated)
umass blue

UMass Boston Light Blue
HEX: #A0CFEB
Pantone: 291 C
R:160 G:207 :B:235
C:36 M:3 Y:0 K:0
umass light blue

Secondary Palette: Warm Complementary Colors

The secondary palette is deliberately limited to five hues that complement the primary palette: UMass Boston Red,  UMass Orange, UMass Boston Gold,   UMass Beige  and UMass Warm Gray. The colors in the secondary palette are all warm and somewhat earthy, to contrast with the cool colors in the primary palette. They should be applied sparingly and never should upstage or confuse the audience about the dominant color of the UMass Boston brand – blue. See page 12 of the Brand Manual.

UMass Boston Red
HEX: #A33F1F
Pantone: 1675 C
R:163 G:63 B:31  
umass red

UMass Orange
HEX: #D47600
Pantone: 1385 C 
R:212 G:118 B:0
Umass Orange

UMass Boston Gold
HEX: #C59217
Pantone: 1245 C  
R:197 G:146 B:23
Umass Gold

UMass Beige
HEX: #A79E70 
Pantone: 7503 C   
R:167 G:158 B:112
Umass beige

UMass Warm Gray
HEX: #988F86
Pantone: Warm Gray 7 C  
R:152 G:143 B:134
Umass warm gray

Type Styles

Paragraph:
font=14px, line spacing=20px, Georgia, alternate gray,  #3A3A3A 

paragraph style

Links

Link: #005A8B
Hover: #00334e

Headlines

Headline 1 (PageTitle):
25px Georgia, UMass Orange, #D47600
heading 1

Headline 2:
20px Georgia, Alternate Blue,  #054669 
heading 2

Headline 3:
18px Arial bold,  UMass Warm Gray, #988F86 
heading 3

Headline 4: 
14px Georgia, UMass Gold, #C59217
heading 4

Headline 5:
14px Georgia italic, alternate gray, #3A3A3A
heading 5

Lists

Use this arrow below as the bullet:

Blue arrow


Tables

Table Header
12px arial bold, 054669;
background: #DDEDF7;

Alternate rows with white border at bottom:
background: #F8F8F8;
background: #E5E6E6;
11px arial.  #3A3A3A;

table styles


Header Title Text:  
30px Arial bold, white
header title style


Navigation
First Row:
12px Arial bold, light blue: #A0CFEB
sub nav style


Second Row:
15px Arial bold, white
sub nav style


Footer Navigation Left:
12px Arial light blue: #A0CFEB
footer style

 

 

No other colors are acceptable.

The Sail Motif

The sail motif is a graphic element that is used to give a distinctive and appropriate visual style to UMass Boston communications. The concept is a sweeping curvilinear form that is always positioned on the right edge and that bleeds off the bottom, right edge, and top of the space. It symbolizes the distinctive location of the UMass Boston campus on Boston Harbor, and the upward sweep connotes growth and upward movement. It is rendered in UMass Boston Blue and the gradient of UMass Boston Blue and Light Blue. See page 18 of the Brand Manual. On www.umb.edu, it is used in front of the single photo used in the Centers & Institutes template.

footer graphic

Photographic Style

Photography that meets a high professional standard will play a critical role in creating a positive image of UMass Boston. Photography is a tool we use not merely to communicate information, but also to create an emotional connection with our audience. The photographic images used on the website should inspire prospective students and faculty and make a connection with the people and activities depicted and they should make alumni feel proud of their connection with UMass Boston. To achieve these goals, when posting photos on www.umb.edu, avoid photos that are obviously posed or staged and select primarily documentary-style photography that captures the authentic and vibrant interactions among students and among students and faculty.

Some guidelines:

  • Use photography primarily to capture the tone of human interactions and a feeling of place, rather than using it literally to illustrate specific places or facilities. If it is important to include a photograph of an electron microscope, for example, it is more effective to show a dynamic close-up of a student using the microscope than it is to show every detail of the equipment.
  • Use larger images for increased impact and drama. Using many small photos on a page does not communicate effectively, so don’t use a composite of images or heavily manipulated images that look like a montage in one photo area. The web banner utilized in the Centers & Institutes template is a montage by nature but there should only be a single photo behind the transparent sail shapes.
  • Use landscape and architectural photography as a way to communicate the distinctive campus environment. Look outward toward the harbor rather than back toward the campus.
  • Obviously, it will be important to show a range of genders, ethnic backgrounds, races, ages, etc., but try to avoid artificial-looking situations that are obviously trying to communicate diversity. See pages 19 and 20 of the Brand Manual for examples of recommended and not recommended images.

Don’t feel as if you have to have a photo on every page of your website. Use photography if it makes an editorial point. Photography should not be merely decorative or just a bunch of images – even if they are appealing images. Think hard about how your audience will perceive the specific photos you choose, making sure that they align with your overall goals and that they are being perceived as you intend.

It is also important to keep photos under 50KB to allow for quicker page load times.

Videos

Videos are an important component of telling the UMass Boston story, and like other materials that tell our stories – brochures, handbooks, web pages, etc. – they need to adhere to university brand standards and be consistent in style, tone, and message.

Everyone involved in the creation of a video that is going to be posted on umb.edu or the UMass Boston YouTube channel needs to first go through a Video Production Workshop. This workshop will take 90 minutes, and will cover everything from storytelling to video concepts to editing techniques. Contact Jessica Downa in the Digital Learning Studio to set up your training.

Branding

All videos that appear on the university website, and that promote university events and programs, must be properly branded.

Title Page

Videos of university events should feature a title page featuring the sail motif and the date of the event. This template is available upon request.

A marketing/promotional video should include a title page appropriate for its audience and subject matter. It should include at the very least, a title, the university’s name, and our logo.

IT Web Services, in conjunction with Creative Services and the Office of Communications, has developed a branded animated opening sequence compatible with iMovie, Premiere, and Final Cut. The final graphic in this opening sequence is a title page featuring the sail motif and the date of the event. It is highly recommended that you use this template, which is available upon request and at the Digital Learning Studio.

Copyright Page (Closing Graphic)

All university videos should use a branded copyright page. A template is available upon request and at the Digital Learning Studio.

Identifiers

Logo

If you are using the university’s logo in your video, the logo cannot be stretched in any way, and the colors cannot be changed. See: The UMass Boston Brand Identifier.

Font

If you use a lower third (aka super/chyron) to identify University of Massachusetts Boston personnel, when possible, you should use Arial Bold on line 1 and Arial Regular on lines 2 and 3 (if applicable.) Templates using this font and the university’s logo and colors are available upon request and at the Digital Learning Studio.

Social Media

Goals

Before creating a social media account, think about what you hope to accomplish. Do you hope to increase enrollment or funding dollars? Do you hope to drive traffic to your website? Do you want a tool to directly interface with users? What actions do you want your visitors to take? How are you measuring results? Facebook, Flickr, Wordpress, and YouTube have analytical tools built into the account, where you can keep track of new “fans,” “likes,” and “views.” Submit a Web Services Request for help utilizing these analytical tools to meet your goals. For help creating a blog on the UMass Boston Blogs Network, email blog.admin@umb.edu.

Administration

When creating a shared Facebook, Flickr, Twitter, or YouTube account, please make sure that at least two people have access to the account. In the case of the latter, this will mean creating a shared password. In the case of Facebook, you should make more than one person an administrator, so if they leave the university, someone can still keep the account up and running. It can be very difficult to shut down an account that is no longer active.

Branding

Maintaining the university’s brand and your individual unit’s brand doesn’t end with printed materials and your website. For many, your social media sites will be the first introduction to your program. Therefore, consistency in written and visual messaging is key.

Links

When creating a blog, Facebook account, Flickr account, Twitter account, or YouTube channel for a university department, college, or center, it is important to tie this account back to your department, college, or center and to the University of Massachusetts Boston, both to give the web visitor a sense of place and to drive traffic back to your website. Keep in mind that some people may find this page via searching and therefore this page may be their first introduction to your program. Therefore, you want to give them a chance to find out more about what you do.

Include web links back to your department, college, or center and to the university’s homepage, www.umb.edu. Make sure that if you are referring to the university, you use the appropriate name – UMass Boston or the University of Massachusetts Boston. See: What Not to Call the institution We Work For.

Key Messages

Social media accounts can be excellent marketing tools, so think about areas where you can convey key messages.

  • On Facebook, you can do this in the “Info” and “About” sections.
  • On Flickr, you can do this in the description of both the “collection” and “set.”
  • On Twitter, you can do this in the “Bio” section of the “Profile.”
  • On Wordpress, or another blog, you can do this on an “About” page.
  • On YouTube, you can do this in the “About” section.

Messaging on Flickr

  • Use “sets” to further divide “collections.” Each collection and set should include descriptions about your program/center. Include links back to your program/center.
  • Change the title of each photo to something descriptive. Don’t just leave the description as DSC_3232. When creating a university-related Flickr collection or set, use “UMass Boston” in the title, or at least the description.
  • You can use a generic description for each photo, or, if you know the people in the photo, identify them. Taken as a whole, the descriptions should include the use of both “UMass Boston” and “University of Massachusetts Boston” for search purposes.
  • Make sure you use “UMass Boston” and “University of Massachusetts Boston” as keywords. Other good keywords to include “urban university,” “research university,” and “Boston.”

Messaging on YouTube

Settings

Make sure to check "allow comments with approval only."

Channel Landing Page
  • About: You should write a description about your center/group on your YouTube landing page, mentioning the full name of the group and the connection to UMass Boston, in the “About” section. Note that after 246 characters (including spaces) you have to click “more” to read more. As most people won’t take the effort to read more, you should get your most important information up top.

  • Links: Include links to your center/group, as well as UMass Boston.
Individual Video Pages
  • Title: For the title, you want to come up with something that best describes the content of the video. If you have any VIPs in your video, you might want to work their names into the title. Example: President Barack Obama Visits UMass Boston. You want to get the most important information at the beginning as when in list view, the title cuts off after 52 characters (including spaces.)
  • Description: Include the name of your center/group and UMass Boston (or the University of Massachusetts Boston) in your description, and include links back to a specific page correlating with the video, or your website in general. Keep in mind that some people may find this video via searching and this page may be their first introduction to you. Therefore, you want to give them a chance to find out more about you. Note: Only the first 210 characters (including spaces) will show – you have to click “show more” to see the rest, so make sure the most important stuff is up top.
  • Category: Use “Education.”
  • Keywords: Make sure to include words from the title in your keywords. Start the keywords paragraph with this: "umass boston" "public university" "urban university" "research university" "teaching university" and then the words that are relevant to your video such as the topics covered and the names of people featured. You need to make sure that you put quote marks around words that go together, or you end up with something like this:

Screen capture showing Natalia is separate from Bouyea under the Tags heading

 


Visual Identifiers on Social Media Pages

Photos

When possible, try to follow the photography guidelines above. See: Photography Style. It is recommended that, if possible, blogs and Facebook pages try to incorporate the look of the department banners on umb.edu or appropriate print marketing materials. See: Branding Photo for Department Landing Pages. Don’t use copyrighted photos.

Logo

If using the university’s logo, make sure you are using the current logo. Don’t distort it in any way. See: The UMass Boston Brand Identifier. Each social media site can accommodate certain sizes before the logos/photos cut off. Because web visitors will associate your logo or identifier with you, you don’t want to only convey a portion of your message when it appears in news feeds and on wall posts. See: Image sizes for Facebook, Image size for Twitter, and Image size for YouTube.

Font

If adding text to an image, you need to use the approved fonts. See: Fonts for Online Applications. If you need help adding text to an image using approved fonts, fill out a Web Services Request.

Image Sizes for Facebook

All Facebook accounts converted to the new Timeline look on March 30, 2012, meaning Facebook now showcases logos/photos in the following sizes:

Profile picture for Timeline pages: The profile picture you upload must be 180x180 pixels. Because Facebook will scale these pictures down to 32x32 pixels for your wall posts, it is extremely important to choose a picture that can be scaled down as the profile pictures that are displayed on timeline posts are really small. The best practice is to choose the UMass Boston logo, available in the approved colors here. (Right click on the image, click on "Save image as," save the image to a folder or your desktop, and then upload to Facebook.)

Big picture for Timeline: This is the big picture (also known as cover photo) for Facebook’s timeline. It is recommended that, if possible, you use the same photo being used for your college/department/center’s banner on umb.edu.


Width: 851px, 
Height: 315px

For help finding and sizing branded images, fill out a Web Services Request.

Image Size for Twitter

Profile pictures for Twitter need to be 400x400 pixels, or they will be cut off. Banner images for Twitter need to be 1500 x 500 pixels.

Sized versions of the UMass Boston logo in approved colors are available here, click on the links below:

For help finding and sizing branded images, and creating a custom branded background, fill out a Web Services Request.

Image Size for YouTube

The “avatar” on YouTube needs to be 800x 800 pixels or the image will be cut off.

The best practice is to choose the UMass Boston logo, in approved colors are available here, click on the links below:

You can change the avatar by clicking on “Settings,” and then looking under the “Appearance” tab.

YouTube banner size is 2450x1440 pixels which covers all possible display devices. It is important to work with a designer so that your image fits into the suggested guidelines for display on different devices.

Background

IT Web Services has created a background that is in the UMass Boston colors. This template is available here:

Striple in UMass Boston blue

You will want to set it to “Repeat Horizontally and Vertically” so that the stripe creates an infinite, seamless background pattern.

Screen capture showing YouTube menu under
 

 

For help finding and sizing branded avatars and creating a custom branded background, fill out a Web Services Request.

 

 

 

 

Last Updated: October 25, 2013