Penn State Graphic Standards:

Why Are They Important on the Web?

Jeff HermannUniversity 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

PoliciesAD-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 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

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 Imagehttp://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

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.

Required Elements

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 print-ready 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.eduor

814-863-1870