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.
- Color Options for the Visual Identifier
- Minimum Size
- Incorrect Applications of the Visual Identifier
- Basic Principles Regarding Use of Color
- Primary Palette: Two Blues
- Secondary Palette: Warm Complementary Colors
- Key Messages
- Messaging on Flickr
- Messaging on YouTube
- Channel Landing Page
- Individual Video Pages
- Visual Identifiers on Social Media Pages
- Image sizes for Facebook
- Image size for Twitter
- Image size for YouTube
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.
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.
The minimum width of the visual identifier is 35 pixels in online applications. See page 7 of the Brand Manual.
See page 8 of the Brand Manual for examples of correct and incorrect uses of the visual identifier.
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.
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 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.
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.
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.
UMass Boston Blue is a match to 7462C in the Pantone Matching System (PMS) and HEX: #005A8B.
A second blue is UMass Boston Light Blue (matching PMS 291C and HEX: #A0CFEB), which is used on the “sail” which you see in the banners at the top of our web pages. See page 12 of the Brand Manual.
The secondary palette is deliberately limited to five hues that complement the primary palette: UMass Boston Red (matching PMS 1675C and HEX: #DA33F1F), UMass Orange (PMS 1385C and HEX: #D47600), UMass Boston Gold (PMS 1245C and HEX: #C59217), UMass Beige (PMS 7503C and HEX: #A79E70), and UMass Warm Gray (PMS Warm Gray 7C and HEX: #988F86.) 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.
On the University of Massachusetts Boston website, the following fonts and colors are used: (Note: If two fonts are mentioned, the first is the preferred font)
Header text (University of Massachusetts Boston): bold 2.5em Arial in white (color: #FFFFFF)
First subhead (Faculty & Staff—Giving): 20px Arial in UMass Boston Light Blue (color: #A0CFEB)
Second subhead (The University—In the Community): bold 1.5em/17px Arial in white (color: #FFFFFF)
Footer text: 17px Arial,Helvetica,sans-serif in UMass Boston Light Blue (color: #A0CFEB)
Section Titles: bold 2.7em/28px Arial (color: #D9785B)
Page Titles (Heading 1): 1.79em/28px Georgia,Times,sans-serif in UMass Orange (color: #D47600)
Heading 2: 1.43em/24px Georgia,Times,serif (color: #054669);
Heading 3: bold 1.29em/22px Arial,Helvetica,sans-serif in UMass Warm Gray (color: #988F86)
Heading 4: 1em/20px Georgia in UMass Gold (color: #C59217)
Heading 5: italic 1em/20px Georgia (color: #3A3A3A)
“Normal” font: 1.4em/20px Georgia,Times,sans-serif (color: #3A3A3A)
Links are denoted with UMass Boston Blue (color: #005A8B).
For tables, the following colors are acceptable:
- For headings (row/column/both): color: #054669;
- Every other row should be in the following color: #3A3A3A
No other colors are acceptable.
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.
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.
- 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 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.
All videos that appear on the university website, and that promote university events and programs, must be properly branded.
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.
All university videos should use a branded copyright page. A template is available upon request and at the Digital Learning Studio.
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.
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.
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 firstname.lastname@example.org.
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.
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.
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.
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.
- 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.”
Make sure to check "allow comments with approval only."
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.
- 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:
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.
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.
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.
Profile pictures for Twitter need to be 128x128 pixels, or they will be cut off.
Sized versions of the UMass Boston logo in approved colors are available here. (Right click on the image, click on "Save image as," save the image to a folder or your desktop, and then upload to Twitter.)
For help finding and sizing branded images, and creating a custom branded background, fill out a Web Services Request.
The “avatar” on YouTube needs to be 150x150 pixels or the image will be cut off.
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 YouTube.)
You can change the avatar by clicking on “Settings,” and then looking under the “Appearance” tab.
IT Web Services has created a background that is in the UMass Boston colors. This template is available here:
You will want to set it to “Repeat Horizontally and Vertically” so that the stripe creates an infinite, seamless background pattern.
For help finding and sizing branded avatars and creating a custom branded background, fill out a Web Services Request.
Last Updated: July 18, 2012