Penn State Graphic Standards:

1
Penn State Graphic Standards

• Why Are They Important on the Web

Jeff Hermann University Editor and Director of
University Publications
2

• 1. Review Web and related policies
• 2. The Penn State Mark
• 3. Standards
• 4. New psu.edu
• 5. Design vs. Usability
• 6. Basic design

3
PoliciesAD-10 Publications and Identity
Programhttp//guru.psu.edu/policies/AD10.html

• Identity program is the management of the symbols
  that represent the University.
• Establishes the Penn State mark as the official
  symbol of the University

4
AD-10 continued

• No unit of the University may have their own logo
• Certain exceptions are made by the University
  Editor and Director of Publications

5
AD-10 continued

• Other symbols that represent the University
• Intercollegiate Athletics logo
• Pride of Lions logos
• Mascot
• Seal

6
AD-52 Links to or From Penn State Web
Pageshttp//guru.psu.edu/policies/AD52.html

• In general no company can place a Penn State
  link on their web page.
• Exceptions granted by VP University Relations
• Sometimes for a company that is recruiting grads
• Sometimes for special recognition of corporation
  gift or donation etc.
• Other universities and colleges

7
AD-52 continued

• Links from Penn State web pages to commercial
  sites are limited
• Direct connection to function of University
• Government or other educational sites
• Blanket exemptions list in GURU policy
• Other exemptions must be made by VP University
  Relations

8
AD-54 Web Page Design and Imagehttp//guru.psu.ed
u/policies/AD54.html

• Required elements for all Penn State pages
• Penn State Mark in top left area
• Link to Penn State home (psu.edu)
• Contact information
• Oversight of design and guidelines by University
  Publications

9
Penn State Mark in Top Left Area
Required Elements

• Use the mark large enough to clearly identify
  Penn State
• Good example
• Example two
• The recommended position for the mark is in the
  upper left corner of the page
• New Kensington

10
Link to Penn State home
Required Elements

• Can be image map link on mark
• Can be text link (Penn State home)

11
Contact Information
Required Elements

• Email address of someone who can answer questions
  about the unit.
• Can be the webmaster if they know who to forward
  questions to.

12
Web Style Guide

• First attempt at consistency
• Will be revised
• Style Guide
• http//www.psu.edu/ur/webstyleguide/index.html

13
The Penn State Mark
14
Penn State Mark continued

• The Universitys corporate logo
• The ONLY official logo for general use
• The brand symbol
• Research shows wide recognition of the Penn State
  brand name.
• 49 for Penn State to 8 closest Pittsburgh and
  6 U of Penn

15
Positive and Reverse
16
Signature Mark
17
Color of the Mark

• Any color so long as there is contrast

18
New Standards Site

• Compile all visual and editorial information in
  to one place
• Include rules for use of all Penn State symbols
  previously in print
• Have image bank with web and print-ready marks
  templates etc.

19
Standards Site

• Web Style Guide
• Identity Program
• Image Bank
• Publication Program

• Advertising Program
• Signage
• Editorial Style Guide
• Licensing

20
Additional Web Standards

• Mark in various sizes and colors not very
  efficient at identifying Penn State
• Links not consistent across the University
• What if there were
• Consistent headers
• Templates to choose from

21
New Penn State Homepage

• Designed to be responsive to external audience
• Portal will be primary internal access page
• New psu.edu demo

22
Design vs Usability

• Not an either or
• Good designers are those that communicate
• Some flashy designs may be closer to fine art
  than graphic design
• SmokeyMonkey

23
Basic Design Tips

• Use common user interfaces
• Watch out for textures and patterns in your
  backgrounds

24
Design Tips cont.

• Scrolling is difficult for many users
• Avoid scrolling on home page
• View home page as the billboard for your site
• Dont overload users with information
• Tell them who you are why they want to be there
  and where to go

25
Design Tips cont.

• Design for appropriate user tasks
• Remember
• Reading on a computer monitor is 25 slower than
  on paper
• User goal is to find information faster but read
  less
• Dont optimize for readingoptimize for searching
  and browsing
• If you have a lot to read on your site make it
  easy to print or download

26
Design Tips cont.

• Dont design for your vice president or
  executivedesign for your users
• Dont let the site structure mirror your
  organization chart
• Do regular content checkingvalidate links
  current information whats new etc.

27
QuestionsContact me atjth3_at_psu.eduor814-863
-1870