Brand & Visual Identity L o g o s • W e b s i t e s • A n t e a t e r s • To o l s s t u d e n t a f f a i r s . u c i . e d u /g r a p h i c s _ i d e n . p h p
September 2015
CONTENT
STUDENT AFFAIRS LOGOS . . . . . . . . . . . . . . . 3 WEBSITES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 COLORS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 ANTEATER GRAPHICS . . . . . . . . . . . . . . . . . . . 13 PHOTOGRAPHY . . . . . . . . . . . . . . . . . . . . . . . . 14 PRESENTATION SLIDES . . . . . . . . . . . . . . . . . . 15 RESOURCES & TOOLS . . . . . . . . . . . . . . . . . . . 17
UCI Student Affairs plays an integral role in supporting the University of California’s mission of teaching, research and public service. By supporting students’ physical and mental health through co-curricular programs and services, and by nurturing their personal development, students become prepared for leadership roles in a global society. Student Affairs embraces and is committed to diversity, equality and inclusion as essential ingredients of academic and character excellence. The Student Affairs brand is represented by its identity logo.
WHY BRAND WITH STUDENT AFFAIRS? . . . . . . . . . . . . . . . . . . . . . 18
Produced by Office of the Vice Chancellor, Student Affairs University of California, Irvine
The Student Affairs Brand
2
STUDENT AFFAIRS LOGOS Comprised of a stylized Anteater icon and the Student Affairs wordmark. For internal communications within the division, it’s acceptable to use just the Student Affairs primary logo. The Student Affairs primary logo can also be used if the UCI wordmark appears somewhere else within the communication, or if UCI is clearly articulated in the title of the printed piece. A variety of logos are available for download. If other configurations of the logo or additional templates are needed, please contact Student Affairs Communications. UCI Blue is the preferred color. Black or white should be used when greater contrast is needed or if blue clashes.
P R I M A RY LO G O
Anteater icon
Student Affairs wordmark
This is the preferred logo and should be used in website footers.
IMAGE FILES Colors:
UCI Blue, black, white
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
Download:
blue »
black »
white »
all »
The Student Affairs Brand
3
STUDENT AFFAIRS LOGOS C E N T E R S TA C K E D L O G O
For use in compositions with limited horizontal space or an abundance of graphics in a concentrated area, or in a vertical space.
IMAGE FILES Colors:
UCI Blue, black, white
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
Download:
blue »
black »
white »
all »
The Student Affairs Brand
4
STUDENT AFFAIRS LOGOS W I T H U C I WO R D M A R K • •
The Student Affairs logo with UCI wordmark is available in several configurations, colors and file types from the Student Affairs Brand & Visual Identity website. When creating communications directed to the campus, or that may include an external audience, the Student Affairs logo along with a UCI wordmark should appear within the communication. A combined mark may be used, or the individual logos may be placed independently as driven by the design and intention of the piece. STACKED LOGO COMBINED WITH UCI
ALTERNATE STACKED LOGO COMBINED WITH UCI
CENTER STACKED LOGO COMBINED WITH UCI
Most commonly used logo when the UCI wordmark or mention is not already present in a communication.
Used when UCI is the main focus of the communication and Student Affairs is the secondary sponsor or focus.
Additional configuration may be used as driven by the design of the communication.
IMAGE FILES
IMAGE FILES
IMAGE FILES
Colors:
UCI Blue, black, white
Colors:
UCI Blue, black, white
Colors:
UCI Blue, black, white
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
Download:
blue »
Download:
blue »
Download:
blue »
black »
white »
all »
black »
white »
all »
black »
white »
all »
The Student Affairs Brand
5
STUDENT AFFAIRS LOGOS B E ST P R AC T I C E S PRESENCE •
Include in digital, print, online and video projects created for Student Affairs.
•
In situations where a department or program has its own logo or graphic, the Student Affairs logo should also be included somewhere in the communication.
POSITION •
The Student Affairs logo and wordmarks should always stand apart from surrounding text, graphics, and other elements.
•
Always leave an equal area of clear space around the Student Affairs logo.
•
The standoff space should be equivalent to the height of the “u” in the logo (the “x-height”).
Example of clear space around logo. Note: dotted lines & u shape are meant as a guide and should not be used in actual designs.
COLOR The Student Affairs logo should appear in one of three colors:
UCI BLUE
BLACK
WHITE
White should only be used when the logo is placed on a dark background.
The Student Affairs Brand
6
STUDENT AFFAIRS LOGOS MANIPULATION • •
The Student Affairs logo should not be manipulated or altered. No component of the logo may appear at an angle, upside down, vertical or in any way other than horizontal. Horizontal alignment helps maintain the integrity of the Student Affairs brand.
TIP: Hold the shift key when resizing the Student Affairs logo to constrain proportions and prevent the logo from being distorted.
The Student Affairs logo should not be incorporated into the symbol of another department or program.
Only use the logo configurations provided on the Student Affairs Brand & Visual Identity website. If other versions are needed, please contact Student Affairs Communications.
Out with the old! The current UCI and Student Affairs logos should replace old logos whenever legacy communications are updated.
The Student Affairs Brand
7
STUDENT AFFAIRS LOGOS ADDITIONAL ELEMENTS
ANTEATER ICON
TABLE TENT NAME CARD
IMAGE FILES Colors:
UCI Blue, black, UCI Gold, white
File formats:
JPG, PNG, PDF, EPS, or all colors and file types in a zip file
Download:
blue »
black »
white »
yellow »
all »
TEMPLATE FILES File formats:
AI, DOCX
Download:
http://studentaffairs.uci.edu/resources/table-card-template.zip
THE N A M E OF YOUR COM M ITTEE HERE
FIRSTNAME LAST
DEPARTMENT
The Student Affairs Brand
8
WEBSITES Websites are among the most visible representations of UCI and of Student Affairs brands. A visual identity that is brand-consistent is quickly recognized and connects UCI and Student Affairs affiliates.
BANNERS
Website banners should be consistent with one of the following styles: • StudentAffairs.uci.edu • UCI.edu • news.uci.edu Additional examples: FreeSpeech.uci.edu, NewStudents.uci.edu, AntWeek.vcsa.uci.edu The ‘UCI’ area of banner wordmarks should hyperlink to to UCI’s home page, uci.edu. The unit or department name area should link to the site’s index or home page.
B O DY The design configuration of the body space between banner and footer is flexible. However the style should embrace UCI’s brand identity.
FOOTERS
In addition to items such as contact information which may be relevant to the site, Student Affairs unit footers should contain the following: • The Student Affairs wordmark, hyperlinked to StudentAffairs.uci.edu • © UC Regents • “A division of” may precede the wordmark if desired to provide clarity. See housing.uci.edu For UCI web templates, please contact UCI Strategic Communications 949-824-6922 For Student Affairs styles, please contact Student Affairs Communications.
The Student Affairs Brand
9
COLORS U C I P R I M A RY I D E N T I T Y CO LO R S The UCI Graphic Standards site provides a set of colors for various print and web applications. The official UCI Blue and UCI Gold are accompanied by a secondary color palette which allows for some color variation while staying loyal to the UC Irvine brand. Equivalent formulas for Pantone swatches, four-color and digital media are also noted on the UCI Graphic Standards site.
Resource: rgb.to/pantone
UCI Blue Pantone: 7685 CMYK: 93 62 9 1 RGB: 0 100 164 Web: #0064a4
Enter any color & receive color schemes and conversion values for RGB, hex, websafe, Pantone, cmyk and more.
UCI Gold Pantone: CMYK: RGB: Web:
109 1 16 100 0 255 210 0 #ffd200
U C I S E CO N DA RY CO LO R S
Pantone: 549 CMYK: 60 24 21 0 RGB: 106 162 184 Web: #6aa2b8
Pantone: 400 CMYK: 23 21 26 0 RGB: 197 190 181 Web: #c6beb5
Pantone: 654 CMYK: 100 84 31 17 RGB: 27 61 109 Web: #1b3d6d
Pantone: 715 CMYK: 0 54 93 0 RGB: 247 141 45 Web: #f78d2d
Pantone: 425 CMYK: 65 56 53 29 RGB: 85 87 89 Web: #555759
Pantone: 100 CMYK: 5 1 76 0 RGB: 247 235 95 Web: #f7eb5f
The Student Affairs Brand
10
COLORS U C P R I M A RY I D E N T I T Y CO LO R S The University of California Brand Guidelines site provides a comprehensive set of colors for UC campuses to use. A flexible, contemporary and extensive secondary color palette is also included; it provides a more robust palette for publications. More color choices, as well as equivalent formulas for Pantone swatches, four-color and digital media are noted on the University of California Brand Guidelines site.
Resource: rgb.to/pantone
UC Blue
Enter any color & receive color schemes and conversion values for RGB, hex, websafe, Pantone, cmyk and more.
UC Gold
Pantone: 299 C CMYK: 69 10 0 0 RGB: 18 149 216 Web: #1295d8
Pantone: CMYK: RGB: Web:
116 C 0 19 100 0 255 181 17 #ffb511
U C S E CO N DA RY CO LO R O P T I O N S
Pantone: 297 C CMYK: 49 1 0 0 RGB: 114 205 244 Web: #72cdf4
Pantone: 107 C CMYK: 0 2 79 0 RGB: 255 229 82 Web: #ffe552
Pantone: 109 C CMYK: 0 11 96 0 RGB: 255 210 0 Web: #ffd200
Pantone: 151 CMYK: 0 43 91 0 RGB: 255 143 40 Web: #ff8f28
Pantone: Rhodamine Red CMYK: 11 66 0 0 RGB: 228 76 154 Web: #e44c9A
Pantone: 302 CMYK: 100 25 0 50 RGB: 0 85 129 Web: #005581
Pantone: 3145 CMYK: 100 10 29 20 RGB: 0 119 139 Web: #00778b
Pantone: 425 CMYK: 25 18 15 51 RGB: 124 126 127 Web: #7c7e7f
Pantone: Warm Gray 3 CMYK: 8 9 11 20 RGB: 190 182 175 Web: #beb6af
Pantone: 872 CMYK: 0 21 60 30 RGB: 180 151 90 Web: #b4975a
The Student Affairs Brand
11
COLORS C O M B I N E D U C I & U C PA L E T T E This combination palette consists of colors from both the UCI and UC color options. The colors have been carefully selected to work together in publications along with the official UCI Blue and UCI Gold. Specific Pantone swatches, cmyk and web formulas for each color are available on the Student Affairs Brand & Visual Identity site.
Pantone: 172 C CMYK: 0 58 79 0 RGB: 255 110 27 Web: #FF6E1B
Pantone: 7467 C CMYK: 97 0 30 0 RGB: 0 163 173 Web: #00A3AD
Pantone: 425 C CMYK: 25 18 15 51 RGB: 124 126 127 Web: #7C7E7F
Pantone: 715 C CMYK: 0 54 93 0 RGB: 247 141 45 Web: #F78D2D
Pantone: 107 C CMYK: 0 2 79 0 RGB: 255 229 82 Web: #FFE552
Additional color palettes have been compiled to assist designers in creating cohesive publications. They are available on the Student Affairs Brand & Visual Identity site.
O N L I N E CO LO R R E S O U R C E S Adobe Color CC - mix and match your own color scheme color.adobe.com/create/color-wheel
HTML color codes & names www.computerhope.com/htmcolor.htm
Colour Lovers - collection of color palettes www.colourlovers.com/palettes
Color Schemer Gallery - collection of color palettes www.colorschemer.com/schemes
Color Blender - automatic palette generator colorblender.com
Color Hexa - the encyclopedia of color www.colorhexa.com
The Student Affairs Brand
12
ANTEATER GRAPHICS T R A D I T I O N A L A N T E AT E R S Many variations of Anteater graphics have been developed over UC Irvine’s history and may be used as design elements. A wide range of anteater graphics are available for downloading on the Student Affairs Brand & Visual Identity site.
Johnny Hartoriginal B.C. Anteater Johnny Hart’s B.C Anteater The original anteater created for UCI by Johnny Hart. Intended for communications pertaining to UCI’s heritage.
B.C. Anteater B.C. Anteater
Signage Anteater Anteater Signage
This classic anteater cartoon evokes the fun and spirit of UCI.
The standard anteater graphic provided for use on signs and posters. Variations are available facing both right and left.
M O R E A N T E AT E R S A diverse array of whimsical character anteaters are available for download on the Student Affairs Brand & Visual Identity site. Departments and student organizations are encouraged to create their own original anteater characters for unrestricted use in communications.
Student Affairs Communications Anteaters
Activities Anteaters
Bookstore Anteaters
The Student Affairs Brand
13
PHOTOGRAPHY Photography is an important part of UCI Student Affairs branding and represents the vibrant, inspired atmosphere of the campus.
PHOTOGRAPHIC STYLE UCI’s photo style strives to communicate the vitality and uniqueness that defines UCI and the UCI student experience: engaged, upbeat, bright and energized. From University of California Brand Guidelines, brand.universityofcalifornia.edu Photography provides not just a quick representation of life at the university, but serves as a powerful catalyst for a richer emotional attachment to the institution. UC’s photography shows the breadth of life in and around the university and its medical centers and labs. With an emphasis on “lightness,” UC’s photography reinforces the idea of “let there be light” with a modern edge. UC photography should seek the unexpected, and reveal the excitement and energy of discovery and transformation.
BEST PRACTICES •
Use bright, vibrant and unexpected images.
•
Include diversity across your photo selection.
•
Utilize image databases from UC, UCI and Student Affairs. Use of stock photos is discouraged.
•
Consider the composition of an image and crop or rotate to achieve a more dynamic final image.
•
Hold the shift key to maintain the perspective ratio of a scaled image.
•
Larger images have greater impact.
PHOTO RESOURCES • • • • •
Student Affairs Facebook page facebook.com/uciphotos UCI Image Archive images.communications.uci.edu UCI Flickr page flickr.com/photos/ucirvine UC Digital Image Repository ucop.webdamdb.com University of California Brand Guidelines brand.universityofcalifornia.edu/guidelines/photography.html
The Student Affairs Brand
14
PRESENTATION SLIDES T I P S & B E ST P R AC T I C E S From University of California Powerpoint Presentation Guidelines, brand.universityofcalifornia.edu/downloads/templates.html The strength of a presentation is in its content. Content should be maplike — clear, economical and undecorated. Color, text, information graphics and photography are tools to help make your point, not detract from it. All design choices should convey a fresh, contemporary feel and should represent UCI’s bright past and brilliant future.
KEEP IT SIMPLE • • • •
Easy to read, concise graphics will communicate your information effectively. Calling out information in a chart using a separate column can be useful. If you must include text on the same slide as an information graphic, keep it minimal. Extraneous effects such as 3-dimensionality, gradients and shadows add clutter.
EXAMPLES OF EFFECTIVE SLIDES
USE OF COLOR • • • • •
In general, stick to solids only (no gradients or textures). Use main colors for title or chapter opening slide backgrounds. Apply color in a consistent manner from slide to slide. Keep contrast and reproducibility in black and white in mind when applying color. Student Affairs presentation templates are pre-populated with a lively color palette which includes the UCI colors.
EXAMPLES OF LESS EFFECTIVE SLIDES
The Student Affairs Brand
15
PRESENTATION TEMPLATES GENERAL GUIDELINES University of California PowerPoint Presentation Guidelines » • • • • • • •
Limit the number of fonts used in a single presentation. Arial is a system font common to both Mac and PC and an excellent choice for its clear readability at varying sizes. Use really great photos – see Photography, p. 14. A collection of images are available for download on the Student Affairs Facebook page, UC WebDAM, and UCI Flickr sites. When choosing colors, keep in mind that slides may be printed in black & white. Slides are not the speaker’s speech; they should support the speaker’s points. Be mindful of how much content is included on each slide and try not to use more than three bullets per slide. Each template contains photo divider slides. They can help add vibrance to a presentation or to break up large bodies of text. You are encouraged to include the Student Affairs identity in your presentation. Student Affairs presentation templates are pre-populated with a vibrant color palette which includes UCI Blue and UCI Gold.
TEMPLATE WITH UCI EMPHASIS
TEMPLATE WITH STUDENT AFFAIRS EMPHASIS
• Primarily intended for off-campus audiences, this template includes the UCI logo and space for your department logo on the cover slide.
• Intended for on-campus audiences, this template includes the Student Affairs logo and space for your department logo on the cover slide.
• The closing slide should include the UCI Student Affairs logo.
• You are encouraged to include the Student Affairs identity in your presentation.
UCI emphasis PPT template » UCI emphasis Keynote template »
Student Affairs emphasis PPT template » Student Affairs emphasis Keynote template »
The Student Affairs Brand
16
RESOURCES & TOOLS S TA N D A R D S & G U I D E L I N E S UCI BRAND & VISUAL IDENTITY STANDARDS website »
UC BRAND GUIDELINES website »
UCI EDITORIAL STYLE GUIDE website »
WEB DESIGN
GRAPHIC DESIGN
A Book Apart - brief books for people who make websites abookapart.com
Keyboard Shortcuts for Special Characters www.nouilles.info/keyboard_shortcuts.html
The Missing Manual series - guides for building websites www.oreilly.com/missingmanuals
InDesign Secrets indesignsecrets.com
Web Accessibility in Mind - color contrast checker webaim.org/resources/contrastchecker
VecTips - Illustrator tips & tutorials vectips.com
HTML color codes + names www.computerhope.com/htmcolor.htm
FONTS
M O C K- U P S
What Font Is - font identification www.whatfontis.com
Place It - mock-ups and demo videos placeit.net
Dafont - extensive collection of free fonts www.dafont.com
PSD Covers - PSD image templates www.psdcovers.com Mockup World - all free mock-ups www.mockupworld.co Fillerati - filler text alternative to lorem ipsum www.fillerati.com
The Student Affairs Brand
17
WHY BRAND WITH STUDENT AFFAIRS? With 32 departments, 1,100 staff members and 2,200 student employees, Student Affairs enriches the UCI experience for more than 30,750 students with outreach and retention to graduation and beyond. The Student Affairs logo symbolizes the division, representing who we are and what we do. Designing communications in a careful and consistent manner to include the logo ensures instant identification with the Student Affairs brand and serves to further the identity and recognition of Student Affairs.
‘Start with WHY in everything you do.’ – Simon Sinek Why - This is the core belief of the department. It’s why the unit exists. How - This is how the unit fulfills that core belief. What - This is what the department does to fulfill that core belief. Simon Sinek TED Talk » Start With Why website »
The Student Affairs Brand
18
StudentAffairs.uci.edu