GW Web Photo Guide Version 1.0

Author: Content Strategy Team

Dept: Online Strategy & Experience

Date: June 23, 2010

Document Definition

Provides an overview of guidelines as related to photo imagery style and output for GW Web sites.

2

Contents Photo Selection.................................................................................................................3

Style and Mood .............................................................................................................4 Resolution (Image Quality)............................................................................................4 Recurrent Usage ...........................................................................................................5

Securing Photos for Use ...................................................................................................5 Ensure Usage Rights ....................................................................................................5 Find and Secure Photos................................................................................................5

Optimizing Photos for the Web .........................................................................................8 Appendix I: Phase 2 Photo Sizes......................................................................................9 Appendix II: Phase 2 Photo Sizes Visual Reference ......................................................12 Appendix III: Inappropriate Photo Uses ..........................................................................13 Appendix IV: Photo File Naming Convention ..................................................................12

3

Photo Selection A picture is worth a thousand words… The imagery on your Web site is a key element in expressing the GW identity, and shaping each visitor’s impressions of GW. When selecting photos for your Web page, choose photos that appropriately depict both GW and your department’s ideals and goals, including these key themes: The Capital Influence DC is an important part of who we are, it’s more than where we are located. GW faculty, staff and students take full advantage of its place in the heart of nation’s capital – whether that be classes at important DC landmarks or research that takes place at major institutions. Achieving Goals We empower students to achieve personal and professional goals and become industry leaders. Strong Academics We’re a renowned institution of higher education with academic rigor and excellent teaching. GW creates a home for intellectual discovery integrated with hands-on experience. Discovery Our faculty works with students to lead the way in groundbreaking discoveries through cutting edge-research in their fields. Making A Difference At Home & Abroad Our students, alumni, faculty and staff make a difference in the world and are members of the global community. Read more about the GW voice and tone in the GW Web Content Style Guide. (http://www.gwu.edu/~webpres/documents/gw-uwp-p2-GWWebContentGuide_Final_v1.1_distributed.pdf)

4

Style and Mood  

Photos set the tone. They can evoke emotions and feelings or simply create a certain ambiance. To make the most of your photo imagery, keep the following recommendations in mind:

Opt for professional-looking photos that tell a story.

Choose natural, un-posed images with people engaged in activity that highlights your message (i.e. studying, participating in class, athletics, etc.).

Select a mix of subjects for photos across your site. Both people and architecture are engaging and relevant to GW.

Use photos that capture GW engaging in the DC community (classes at Smithsonian, etc.)

Use photos that capture architecture in its various states, forms and uses. For instance, consider all of the ways a single building or location can be portrayed: unique angles that provide visual interest, different times of the day/year, and in context of an event.

Ensure that photo mood/style/tone is in line with both GW and the college, school or department.

Select photos that quickly call to mind your college, school or department. Choose subjects that people clearly associate to your specific college, school or department.

Avoid using images with poor color, resolution and/or cropping.

Resolution (Image Quality) 

Web images should be created from original photo files that are 300 dpi* (dots per inch) minimum. (This is the industry standard for print publications). Save or request RGB** images at a resolution of 72 ppi (pixels per inch) and at the correct dimensions (example: 124 x 220 pixels). JPG: Use this image format for photographs or complex graphics. GIF: Use this format for images or graphics that contain limited colors, illustrations, text, charts, and graphs. GIFs are limited to 256 colors. *Note: dpi and ppi are often used interchangeably, dpi tends to be used in the print arena.

5

**RGB: An additive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors. Definition cited from: “RGB color model.” May 24, 2010. Web. May 14, 2010. <http://en.wikipedia.org/wiki/Rgb>.

Recurrent Usage 

How many times should a single photo image be used? The impact of an image lessens when you use a single photo in multiple places (multiple Web pages/sites, social media, print, etc.) and out of context (time of year, etc.). Avoid overusing any single photo. You don’t want your most frequent visitors wondering why they are seeing the same photo for the 10th time or wondering if your site ever gets updated.

Securing Photos for Use

Ensure Usage Rights 

Photos used on the GW Web site should be cleared for use by their respective owners. If you need help formally establishing usage rights for a photo use the Photo Release Form to ensure that you have permission from the people in your photo to use their likeness. If you are unsure if the photo you have needs a release, please contact University Photography at photos@gwu.edu. Using a photo obtained thru University Photo Services or iStockPhoto.com? No need to worry about securing any additional rights, the proper consents and releases are already covered. Want to use a photo you’ve found thru the Vignette Rich Media Console or other source? Reach out to the photo owner and request the appropriate permissions/consents.

Find and Secure Photos 

If you do not have a photo on file that fits your needs, consider the following two options for acquiring new photos. 1. Submit a University Photography photo request form:

6

The use of professional photography services is strongly recommended. The GW University Photography group can provide photos from our extensive archive of campus/event images as well as support requests for new photos. To look for a specific photo from our archives, browse the GW Today photo galleries: (http://www.gwu.edu/explore/gwtoday/multimedia/photogalleries/universityphotographyphotos) To submit a request for either a new or archived photo, follow the related instructions below:

Request a single photo Complete and submit the Photo Request Form. (If requesting an archived photo include the gallery and file name). (http://spreadsheets.google.com/viewform?formkey=dDBsQUhjM3ZVNG9NTHpNZERiUWxWMVE6MA)

Request multiple photos Fill out and send the Bulk Photo Request Form to University Photography via email: photos@gwu.edu. (If requesting an archived photo include the gallery and file name). (http://www.gwu.edu/~webpres/documents/bulk-photo-request-form.xls)

University Photography will respond to requests within 5 business days.

7

2. Purchase stock photo on iStockPhoto.com: iStockPhoto.com is an inexpensive way to find generic photos for most needs. After searching for an image you need, create a new account. iStockPhoto.com requires the purchase of credits to buy an image. View the payment plans, (http://www.istockphoto.com/buy-stock-photos.php) and select the plan that works best for you. (Hint: Unless you are purchasing many photos over a long period of time, choose the pay-as-you-go option). After you have purchased credits, purchase your selected images. Choose the size you need (keep in mind any future uses). If you plan to use the photo in print publications, choose a larger image. If you plan to only use it for the Web, you can usually purchase the small or medium size photo with the standard license option. Click download and save the file to your desk top. Carefully review all stock photography terms and conditions. Only purchase images where “full rights” can be obtained. Avoid any common use stock photography sites. They are often open source and copyrights can be questionable.

8

Optimizing Photos for the Web Optimizing photos for the Web allows you to maintain photo quality while reducing file size and thus the time it takes the photo to load on the Web. Type Formats ppi Color Setting Photos jpg 72 RGB Logos jpg 72 RGB Graphics jpg, gif, png 72 RGB Charts jpg, gif, png 72 RGB If available, use your photo editing program’s “Save for Web…” feature. This allows you to view the quality, select the file size of your image and compare the approximate download time.

9

Appendix I: Phase 2 Photo Sizes This table reflects image specifications as of Module Library 5.26.10, June 23, 2010. Go to the Information Architecture folder in eroom for the most up-to-date version of the Module Library and additional details including visual representations. Hero & Brand Modules Module Name Module ID Version Size Orientation* Comments Suggested Usage

Hero H-1 | Pkg 1 H1.0 605x316

H

Hero for 1-8 Images

Global message specific to school, should be reflective of that school’s brand/identity

Hero H-1 | Pkg 1 H1.1 605x216

H Scenario - 1 for Level 1 Landing Pages

Specific to Department or Center and reflective of the related Dept/Center brand/identity

Hero H-1 | Pkg 1 H1.2 605x80 H Scenario -2 for Level 2 Landing

pages Specific to page content

Hero H-1 | Pkg 1 H1.3 605x316 H Hero for 3 images to slide on

click Global message specific to school Local Brand H-2 | Pkg 1 H2.0 333x316 H Home page (default) School wordmark

Local Brand H-2 | Pkg 1 H2.1 333x216 H Level2 landing pages (i.e.

<Department> Home page) School wordmark with department

Local Brand H-2 | Pkg 1 H2.2 333x80

H Level 1 landing pages and level 3 content pages (i.e. Dept. of Psychology) School wordmark

Local Brand School Links H-5 | Pkg 2 333x316 V Refer to Local Brand Module

H2.0 School or entity wordmark

Hero Container Module Set MS-2 | Pkg 2 #1 333x316 605x316

V H

Refer to Hero Modules H1.0 & H2 See modules H1.0 & H2

Hero Container Module Set MS-2 | Pkg 2 #2 333x316 605x316

V H Refer to Hero Module H1.3 & H2 See modules H1.3 & H2

Hero Container Module Set MS-2 | Pkg 2 #3 333x216 605x216

H H Refer to Hero Module H1.1 & H2 See modules H1.1 & H2

Hero Container Module Set MS-2 | Pkg 2 #4 333x80 605x80

H H Refer to Hero Module H1.2 & H2 See modules H1.2 & H2

Static Hero Container MS-3 | Pkg 2 333x316 605x316

V H

Refer to Hero Modules H1.1 and H5 See modules H1.1 and H5

*S = Square, H = Horizontal, V = Vertical

10

Other Content Module Types Module Name Module ID Version Size Orientation* Comments Suggested Usage

2 Column Tabbed Teaser CM-3 | Pkg 1 #1 85x63 H Tabbed Module with Video & Images Image from video

2 Column Tabbed Teaser CM-3 | Pkg 1 #2 134x101 H Untabbed Module with Video Image from video 2 Column Tabbed Teaser CM-3 | Pkg 1 #3 220x220 S Untabbed Module with Image Image from video

Carousel Teaser CM-4 | Pkg 1 Var #1 90x120 220xvariable

V S

1 Column Carousel Teasure with Slider

Carousel Teaser CM-4 | Pkg 1 Var #2 90x120 220xvariable

V S

1 Column Carousel Teasure without Slider

Latest News CM-6 | Pkg 1 Sample A 60x60 S 1 Column Listing with Images

Latest News CM-6 | Pkg 1 Sample C 60x60 S

1 Column Listing with/without Images

Featured Programs CM-7a | Pkg 2 134x101 H

2 Column Carousel CM-9 | Pkg 1

120x120 134x101 90x120

S H V 2 Column Width

Featured Social Media CM-11 | Pkg 1 60x60 S 1 Column Social Media Icons CM-12 | Pkg 1 16x16 S Social Site Icon Social media icon

Apply Now CM-13 | Pkg 1 Sample A 460xVariable Variable 2 Column Width

Apply Now CM-13 | Pkg 1 Sample B 220xVariable Variable 1 Column Width

Apply Now CM-13 | Pkg 1 Sample C 220xVariable Variable CSS Rendered Button Style

In the Spotlight CM-14 | Pkg 1 90x120 220x120

V H 1 Column Width

Listing Module CM-18 | Pkg 2 220x120 S

Highlighted/Featured CM-20 | Pkg 3 Var #1 220x120 H 3 Columns with 1 Content Instance

Highlighted/Featured CM-20 | Pkg 3 Var #2 220x120 H 3 Columns with 3 Content Instances

Highlighted/Featured CM-20 | Pkg 3 Var #3 220x120 H 2 Columns with 1 Content Instance

Highlighted/Featured CM-20 | Pkg 3 Var #4 220x120 H 2 Columns with 2 Content Instances

Article CM-22 | Pkg 3

220x220 220x120 460x200

S H H

460x200 in two column variation only

Story CM-23 | Pkg 3 Var #1 220x120 220x220

H S 2 Columns

11

Story Module CM-23 | Pkg 3 Var #2 460x200 H News Detail CM-24 | Pkg 2 460x200 H Event Detail CM-25 | Pkg 2 460x200 H Person Profile CM-26 | Pkg 3 150x200 V 2 Column

Lightbox Gallery CM-27 | Pkg 3 #2 Image Library

500x376 500xVariable Variablex376

H Variable Variable

Thumbnails are resized by a CMS

Static Sidebar CM-34 Var #1 90x120 220x120

V H

Static Sidebar CM-34 Var #2 90x120 220xVariable

V Variable

Rotating Sidebar CM-35 90x120 220x120

V H

Generic GM-1 | Pkg 1 Var #1 90x120 220x120

V H 1 Column

Generic GM-1 | Pkg 1 Var #2 90x120 220xVariable

V Variable 2 Column

Video Aggregator MM-1 | Pkg 1 134x101 H 2-Column

Media Teaser for Video MM-2 | Pkg 2 220x165 220x124

H H 1 Column

Media Teaser for Photo Gallery MM-3 | Pkg 2 220xVariable Variable 1 Column Media Teaser for Newsletter MM-4 | Pkg 2 220xVariable Variable 1 Column Blog & Social Networking Module Set MS-1 | Pkg: 1 60x60 S Combines CM-11 and CM-12 See modules CM-11 & CM-12

*S = Square, H = Horizontal, V = Vertical Footers Module Name Module ID Version Size Orientation* Comments Suggested Usage College Footer F-1 | Pkg 3 16x16 S Size for Social Media Icon Social media icon

*S = Square, H = Horizontal, V = Vertical

12

Appendix II: Phase 2 Photo Sizes Visual Reference

13

Appendix III: Inappropriate Photo Uses

14

Appendix IV: Photo File Naming Convention We recommend using a standard format for photo file names. This will increase our ability to organize and find photos across the University. Naming Structure The full naming convention includes six items as follows: Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg If you do not know any one of these items (ex. department, photographer, year or original number), just leave the generic name of the field in that space. For example:

If you are unsure of the Department to attribute the photo to: Healthcare- Hearing_DEPT_TLW_2009_IMG-7777_460x200.jpg

Separate categories with underscores and words in the same category with hyphens. For example:

Steven-Knapp_UP_JMC_2009_DSC-9876_220x120.jpg

Other examples: Commencement_UP_JMC_2009_DSC-1234_460x200.jpg Moot-Court_CDU_2009_IMG-6579_220x220.jpg

Additional Instructions Note: Do not use special characters other than “_” when naming files, as they will not upload to Vignette.

I. Subject Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg Name of event, person or place

II. Department or School Abbreviation Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg Two to five letter abbreviation, ex: GSEHD = Graduate School of Education & Human Development UP = University Photography SASS = Student & Academic Support Services Please send the full department name, plus the abbreviation to photos@gwu.edu for archival documentation.

15

III. Photographer Abbreviation Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg Three letter initials and/or abbreviation, ex: First initial, middle initial, last initial or first initial and two letters of last name (Jessica McConnell = JMC, William L. Atkins = WLA) Please send the full photographer name, plus the abbreviation to photos@gwu.edu for archival documentation

IV. Year

Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg V. Original image name from camera or from photographer

Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg VI. Include file size in pixels

Subject_DEPT_PHOTOG_YEAR_ORIGNUM_widthxheight.jpg