Penn State Graphic Standards: Why Are They Important on the Web? Jeff Hermann University Editor and Director of University Publications.

Slides:



Advertisements
Similar presentations
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Advertisements

Homepage Design Audience Satisfaction Survey. Survey Goal: The new website design should invoke an aesthetic emotional response with our audience. The.
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Introduction to Online Data Collection (OLDC) Community Based Abstinence Education September, 2009.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Usability Information Systems 337 Prof. Harry Plantinga.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
CiDA E-portfolio.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Microsoft Office Illustrated Fundamentals
Newsletters and Brochures
Successful Website Layout EWD Chapter 2. Defining Client’s Needs Many clients don’t know exactly what they want What they ask for may not be what’s needed.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Novartis Brand Essentials Most important aspects of the Novartis corporate brand design at a glance April 2012 Update Content reflects ECN approved corporate.
Electronic Commerce BBA (Hons) ( ) (Website Designing and Publishing) By: Farhan Mir.
Report Prepared for Envision Presented by: Kristen Vargas Rossana Figuera Yinka Osidein.
Chapter 2 Web Site Design Principles
Web Site Design Principles
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
WEB DESIGN SOLUTIONS. 2 Presentation by JAVANET SYSTEMS 1st Floor, ROFRA House, Suite 4, Kansanga, Gaba Road P.O Box 31586, Kampala, Uganda Tel: +256(0) ,
Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;
B O N N E V I L L E P O W E R A D M I N I S T R A T I O N BPA Energy Efficiency Marketing Portal Training Instructions for adding images and changing graphics.
Tips on making a Corporate Identity By Jennifer L. Bowie & You!
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Interface Design.
Graphical User Interface (GUI) Web site Team Matix Proposal GC 215: Web Publishing.
Adobe Illustrator.  Graphic design can be thought of as a visual language that is used to convey a message to an audience.  A graphic design is a visual.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Site Design 15 Easy Steps to an Excellent Web Site.
Web Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  Web site design  Web page design.
Adobe Certified Associate Objectives 1 Setting Project Requirements.
How to improve website usability Main findings & conclusions from the MOU seminar Ivana Doulgerof Management Organisation Unit Programming & Communication.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
By: Caitlin McCullough, Kaitlyn Kauffman, and Alexis Bergquist.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.
PowerPoint 2012 Tips for Creating a Presentation.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Human Computer Interaction: World Wide Web Rebecca W. Boren, Ph.D. Introduction to Human Factors & Ergonomics Engineering IEE 437/547 November 2, 2011.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Branding & Visual Identity Training
Chapter 2 Web Site Design Principles
Web-based structures, links and testing
Section 7.1 Section 7.2 Identify presentation design principles
Guidelines for PowerPoint
Making Templates Accessible
Web Site Design Plan Checklist
Step 1: Design for a Computer Medium
Design and Implementation of Software for the Web
New PowerPoint Template
New PowerPoint Template
Introduction to Web Design
HCI and Hypermedia/WWW
Making Templates Accessible
Tips on good web site Design
Chapter 2 Web Site Design Principles
Microsoft Office Illustrated Fundamentals
Presentation transcript:

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