Website Design

A website design course at the University of Wyoming

Tag: student work (page 1 of 4)

Week 1: Design Principles to Showcase Your Work

Why You’ll Thank Yourself for Knowing HTML & CSS

(1) You can now showcase your own material and skills: If you’re headed for a media or communication career that involves new media and social media, it’s a great idea to have your own website. You can post and host all of your journalism and communication material–print stories, audio stories, photography, video stories, slideshows, interactive graphics, artwork, etc. This effort will help you “brand” yourself. There is a lot of competition out there.

(2) You can now work with a content management system: Most large companies have a CMS (content management system) that is like a standard “shell” where you insert the content. You have little control over the layout and design, rather, you merely insert the content into the shell. With advanced knowledge of HTML and CSS, you will understand the CMS and you may even be able to make or suggest improvements.

(3) You can now design websites for others: Once word gets out that you can design websites, don’t be surprised if your friends, family, acquaintances, organizations, companies, etc., start asking you to design their website. You can make some money out of this skill!

Let’s read an article about getting a job in journalism code (from NICAR: National Institute for Computer-Assisted Reporting).

What are your thoughts on this Q&A about journalism and coding?

Design Principles for Creating a Clean, Professional Website

Emphasis

Definition: Highlights the importance of the site’s content. Also relates to hierarchy.

  • When creating a draft of your site, list all of the information that needs to appear on the page.
  • Then, number the information by order of importance.
  • Design the visual hierarchy so the page reflects the determined importance.
  • Avoid emphasizing everything and avoid emphasizing nothing.

Good example.

Balance

Definition: How the elements in a design are distributed and how they relate to the overall distribution of visual weight within the page. As elements are grouped together in a page, visual weight is created. You want to balance the visual weight so as to create stability. Two kinds exist:
1. Symmetrical Balance: Equal visual weight is given to elements so that two halves mirror one another. Example.
2. Asymmetrical Balance: Visual weight is distributed equally, but elements do not mirror one another. Example.

Websites can mix the two types as well. Example.

Alignment

Definition: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.

  • Don’t mix alignments. Choose one alignment and use it on the entire page. Not-so-hot example.
  • Break this rule for creating contrast and focus. Like this.
  • Do not center everything.

Proximity

Definition: The relationships that items develop when they are close together. When items are close, ensure you want the relationship to exist. When items are far apart, relationships are less likely to exist.
Example of proximity creating relationships.
Example of potentially confusing proximity.

Repetition

Definition: Throughout the website, there are certain elements that are common and unify the disparate parts together.

  • Each page should look like it belongs to the same website.
  • Color, shape, line, fonts, spacing, layout, typography, and imagery are some examples of potential repetitive elements.
  • A benefit of repetition is predictability. Users will better understand the design, navigation, and hierarchy.

Good Examples: Color repetition. Font repetition. Layout repetition. Imagery repetition.

Poor Examples: Lack of color repetition. Lack of font repetition. Lack of layout repetition. Lack of imagery repetition.

Contrast

Definition: The visual differentiation of two or more elements. Contrast creates emphasis and focus toward the distinct elements, and can create a visual hierarchy as well.

  • Elements that have strong contrast appear distinct and unique. Elements that have weak contrast appear unified.
  • If you want elements to appear separate, use strong contrast. Go all the way. Don’t make them almost the same.
  • Ensure that some elements of your website have contrast, which subsequently creates focus. You don’t want everything to have the same visual priority.
  • Create contrast with color, size, position, and font.

Examples: Color contrast. Size contrast. Poor use of contrast. Another poor use of contrast.

Background Images

Related to contrast is the background image. Should you have one on your website? The answer: it depends. If there is enough contrast and the image is repeated in a seamless manner, then it is OK: Example 1 | Example 2.

Do not use a background image if the image if the contrast is too weak or the image is not seamlessly repeated: Example 1 | Example 2.

What are your thoughts on these examples? Example 1 | Example 2 | Example 3

Flow

Definition: The path the users’ eyes follow as they examine a website. Flow results from the execution of the design principles explained above.

  • Consider that our eyes typically examine webpages from left to right and top to bottom.
  • Ensure our eyes do not bounce around the page, darting from right to bottom and back up.

Example of smooth flow. Another example of smooth flow. Example of poor flow.

Typography on the Web

This refers to the use of fonts, font size, and font style on the web.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. No large blocks of text in bold, italic, all caps, or small caps.

What do you think about these examples in terms of typography? Example 1 | Example 2 | Example 3

Color Schemes

There are several types of color schemes to choose from when designing your website. Let’s familiarize ourselves with these terms and the color wheel.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1.
  5. Color Discord: Color discord can be visually disturbing, attract interest, relay ideas or themes, and create surprise. Example 1.

You want to pick one color strategy and stick to it in order to create a visually appealing website.

Layout and Themes

There are many options when it comes to the overall layout and theme of your website. Here are some ideas:

  1. Ultra clean and minimalist designs lean toward minimalism, but emphasize the crystal clearness of the design. They are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2. Example 3.
  2. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2. Example 3.
  3. Visual-oriented designs use images, graphics, or multimedia in an elegant way. These websites may be a little more difficult for beginners to design and maintain. Example 1. Other examples of visual-oriented websites.

Note: Definitions and listed material are adapted from The Web Designer’s Idea Book, Vol. 2 as well as The Non-Designer’s Web Book, 3rd ed..

If you want to examine even more examples of websites, check out these student websites. Note that some websites are great and some are a throwback to poor web design principles from the 1990s.

Video Storytelling

The ability to tell a good story with video is a difficult yet important skill for journalists and communicators to learn. Video is not just on TV anymore — you can find video stories online and on mobile devices as well. You’ll work in teams of two for this project. Let’s partner up and review the instructions for Blog Post 10 – Video Storytelling.

Important video to watch if you’re shooting with your iPhone.

1. Pre-Production (Before You Shoot)

Choose a story (or event!) that is well suited for video. This includes stories that have strong visual components and that have any sort of motion.

Identify your sources. Seek out multiple and diverse perspectives for your story.

Write preliminary interview questions after researching the story. Plan out your questions, story focus, and narrative (i.e., beginning, middle, and end) in advance, as much as you can. However, also remember to be adaptable during the interview and ask appropriate follow-up questions.

“Show me, don’t tell me” is the mantra in video storytelling. Find a way to show a story unfolding with video. Minimize the on-camera interviews with people (i.e., “talking head interviews”). It’s more interesting to watch an event occur rather than here about it from an interviewee.

Plan to shoot a variety of angles and types of shots. For suggestions, see Production, below.

Consider how you (the reporter) will fit into the story. Will you appear on-camera to set the scene or conduct an interview? If you’d like to try that, go ahead! Or, will you be completely invisible to the audience, just like you were during the Soundslides project and the audio profile project? Or, will you narrate the story without appearing on-camera?

2. Production (When You’re On-Location)

Plan on shooting before and after the event (if shooting an event). This ensures you have a variety of material to create your edited story from. Also, it helps develop a narrative of before, during, and after the event.

Shoot B-roll. B-roll is supplemental footage that relates to your story. For example, a video story about the the UW track team’s meet should include video of athletes warming up, tying their shoelaces, talking with coaches, etc. These are the shots that you can use to fill time while an interviewee is talking or while ambient noise (e.g., background noise from the event or music) is playing. For a 2-minute story, shoot at least 30 seconds of B-roll footage.

Shoot on-camera interviews with your sources. When shooting interviews, remember to look around at your surroundings. Is it relevant to the story? Can you move somewhere else to get the interview that is not as chaotic or loud? Just as with the audio interviews, encourage your sources to relax, act natural, and provide context to the answer they are giving to your question. Don’t be afraid to re-shoot a question and ask a question again. Oftentimes, the source gives a better and more eloquent answer to your question the second time you ask it.

Optional: Shoot on-camera reporters. If you’d like to appear on-camera as a broadcaster at some point, then this project is a good opportunity to practice. You can introduce the story and provide context to the significance of the story. You can transition with your voice and appearance between story segments. And you can conclude the story and provide a summary or “what happens next” statement.

Shoot a variety of camera shots. Whether you plan to be a visual journalist or not, you need to understand and learn how to execute the types of shots. See this website for visual examples and descriptions as we go over the definitions below.

  • Extreme wide shots. Shows the whole entire scene of an event, location, or story. These shots give viewers information about where the story takes place. They set the scene and give context early on in a story.
  • Very wide shots. Shows less background and shows the subject in the large scene. The subject is barely visible.
  • Wide shots. Shows the whole subject so the visual emphasis is on the subject rather than the background.
  • Mid shots. Shows the subject even closer, but a bit of the scene is still visible in the frame.
  • Medium close-up shots. Shows the subject even closer and the subject’s features and expressions are more of the focus.
  • Close-up shots. Shows the subject’s head to shoulder area.
  • Extreme close-up shots. Shows only the subject in the frame, such as the subject’s eyes and nose.
  • Cut-in shots. Shows some other part of the main subject, not the face and shoulders.
  • Cutaway shots. B-roll that is used as transitions between shots or to add information not offered by shots of the main subject or scene.
  • Point-of-view shots. Shows a scene from the subject’s perspective such that you feel like you are in their shoes.

Optional: Camera movement techniques. Camera movements are more advanced production techniques. They may not work out well if you do not have a high-quality video camera. Thus, I would avoid these techniques unless you have prior experience with video or unless you have a high-quality video camera. If you decide to use camera movements, see the techniques below:

  • Zooming: Going from wide-angle to close-up or vice versa.
  • Panning: Moving the camera horizontally.
  • Tilts: Moving the camera vertically.
  • Tracking: Moving the camera around accordingly to track the subject.

Composition concerns: Give headroom so the interviewee has space above their head during the shot. Avoid distractions in the background of shots. Remember the rule of thirds still!

Be Flexible: No matter home much planning you do in pre-production, from deciding who you want to interview to what types of b-roll shots you want, something is bound to not go your way, or the event you’re at will be different than you envisioned. Be willing to change you plan during production based on what is happening at the event in real time.

3. Post-Production (The Editing Process)

Editing programs. You have access to Adobe Premiere Elements in this lab, CR 207, as well as Ross Hall 423 (next to my office), AS 228, and the IT building computer lab. However, you are free to use another editing program, such as iMovie, FinalCutPro, or Windows Movie Maker. Adobe Premiere and FinalCutPro are the industry standards for video editing. iMovie is pretty good for being a standard software on a MacBook. Windows Movie Maker is pretty awful and I don’t recommend it unless you have no other options. Also, consider downloading  a trial version of Adobe Premiere. The IT building has a beautiful Mac computer in the scantron room that has FinalCutPro on it.

Conceptual Editing. You want to brainstorm and plan out your story before you begin with technical editing. You want to have the story flow ironed out first. If you’re stuck, think about how you’d tell a friend your story. What did you start with? What else did you tell your friend? How does the story end? Also, search for sound bites that address the who, what, where, when, why, how, and so what.

The video editing process is similar to the audio editing process. Remember the tips associated with audio editing.

Keep your story focused — it’s supposed to be about 2-4 minutes.

Project Requirements

Below are the main points you need to consider while working on your project. I will use these elements to evaluate your work.

  • At least 2 sources
  • At least 5 seconds of ambient noise, natural sound, or music
  • Video is between 2 and 4 minutes
  • Video shots are diverse (see camera shots and camera movements above)
  • Speakers are introduced with titles and/or the speaker self-identifies themselves and/or the reporter identifies the speaker
  • Story has a beginning, middle, and end (narrative arc)
  • Editing is smooth

Video Storytelling for Public Relations, Promotions, and Marketing

Video can be used for a variety of different reasons including journalism, PR, marketing, and advertising, and the way that you edit and shoot a video is a little bit different for each one. In each case you want to be able to tell a complete story.

Journalism: Tell the whole story from all sides. Find opposing arguments for interviews so that viewers can get facts from both sides or multiple sources with different things to say. Add b-roll that is relevant to the story even if it is not the most artsy shot it might be the most informative.

Public Relations: In this case you will probably only be telling the story from one side, the side that the company, department, etc. is on, and you video will likely be positive, factual information about the company, etc. the b-roll shots in this type of video should highlight those positive things that the interviewee is talking about. Example

Promotions: These videos are a lot like advertisements. To make an exciting promotional video, you want eye catching shots, that include whatever it is that you’re promoting. A lot of the time these are artistic shots, or fast pace shots that keep the viewer engaged, and interested. Example

Video Storytelling Examples From Past Classes

Example of Promotional Story on a Local Company – Louisa Wilkinson and Taylor Dilts

Example of Journalistic Story on a Non-Event – Hannah Robinson and Esther Seville

Example of a Promotional Story on a Local Band – Kaisha McCutchen and Bianca Coca

Example of Journalistic Approach with No Reporter Narration – Edward Timmons and Miranda Anderson

Example of Journalistic Approach  With Reporter Narrative – Jordan Blazovich and Nick Robinson

Example of Journalistic Approach to an Event Story without Reporter Narration – Kaitlyn Camargo and Lauren Garrelts

Example of Journalistic Approach to a Non-event Story without Reporter Narration – Brittany Hamilton and Scottie Melton

Example of Promotional Approach – Courtney Gifford, Travis Hoff, Sam Weinstein
Border War: The ROTC Story

Journalism for the Web

Back to learning how to write for the web…

The following information is adapted from Ch. 5 and Ch. 6 in the textbook.

What Should I Do When I Interview Someone?

  1. First, realize that your interviews are essential to the story. Without strong interviews, you got nothing!
  2. Be prepared: Inform yourself about the topic, source, and/or interviewee. Do some background research on the story and educate yourself. Informed questions are the best questions.
  3. Practice your interview questions beforehand if you’re nervous or want to feel better-prepared going into the interview. It never hurts to practice. And practice being curious-sounding, professional, and clam rather than accusatory, aggressive, or a know-it-all.
  4. Make small talk before the interview. It relaxes you and the interviewee. And begin the interview with a softball question that you may not care too much about. This will relax the interviewee and yourself.
  5. Keep it conversational. Don’t ask one question after another with no casual feedback and discussion. You want to have a give-and-take, turn-taking conversation, rather than a firing-squad style conversation.
  6. Listen. Really listen to your interviewee talking as you take notes. Think about if you have any follow-up questions about their statements. If you don’t, then move on to the next prepared question.
  7. Prepare a basic outline of questions, but avoid reading them word-for-word. Again, you want to know your questions enough to ask them in a casual way to your interviewee. And you want to ask them when it’s appropriate to in the conversation.
  8. Don’t be afraid to ask follow-up questions. You want to understand the interviewee and the story well. You want to clarify things so you can clearly explain things to your audience.
  9. Ask the “do you have anything else to add before we finish” question. You never know what helpful information will come out!
  10. Allow silence. Silence is awkward. People fill silence with additional banter. It may be helpful banter for your story.
  11. Make eye contact, smile, and nod to show your interest. Try not to make the “uh huh” and “go on” noises. This is a bad habit and will ruin audio interviews if you engage in those behaviors.
  12. Also during the interview…Watch, look, and listen to the environment around you –> Reporters and storytellers are excellent observers and listeners. They are socially aware.
  13. Any other suggestions from you and your classmates?

What Tips Do You Have For Writing A Story?

  1. Write for the specific story angle, not the general story topic.
  2. Make it clear why the audience should care early in the story.
  3. Write a strong lead to pull readers in. Then expand on the lead in the rest of the story.
  4. Set the scene early in the story. Use anecdotes (short stories from your sources).
  5. In the middle, thoroughly explain the issues. Keep emphasizing the importance, so what, and impact of the story.
  6. Stick to facts as much as possible. If opinion is in your story, it should be your sources’ opinions, not your’s.
  7. Write with active, descriptive verbs whenever possible. Good example: Dr. Landreville teaches tomorrow. Bad example: Dr. Landreville is going to teach tomorrow.
  8. Save the most interesting and descriptive quotes for direct quotes in your story. Direct quotes that merely state simple facts, that are poorly worded, or that are boring are not helpful. Paraphrase that information.
  9. Let the subjects speak. We want to hear what the sources, not the reporter, have to say about this story. Facilitate this connection between the subjects and the audience by using a lot of quotes and descriptions (or if a visual presentation, showing the subjects).
  10. Transition well. Avoid jumping around. Avoid incomplete thoughts and unclear associations of story elements.
  11. Proofread! Be your own editor. Cut unnecessary words. Use the active voice. Clean up comma errors. Correct misspellings. Keep an eye out for grammar errors (e.g., its/it’s).
  12. Close the story with a resolution by saying what’s next or summarizing the outcome or providing an interesting or strong quote.

OK, OK, you now have those tips drilled into your head. What’s next to know about writing for multiple platforms? Well, it’s important to understand reading trends.

What kind of readers are out there?

There are three types of readers. You need to write for all three in a story.

  1. Comprehensive readers (read the whole story)
  2. Samplers (read the lead and parts of a story before quickly moving on)
  3. Scanners (read headlines, labels, captions, fact boxes, graphics, and other quick reads)

How should I write for all three types of online readers?

  • Online reading is 25% slower than print reading.
  • We scan more online.
  • We construct our own nonlinear reading experience online.
  • Thus, you need to use concise, informative headlines, summaries, and hyperlinks to more resources about the story.
  • Each paragraph should have no more than 2 or 3 short, simple sentences.
  • A direct quote should stand out in its own paragraph. Do not bury direct quotes in the middle of a paragraph!
  • Attribution side note. Good Example: “Attribute correctly,” said Dr. Landreville. Bad example: Dr. Landreville said, “Attribute correctly.”
  • Use subheadings in your story –> Otherwise known as “chunk” titles.
  • Bold the chunk titles.

Checklist for Blog Post 3

Keep your mind on these requirements and best practices while reporting and writing:

  1. Number of Interviews (3 minimum, face-to-face, unless otherwise given permission)
  2.  Minimum of two relevant photos (if not your photography, then attribute to the photographer)
  3. Two relevant links (at minimum)
  4. Story Structure
    1. Appropriate headline
    2. Sentence length.
    3. Paragraph length.
    4. Reporter presence and voice.
    5. Use of bolded chunk titles.
    6. Transitions between ideas.
    7. Minimum of 750 words
  5. Attribution and Quotes
    1. Paraphrased information vs. directly quoted information.
    2. Location of direct quotes (should be at the beginning of paragraphs)
    3. Frequency of direct quotes (every few paragraphs)

The Next Two Classes…

We will be writing our stories and peer editing our stories. Ideally, you would use Wednesday’s class for finishing writing your story, with having questions prepared for me and Cassie. You shouldn’t be just starting to write your story on Wednesday. Make the most of your time with these in-class workdays and be prepared on Wednesday.

Have a completed draft ready for FRIDAY’S class. We will be peer editing each other’s work.

As always, ask questions if you have anything that you’re confused about or not sure what to do. Best of luck!

First Day: COJO 4530

Students of media, journalism, and strategic communication (e.g., PR, advertising) need to diversify their skills. This class gives you a platform through which to share your work and add HTML, CSS, and Dreamweaver skills to your resume. You’ll create and design your own portfolio website to house your professional work. Get psyched, get inspired! This is fun stuff! Here are some examples of what I mean by portfolio website.

Student Example 1 | Student Example 2 | Student Example 3 | Student Example 4 | Student Example 5 | Student Example 6

DyannDiercks

Course Blog and WyoCourses Website

You can find all of our course materials on this blog as well as our WyoCourses website. I’ll post all of our course materials and assignments here, under the COJO 4530 tab in the left-side navigation column.

Now let’s review the syllabus (found on the COJO 4530 tab and the WyoCourses website).

 

Student Work: Video Storytelling

Alison Clarke and Katelind Higgins

Andrew O’Neill and Ben Banta

Bianca Coca and Kaisha McCutchan

Brooklynn Gray and Max Renton

Charlie McClain and K.C. Schooner

Edward Timmons and Miranda Anderson

Esther Seville and Hannah Robinson

Jordan Blazovich and Nick Robinson

Kaitlyn Camargo and Lauren Garrelts

Louisa Wilkinson and Taylor Dilts

More Video Storytelling Examples

First, 10 minutes to evaluate the class and my teaching.

Now, a few reminders:

1. For the Twitter assignment, follow me on Twitter. I can’t grade your work otherwise.

2. Review the Twitter assignment guidelines BEFORE you tweet. You need at least 10 tweets, two interviews, and hashtags on tweets. You also need to be professional and use newswriting style. And the tweets should show a narrative arc (beginning, middle, and end to the event or story).

3. The tweets are due by next Thurs. 12/11 @ 11:59 p.m.

4. The video project can be promotional or journalistic. It’s between 2 and 4 minutes. You can use whatever editing program you like. There should be two on-camera interviews. There should be a narrative arc as well. Don’t forget the ambient noise.

5. The video project is due by Thurs. 12/18 @ 12:15 p.m.

6. WRITE BLOG POSTS and answer the assignment questions for BOTH the Twitter and video assignments. Please don’t forget this. The highest grade you can get is a C if you forget this (see grading rubrics).

7. There is still time to take the extra credit online survey. The deadline is Thurs. 12/11. Visit: http://kwiksurveys.com/s.asp?sid=2cuc0x5gox88nj0290568

8. Please connect with me on LinkedIn. I enjoy keeping tabs on what my former students are doing in the working world. I may even invite you to be a guest speaker in one of my classes.

 

Below are some additional video storytelling examples. Let’s take a look and discuss as a class.

What was done well? What could be improved?

 

What are you doing for your video storytelling project?

Soundslides Projects – Fall 2014

Edward Timmons and Miranda Anderson

Benjamin Banta and Andrew O’Neill

Hannah Robinson and Esther Seville

KC Schooner and Charlie McClain

Jordan Blazovich and Nick Robinson

Kaitlyn Camargo and Lauren Garrelts

Max Renton and Brooklynn Gray

Taylor Dilts and Louisa Wilkinson

Colby Kirkegaard, Blair Burns, and Nehemie Kankolongo

Look, Listen, Tell, and Show: Soundslides Assignment

Soundslides: Audio + Photos

When you gather audio and photos for a news story, you are making the story more marketable. And as our guest speakers have told us, telling stories in multiple ways makes the story more accessible to your audience. Your story can now be told with images, with sound, or with both. Not only will you have captions for your photos, but you’ll have a voice and ambient noise that compliment the captions.

We’ll be working with Soundslides to combine our audio and photography skills. You’ll be working in groups to get an idea of how to balance everything. It will help to have one person focusing on photography and one person on audio. However, in a future job position, you may to do both tasks, so don’t neglect learning about your partner’s task. Don’t be afraid to make suggestions or comments to your partner if you think it will improve the story. At the end of the experience, ask your partner for their advice and tips so that you can excel at the task you didn’t do this time around.

The topic can be on anything! It can be about sports, science, the environment, technology, health, politics, economics, community affairs, the university, or a personality profile.

For story ideas, you can check out UW’s calendar of events, UW’s public outreach, UW’s news and announcements, WyoVocal, The Branding Iron, and the Laramie Boomerang. The story does not have to be university-related, but that’s where many of you may want to start brainstorming.

Basically, you’re doing an audio story with photos. The audio should tell the story in an engaging way and your photos and captions should compliment your audio story. Of course, your audio story should answer the the who, what, where, and when. But, more importantly, your audio should relay information that is compelling and emotional. It should also tell us how and why. It should make us think and feel the story.

Remember that the audience is more forgiving with the photography compared to the audio. If the audio is done poorly with harsh edits and a confusing storyline, then the audience loses interest and forgets about the great photos you have.

The captions should have all the essential information of the photo: who, what, where, and when. A reader should be able to read the captions and understand the basics of the story without listening to the audio.

Let’s take a look at the Blog Post 8 – Soundslides Project assignment details.

Examples

Here are some student examples of Soundslides stories.

Brooke Eades (The Nutcracker)
Egla Negussie (Dangers of I-80)
Dyann Diercks (UW band)
Jessica Romero and Hailey Hawkes (about Roller Derby)

Tips for Gathering Audio and Photos

When you’re on-location and reporting the story, you should consider what to gather first: the audio or the photos. Of course, if you go to report the story with your partner, then you both can get started at the same time. The photographer can take relevant photos while the audio journalist interviews the subject.

However, when you are working alone in the future…

Collect the photos first if:

  1. You think the light is perfect
  2. You think the light will soon fade
  3. You think the subject is quiet and needs to loosen up before the audio interview
  4. You want to get a feel for the subject’s job, hobby, etc. before interviewing them about it.

 

Collect the audio first if:

  1. You find the subject is nervous about getting their picture taken
  2. The subject is very chatty and is eager to talk with you
  3. The light is not great and you want to wait to see if the light improves

 

When working alone, you have to accept the fact that you’ll probably miss a great photo while gathering audio, and you’ll likely miss a great quote while gathering photos.

And that’s OK.

More tips to remember for gathering photo and audio together:

Gather more information than you think you need.
If you need to gather a second round of photos, then don’t be afraid to do so. If you need to re-interview the subject after first collecting audio and then taking photos, then don’t afraid to ask for 5 more minutes of their time.

Importance of matching photos with audio.
If you collect a great quote, then be sure to also get supporting photos for the quote. If you collect a great photo, be sure to gather audio from the subject that is related to the photo.

Plan for having one photo for every 7 to 9 seconds of audio.
That will help you determine how many great shots you need while on assignment. Thus, for a 2-minute story, you’ll need about 15 photos on the screen for 8 seconds each. For a 3-minute story, you’ll need about 22 photos. And for a 4-minute story, you’ll need 30 photos. For this assignment, your story needs to be between 2 and 4 minutes.

Keep track of what you shoot and what you record.
If you get a photo of a truck driver starting up his semi, then collect audio of the hum and roar of the semi’s engine. Finally, record the truck driver’s answer to your question of how he copes with the loud noises associated with trucking.

You’ll notice that some of your photos lead to more interview questions and ideas of what kind of audio to collect. You’ll notice that some of your audio and ambient noise lead to more photo ideas.

This blog post was based on MediaStorm’s tips on collecting audio and photos. Check them out for more information.

And please see the Soundslides tutorial on YouTube if you need help with the technology. Here’s another help page for Soundslides as well.

Download a free trial of Soundslides so you can work from home, too.

Video Storytelling Project

Video Storytelling

The ability to tell a good story with video is a difficult yet important skill for journalists and communicators to learn. Video is not just on TV anymore — you can find video stories online and on mobile devices as well. You’ll work in teams of two for this project. Let’s partner up and review the project instructions.

1. Pre-Production (Before You Shoot)

Choose a story (or event!) that is well suited for video. This includes stories that have strong visual components and that have any sort of motion.

Identify your sources. Seek out multiple and diverse perspectives for your story.

Write preliminary interview questions after researching the story. Plan out your questions, story focus, and narrative (i.e., beginning, middle, and end) in advance, as much as you can. However, also remember to be adaptable during the interview and ask appropriate follow-up questions.

“Show me, don’t tell me” is the mantra in video storytelling. Find a way to show a story unfolding with video. Minimize the on-camera interviews with people (i.e., “talking head interviews”). It’s more interesting to watch an event occur rather than here about it from an interviewee.

Plan to shoot a variety of angles and types of shots. For suggestions, see Production, below.

Consider how you (the reporter) will fit into the story. Will you appear on-camera to set the scene or conduct an interview? If you’d like to try that, go ahead! Or, will you be completely invisible to the audience, just like you were during the Soundslides project and the audio profile project? Or, will you narrate the story without appearing on-camera?

2. Production (When You’re On-Location)

Plan on shooting before and after the event (if shooting an event). This ensures you have a variety of material to create your edited story from. Also, it helps develop a narrative of before, during, and after the event.

Shoot B-roll. B-roll is supplemental footage that relates to your story. For example, a video story about the the UW track team’s meet should include video of athletes warming up, tying their shoelaces, talking with coaches, etc. These are the shots that you can use to fill time while an interviewee is talking or while ambient noise (e.g., background noise from the event or music) is playing. For a 2-minute story, shoot at least 30 seconds of B-roll footage.

Shoot on-camera interviews with your sources. When shooting interviews, remember to look around at your surroundings. Is it relevant to the story? Can you move somewhere else to get the interview that is not as chaotic or loud? Just as with the audio interviews, encourage your sources to relax, act natural, and provide context to the answer they are giving to your question. Don’t be afraid to re-shoot a question and ask a question again. Oftentimes, the source gives a better and more eloquent answer to your question the second time you ask it.

Optional: Shoot on-camera reporters. If you’d like to appear on-camera as a broadcaster at some point, then this project is a good opportunity to practice. You can introduce the story and provide context to the significance of the story. You can transition with your voice and appearance between story segments. And you can conclude the story and provide a summary or “what happens next” statement.

Shoot a variety of camera shots. Whether you plan to be a visual journalist or not, you need to understand and learn how to execute the types of shots. See this website for visual examples and descriptions as we go over the definitions below.

  • Extreme wide shots. Shows the whole entire scene of an event, location, or story. These shots give viewers information about where the story takes place. They set the scene and give context early on in a story.
  • Very wide shots. Shows less background and shows the subject in the large scene. The subject is barely visible.
  • Wide shots. Shows the whole subject so the visual emphasis is on the subject rather than the background.
  • Mid shots. Shows the subject even closer, but a bit of the scene is still visible in the frame.
  • Medium close-up shots. Shows the subject even closer and the subject’s features and expressions are more of the focus.
  • Close-up shots. Shows the subject’s head to shoulder area.
  • Extreme close-up shots. Shows only the subject in the frame, such as the subject’s eyes and nose.
  • Cut-in shots. Shows some other part of the main subject, not the face and shoulders.
  • Cutaway shots. B-roll that is used as transitions between shots or to add information not offered by shots of the main subject or scene.
  • Point-of-view shots. Shows a scene from the subject’s perspective such that you feel like you are in their shoes.

 

Optional: Camera movement techniques. Camera movements are more advanced production techniques. They may not work out well if you do not have a high-quality video camera. Thus, I would avoid these techniques unless you have prior experinece with video or unless you have a high-quality video camear. If you decide to use camea movements, see the techniques below:

  • Zooming: Going from wide-angle to close-up or vice versa.
  • Panning: Moving the camera horizontally.
  • Tilts: Moving the camera vertically.
  • Tracking: Moving the camera around accordingly to track the subject.

 

Composition concerns: Give headroom so the interviewee has space above their head during the shot. Avoid distractions in the background of shots. Remember the rule of thirds still!

3. Post-Production (The Editing Process)

Editing programs. You have access to Adobe Premiere Elements in this lab, CR 207, as well as Ross Hall 423 (next to my office) and the IT building computer lab. However, you are free to use another editing program, such as iMovie, FinalCutPro, or Windows Movie Maker. Adobe Premiere and FinalCutPro are the industry standards for video editing. iMovie is pretty good for being a standard software on a MacBook. Windows Movie Maker is pretty awful and I don’t recommend it unless you have no other options. Also, consider downloading  a trial version of Adobe Premiere.

Conceptual Editing. You want to brainstorm and plan out your story before you begin with technical editing. You want to have the story flow ironed out first. If you’re stuck, think about how you’d tell a friend your story. What did you start with? What else did you tell your friend? How does the story end? Also, search for sound bites that address the who, what, where, when, why, how, and so what.

The video editing process is similar to the audio editing process. Remember the tips associated with audio editing.

Keep your story focused — it’s supposed to be about 2-4 minutes.

Project Requirements

Below are the main points you need to consider while working on your project. I will use these elements to evaluate your work.

  • At least 2 sources
  • At least 5 seconds of ambient noise, natural sound, or music
  • Video is between 2 and 4 minutes
  • Video shots are diverse (see camera shots and camera movements above)
  • Speakers are introduced with titles and/or the speaker self-identifies themselves and/or the reporter identifies the speaker
  • Story has a beginning, middle, and end
  • Editing is smooth

 

Video Storytelling Examples From Past Classes

Example of Journalistic Approach to a Non-Event Story with Reporter Narration – Zachary Laux and Cameron Patey
Online Gaming

Example of Journalistic Approach to a Non-Event Story Without Reporter Narration – Nic Behnke and Shane Staley
Snowy Range – New Terrain Park

Example of Journalistic Approach to an Event Story without Reporter Narration – Tiffany Le Gal and Anna Rader
MLK Jr. Days of Dialogue/March @ University of Wyoming

Example of Promotional Approach – Courtney Gifford, Travis Hoff, Sam Weinstein
Border War: The ROTC Story

Student Work: Soundslides Projects

Alex Breckenridge and Scottie Melton

Dani Esquivel and William Bailey

Rachel Vliem and Rachel Wagner

Brittany Hamilton and Sami Jo Heitsch

Brett Kahler, Alex Landt, and Nichole Grady

Boyd Deuel and Miles Englehart

Denise Caskey and Jeff Nelson

Chris Banks and Keavy Ferrall

Alex Bradfield and Ashlyn Mazur

Sarah Dvorak and Carolyn Hageman

Older posts

© 2017 Website Design

Theme by Anders NorenUp ↑