# 9. Multimedia Do & Don’ts

### <span style="color: #cc092f;">**How important is multimedia?**</span>

<span style="font-weight: 300;">Multimedia content is a key display type in the A-State visual language. Prospective students prefer multimedia content that is:</span>

- <span style="font-weight: 300;">Authentic</span>
- <span style="font-weight: 300;">Concise</span>
- <span style="font-weight: 300;">Visual</span>
- <span style="font-weight: 300;">Peer-approved</span>
- <span style="font-weight: 300;">Purpose-driven</span>
- <span style="font-weight: 300;">Mobile-friendly</span>

### <span style="color: #cc092f;">**What makes a photo/video “on-brand” for A-State?**</span>

<span style="font-weight: 300;">A-State photography should fall in line with the success criteria for the brand:</span>

- <span style="font-weight: 300;">Convey the supportive, community-oriented nature of A-State</span>
- <span style="font-weight: 300;">Showcase the aspects of A-State that are unmatched by our competitors</span>
- <span style="font-weight: 300;">Highlight the value of an A-State education as a soft launching pad that helps students succeed and prepares them for next steps in education or career</span>
- <span style="font-weight: 300;">Support a mobile-friendly web experience that considers users with varying bandwidth access </span>

<span style="font-weight: 300;">Every effort should be made to ensure photography and video aligns with A-State brand voice. Photography and videography should have an authentic feel, use rich color, and support A-State brand identity and key messages.</span>

**All photos used must be properly sourced and cleared for use, ensuring they are either owned by Arkansas State University, licensed for use, or fall under public domain or copyright-free guidelines. Unauthorized or copyrighted images should not be used without proper permissions. Website contributors should use the** [**A-State Photography Portal**](http://photos.astate.edu) **and avoid using clipart or external stock photography, if possible.**

### <span style="color: #cc092f;">**Style Guidelines**</span>

#### **General Qualities**

<span style="font-weight: 300;">All photography, regardless of subject and distance, should share the following qualities:</span>

- <span style="font-weight: 300;">Be well-lit – Having adequate brightness and contrast</span>
- <span style="font-weight: 300;">Be authentic – Relying on non-posed scenes with genuine expressions</span>
- <span style="font-weight: 300;">Have dynamic angles – Leaning into asymmetry and interesting points of view</span>
- <span style="font-weight: 300;">Use a journalistic lens - the viewer should feel invested in the subject</span>

####  **Portraits**

<span style="font-weight: 300;">Highlight the strength and personality of individuals</span>

- <span style="font-weight: 300;">Pair these with quotes or bios</span>
- <span style="font-weight: 300;">Non busy backgrounds – To keep the attention on the subject’s face</span>
- <span style="font-weight: 300;">Choose simple backgrounds when possible – uncluttered walls, foliage</span>
- <span style="font-weight: 300;">Shallow depth of field – blur out irrelevant details</span>
- <span style="font-weight: 300;">Genuine expression – Ensure faces convey genuine emotion – pride, happiness, determination. Avoid blank expressions and “fake” smiles.</span>
- <span style="font-weight: 300;">Cropped just below the shoulders</span>

[![Multimedia-1.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-1.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-1.png)

####  **Situations**

<span style="font-weight: 300;">Show off how learning and interaction works at A-State</span>

- <span style="font-weight: 300;">Include the environment if it contributes to understanding the subject – for example, a lab, classroom, or street scene</span>
- <span style="font-weight: 300;">Invite the viewer into the scene – have a strong focal point and avoid too many backs of people</span>

<span style="font-weight: 300;">[![Multimedia-2.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-2.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-2.png)</span>

####  **Environments**

<span style="font-weight: 300;">Convey the character of a large space, for tone-setting</span>

- <span style="font-weight: 300;">Use occasionally</span>
- <span style="font-weight: 300;">Landscape shots of campus that establish the location as well as show off an exciting and bustling campus life</span>
- <span style="font-weight: 300;">Local landmarks, street scenes, and hot spots</span>

<span style="font-weight: 300;">[![Multimedia-3.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-3.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-3.png)</span>

####  **Objects**

<span style="font-weight: 300;">Used to symbolically represent subject matter and give a future-focused appearance</span>

- <span style="font-weight: 300;">Use occasionally</span>
- <span style="font-weight: 300;">Stock is okay– used selectively</span>
- <span style="font-weight: 300;">Avoid cliches (examples: a gavel or beaker for “science”, dollar bills for “money”)</span>

<span style="font-weight: 300;">[![Multimedia-4.png](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-4.png)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-4.png)</span>

#### **Incorrect Usages**

<table border="1" id="bkmrk-avoid-abstract%2C-impe" style="width: 70%; border-collapse: collapse;"><tbody><tr><td style="width: 50%; vertical-align: top;">AVOID Abstract, impersonal illustrations in place of custom images.</td><td style="width: 50%; vertical-align: top;">[![Multimedia-5_a.jpg](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-5-a.jpg)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-5-a.jpg)</td></tr><tr><td style="width: 50%; vertical-align: top;"><span style="font-weight: 400;">AVOID Overly filtered/stylized shots. Especially images that flatten the content using cool-toned filters.</span></td><td style="width: 50%; vertical-align: top;">[![Multimedia-5_b.jpg](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-5-b.jpg)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-5-b.jpg)</td></tr><tr><td style="width: 50%; vertical-align: top;">AVOID Extreme angles and stylized lens techniques (such as fish eye, zoom, and blur).</td><td style="width: 50%; vertical-align: top;">[![Multimedia-5_c.jpg](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-5-c.jpg)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-5-c.jpg)</td></tr><tr><td style="width: 50%; vertical-align: top;">AVOID Over-laying distracting graphics/text.</td><td style="width: 50%; vertical-align: top;">[![Multimedia-5_d.jpg](https://kb.astate.edu/uploads/images/gallery/2025-07/scaled-1680-/multimedia-5-d.jpg)](https://kb.astate.edu/uploads/images/gallery/2025-07/multimedia-5-d.jpg)</td></tr></tbody></table>

### **<span style="color: #cc092f;">Shot Recommendations</span>** 

<span style="font-weight: 300;">Based on the Designed Screens and Sitemap, the following is a list of recommended shots for populating the website: </span>

#### **Campus Photography**

<span style="font-weight: 300;">Campus photos play an important role in giving students the context of their surroundings. Photographers should capture a good balance of simple, establishing shots and more personal shots displaying bustling student life. </span>

##### **Campuses**

- <span style="font-weight: 300;">Photos with and without campus signage.</span>
- <span style="font-weight: 300;">Large groups of students walking around the campuses:</span>
- <span style="font-weight: 300;">Shots capturing the motion on campus: students commuting from place to place.</span>
- <span style="font-weight: 300;">Smaller groups of students and individuals with recognizable campus features in the background.</span>
- <span style="font-weight: 300;">Exterior shots of important facilities on each campus. Capture a range of facilities that are academically significant and can be used on program-specific pages.</span>
- <span style="font-weight: 300;">Campuses in different seasons/decorated for specific holidays. </span>

##### **Amenities**

<span style="font-weight: 300;">Show off A-State amenities in an engaging way. It may be useful to photograph facilities in a plain, establishing way, but also show them in use. Add human subjects to these shots as well as showing multiple subjects interacting.</span>

- <span style="font-weight: 300;">Housing</span>
- <span style="font-weight: 300;">Health and Safety</span>
- <span style="font-weight: 300;">Offices and Faculty </span>
- <span style="font-weight: 300;">Fitness Centers</span>
- <span style="font-weight: 300;">Libraries</span>

#### **Local Culture**

<span style="font-weight: 300;">The campuses aren’t the only part of A-State story. The local area have a large influence over the culture. Photographers should capture the essence of the local culture and show what a beautiful place A-State is. These images can be used on the About and Visit pages. </span>

#### **Student Life**

<span style="font-weight: 300;">Show off the student life by using an intimate, personal lens. Get up close and personal with students in their natural environment. Student features are not only a great way to highlight a unique story of success, but demonstrate how others can follow in their footsteps. These vignettes can act as a vehicle for showing the impact of certain clubs, programs, mentors, and facilities on campus.</span>

<span style="font-weight: 300;">Ideally, the students whose stories are being highlighted are the same ones being photographed for the website.</span>

- <span style="font-weight: 300;">The viewer should feel like they’re getting an inside look at this student’s life on campus. </span>
- <span style="font-weight: 300;">Photographers should capture a good mix of posed portraits and shots of the student in action. Depending on what is being highlighted, either of these could be useful.</span>

<span style="font-weight: 300;">Student stories are a great way to add a personal touch to other information across the site. When gathering stories, keep in mind how they might add substance to the following:</span>

- <span style="font-weight: 300;">Pathways of study (e.g. different types of students and applicants) </span>
- <span style="font-weight: 300;">Program information (e.g. a story highlighting the Biology program and how a student took advantage of A-State resources) </span>
- <span style="font-weight: 300;">Clubs and organizations (e.g. the president of a student organization)</span>
- <span style="font-weight: 300;">Faculty (e.g. how a student was inspired and mentored by a faculty member)</span>
- <span style="font-weight: 300;">Facilities (e.g. a student who took advantage of a creative space on campus to create a work of art)</span>
- <span style="font-weight: 300;">Athletics (e.g. how a student balances their academic and athletic interests)</span>

#### **Faculty and Alumni**

<span style="font-weight: 300;">When gathering photographs of faculty members and alumni, treat them similarly to students by humanizing them and showing them in a social context. These photos should build upon A-State community image, how do you want to come across to those who don’t know you? Showing a welcoming, diverse cast of characters that allows viewers to create a personal connection.</span>

<span style="font-weight: 300;">As well as gathering posed portraits, photographers should show faculty supporting students:</span>

- <span style="font-weight: 300;">Tutoring Services</span>
- <span style="font-weight: 300;">Academic Advising</span>
- <span style="font-weight: 300;">Skills Development Resources</span>
- <span style="font-weight: 300;">Disability Services </span>

<span style="font-weight: 300;">Build out the community image by showing Alumni stories and the possibilities that await after a A-State education. These can be used in tandem with program information in order to demonstrate how students could use their degree in the future. </span>

#### **Program Highlights**

<span style="font-weight: 300;">Academic programs are the “products” you offer. As such, we recommend that your Program Detail pages are engaging and visually appealing, highlighting the experiences students will have while studying at A-State.</span>

<span style="font-weight: 300;">In addition to one hero image, </span>**use at least one more photo per program**<span style="font-weight: 300;">. More may be needed if a program has more to offer. Images may come in the form of a student or faculty story, a carousel, in the WYSIWYG editor, or any other pattern.</span>

- <span style="font-weight: 300;">The Hero image should not be too visually overwhelming since there will be text placed on top of it. Avoid busy computer screens, faces getting overlapped by text, and nondescript placeholder imagery.</span>

<span style="font-weight: 300;">Gathering a wide range of generic shots of programs can provide content for other pages across the site. A lot of topics on the site do not yield visually interesting photo opportunities, so photographers should create a repository of program images to accurately represent the student experience. The following topics would benefit from supplemental program imagery:</span>

- <span style="font-weight: 300;">Registration</span>
- <span style="font-weight: 300;">Applications and Admissions </span>
- <span style="font-weight: 300;">Online Programming</span>
- <span style="font-weight: 300;">Program Catalogs</span>
- <span style="font-weight: 300;">Testing and Placement</span>
- <span style="font-weight: 300;">Workforce Development</span>
- <span style="font-weight: 300;">Fees and Financial Aid</span>
- <span style="font-weight: 300;">Academic Support</span>

#### **News and Events**

<span style="font-weight: 300;">News stories should be populated with an appropriate image. As these swap out for new stories, ensure that all featured articles and events have an accompanying image. This may be a big lift since there are a lot of existing articles and upcoming events, so employ stock imagery here if necessary. </span>

### <span style="color: #cc092f;">**Image Storage and File Naming**</span>

#### **Naming Images**

<span style="font-weight: 300;">When you upload a new image, it will be uploaded to the A-State media library in the CMS. Naming images clearly allows other users - or maybe even yourself! - to find a relevant image at a later date if they do not have one on hand. </span>

**When uploading your image, please follow these naming convention guidelines:**

- <span style="font-weight: 300;">Briefly describe the image. Try to keep the description under 5 words </span>
- <span style="font-weight: 300;">You can eliminate “stop words” such as “in,” “and,” “the,” etc.</span>

- <span style="font-weight: 300;">File names should always be lower case</span>
- <span style="font-weight: 300;">Use hyphens to separate words. </span><span style="font-weight: 300;">Do not use spaces.</span>
- <span style="font-weight: 300;">File names should have only letters or numbers (or hyphens)</span>
- <span style="font-weight: 300;">If there are multiple versions of the same image, add the image size at the end</span>
- <span style="font-weight: 300;">If you have a particular keyword for the page, trying to insert it into the file name is a plus</span>

**Good image titles:**

- <span style="font-weight: 300;">chemistry-professor-lecture.jpg</span>
- <span style="font-weight: 300;">students-collaborating-writing-center-400x400.jpg</span>
- <span style="font-weight: 300;">students-collaborating-writing-center-1080x720.jpg</span>

**Bad image titles:**

- <span style="font-weight: 300;">Untitled1.jpg</span>
- <span style="font-weight: 300;">IMG\_3084.jpg</span>
- <span style="font-weight: 300;">Screen Shot 2019-03-08 at 1\_08\_55 PM.png</span>

**Alt text:**

- <span style="font-weight: 300;">Alt text is used for both accessibility and SEO purposes.</span>
- <span style="font-weight: 300;">Describing the image clearly is priority #1. See the Accessibility guidelines for more information.</span>

#### **Image Sizes**

<span style="font-weight: 300;">Follow these sizing requirements to optimize the designs and display of imagery.</span>

[**Image Sizes (PDF)**](https://drive.google.com/file/d/1uAHHFecK1pmPuKZEx54otZPttTUmwsp0/view?usp=drive_link)

### <span style="color: #cc092f;">**Videos: Best Practices**</span>

<span style="font-weight: 300;">A-State already has some quality videos on its YouTube channel and across the site but many of the videos are outdated. Whether you’re choosing from existing video assets or creating from scratch, keep the following guidelines top of mind.</span>

#### **Keep it real**

<span style="font-weight: 300;">Use diverse, user-generated content that is authentic. Staged photos and videos won’t pass the sniff test. Prospective students don’t want to be sold to. They want to be understood and respected. They want to be spoken to like adults. They want to see themselves in someone else.</span>

- <span style="font-weight: 300;">Featured A-State students, faculty, &amp; alumni should feel confident, direct, and successful.</span>
- <span style="font-weight: 300;">Focus on polished ‘real talk’: overcoming obstacles, and achieving goals</span>
- <span style="font-weight: 300;">Keep the visual fabric rich</span>
- <span style="font-weight: 300;">Allow groups to bring natural energy to the conversation</span>
- <span style="font-weight: 300;">Consider user-generated content (with permission) </span>

#### **Make it snappy**

<span style="font-weight: 300;">Short. Timely. Layered context. Prospective students are impatient. They want to get as much information as possible as quickly as possible. Value their time by focusing on what’s really important.</span>

- <span style="font-weight: 300;">Focus on snackable video content. 1-2 minutes is ideal. No mini-lectures</span>
- <span style="font-weight: 300;">Use simple captions to provide additional context and to add a layer of A-State branding and voices</span>

#### **Ensure Accessibility**

<span style="font-weight: 300;">Accessibility isn’t just a nice-to-have; it’s essential for providing equal access to information and ensuring that all audiences, including those with disabilities, can fully engage with your video content. While automatic captions generated by platforms like YouTube are a starting point, they often fall short in terms of accuracy and clarity. To meet accessibility standards and offer a more inclusive viewing experience, consider the following:</span>

1. **Accurate, Human-Edited Captions**


- <span style="font-weight: 300;">Review and correct autocaptions to ensure timing, spelling, and grammar accurately reflect the spoken dialogue.</span>
- <span style="font-weight: 300;">Include captions for all speech, as well as relevant non-speech audio elements (e.g., laughter, applause, background music, sound effects). This ensures that viewers who are Deaf or hard of hearing can follow along without missing context.</span>

- **Transcripts for Supplemental Access**


- <span style="font-weight: 300;">Provide a full transcript of the video content— including descriptions of important on-screen actions or visuals not described in the dialogue. This benefits users who rely on screen readers and allows those without the ability to watch video to still access the information.</span>
- <span style="font-weight: 300;">Post transcripts alongside the video or make them easily accessible via a link in the description.</span>

- **Audio Descriptions for Visual Content**


- <span style="font-weight: 300;">If your video heavily relies on visuals (such as diagrams, text overlays, or demonstrations) to convey information not spoken aloud, consider adding audio descriptions. These narrations fill in details that blind or low-vision users may otherwise miss.</span>
- <span style="font-weight: 300;">Integrate these descriptions into the main audio track or provide a secondary audio track that can be enabled as needed.</span>

- **Clear, Legible On-Screen Text**


- <span style="font-weight: 300;">If using titles, lower-thirds, or text overlays, ensure high contrast between text and background, and choose an easy-to-read font size and style. This benefits all viewers, including those with low vision or dyslexia.</span>

- **Screen Reader-Friendly Metadata**


- <span style="font-weight: 300;">Ensure that any metadata associated with the video (titles, tags, descriptions) is written in a clear and descriptive manner. Screen reader users rely heavily on this information to understand the content before pressing play.</span>

- **Compliance with Accessibility Guidelines**


- <span style="font-weight: 300;">Familiarize yourself with the Web Content Accessibility Guidelines (WCAG) and strive to meet or exceed their recommendations. Adhering to these standards helps ensure your videos are accessible to the widest possible audience.</span>

<span style="font-weight: 300;">By thoughtfully implementing these practices, you not only create a more inclusive environment for all current and prospective students, faculty, and staff but also strengthen your overall brand credibility. Accessible video content is an investment that honors Butte College’s commitment to diversity, inclusion, and equal opportunity.</span>

#### **YouTube has SEO, too!**

<span style="font-weight: 300;">The internet’s second-largest search engine! Beyond hosting your videos on YouTube and embedding them onto your site, YouTube is an extremely powerful search tool. </span>

<span style="font-weight: 300;">Leverage your keyword research and insert keywords into appropriate YouTube metadata AND the video itself.</span>

- <span style="font-weight: 300;">SAY the keyword in the video</span>
- <span style="font-weight: 300;">Include keyword in video title, description, &amp; tags</span>
- <span style="font-weight: 300;">Leverage hashtags to drive traffic to videos</span>