Penn State Graphic Standards Why Are They Important

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/AD 10. 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/AD 52. 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/AD 54. 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 – Smokey. Monkey

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: jth 3@psu. edu or 814 -863 -1870