Penn State Graphic Standards:
Why Are They Important on the
Web?
Jeff Hermann
University Editor and Director of University Publications
•
•
•
•
•
•
1. Review Web and related policies
2. The Penn State Mark
3. Standards
4. New psu.edu
5. Design vs. Usability
6. Basic design
Policies
AD-10 Publications and Identity Program
http://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
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
AD-10 continued
• Other symbols that represent the University
–
–
–
–
Intercollegiate Athletics logo
Pride of Lions logos
Mascot
Seal
AD-52 Links to or From Penn State Web Pages
http://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
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
AD-54 Web Page Design and Image
http://guru.psu.edu/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
Required Elements
Penn State Mark
in Top Left Area
• 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
Required Elements
Link to Penn State home
• Can be image map link on mark
• Can be text link (Penn State home)
Required Elements
Contact Information
• Email address of someone who can answer
questions about the unit.
– Can be the webmaster if they know who to
forward questions to.
Web Style Guide
• First attempt at consistency
• Will be revised
• Style Guide
– http://www.psu.edu/ur/webstyleguide/index.html
The Penn State Mark
Penn State Mark continued
• The University’s 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
Positive and Reverse
Signature Mark
Color of the Mark
• Any color so long as there is contrast
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 printready marks, templates, etc.
Standards Site
•
•
•
•
Web Style Guide
Identity Program
Image Bank
Publication Program
•
•
•
•
Advertising Program
Signage
Editorial Style Guide
Licensing
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
New Penn State Homepage
• Designed to be responsive to external
audience
• Portal will be primary internal access page
• New psu.edu demo
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
Basic Design Tips
• Use common user interfaces
• Watch out for textures and patterns in your
backgrounds
Design Tips cont.
• Scrolling is difficult for many users
• Avoid scrolling on home page
– View home page as the billboard for your site
– Don’t overload users with information
– Tell them who you are, why they want to be
there, and where to go
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
– Don’t optimize for reading—optimize for
searching and browsing
– If you have a lot to read on your site, make it
easy to print or download
Design Tips cont.
• Don’t design for your vice president or
executive—design for your users
• Don’t let the site structure mirror your
organization chart
• Do regular content checking—validate
links, current information, what’s new, etc.
Questions?
Contact me at:
jth3@psu.edu
or
814-863-1870