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

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 –SmokeyMonkeySmokeyMonkey

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: or