1 / 27

Penn State Graphic Standards:

Understand why adhering to Penn State's graphic standards is crucial for web design. Learn about the Penn State mark, identity program, design vs. usability, and essential design policies. Follow guidelines provided to maintain consistency and enhance user experience. Explore resources for creating visually cohesive and user-friendly web pages.

bmayfield
Télécharger la présentation

Penn State Graphic Standards:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. PoliciesAD-10 Publications and Identity Programhttp://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 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

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

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

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

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

  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. Web Style Guide Identity Program Image Bank Publication Program Advertising Program Signage Editorial Style Guide Licensing Standards Site

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

  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.eduor814-863-1870

More Related