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

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

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

9. 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

10. Link to Penn State home Can be image map link on mark Can be text link (Penn State home) Required Elements

11. 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

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

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

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 –Don’t 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 –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

26. 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.

27. Questions? Contact me at: jth3@psu.edu or 814-863-1870