Visual Storytelling For Web: Tips And Techniques

uwpocketmedia.orgvisual storytelling for webtips & techniques
@filizefe– 2009

STORYTELLING
In every culture all around the world, storytelling is how people connect with one another. State-of-the-art technology will change, but state-of-the-heart storytelling will always be the same.
–Sid Ganis, President of the Academy of Motion Picture A&S,
78th Academy Awards 2006
Throughout the history, storytelling has been an important communication tool in building a community.
In every culture all around the world, storytelling is how people connect with one another.
The forms of stories and the media have changed with the shift in digital technologies.
And the role of visual messages in the communication process expanded .
Today, everybody is a potential filmmaker on web thanks to pocketmedia.

Pocketmedia MEANS…
“everyone is
a communicator, a filmmaker, a journalist,
a content creator, a community organizer,
a rabble rouser, a message disrupter,
a salesperson, a marketer,
a broadcaster, a narrowcaster.”
– Hanson Hosein
Director - UW Digital Masters DegreeIndependent filmmaker

Storytelling process

Pre-production (planning)
Make a research about your topic
Translate thoughts into words
Try to write one/two sentences logline for your story, (a TV guide description)
What is the goal of your story?
Objectives? Try to make an outline of your story
Who is the audience?
What is the medium (distribution channel/s)?
What makes this story an interesting story?
Are there any legal issues or ethical considerations?
Clear copyright/places and people
Paperwork: site/character release, permissions
Decide who will have the copyright of your story?
Visualize the story
List some possible introduction and endings for your story that will make the audience react the way that you would like

Production (shooting)
COMPOSITION
In visual arts, composition is the placement or arrangement of visual elements in a work. It is the organization of the elements of art according to the principles of art. (Composition, 2009)
In video production for web, although the principles of art are not strictly applied, visual grammar will help us to convey our message in a better way.
Framing, camera shots, camera angles and camera movements are the vocabulary of the visual storytelling language. They are very important in shaping the meaning of a story.

FRAMING
It is a technique used to bring the focus to the subject. (Framing, 2009) It is all about selecting what to show in the entire image. Framing an action shows our intention about the subject. It needs a decision making what to put in the frame and what to leave out of it. It is an exercise to control over the content to display in frame.
It is important to maintain proper head room, chin room, and look room in order to make sure the frame does not overpower subjects or objects in the frame. (Osgood, 2009)
Head room: It is the space between the top of the subject’s head and the top of the frame.
Chin room: It is the space from the subject’s chin to the bottom of the frame.
Look room: It is the space left in the frame for the subject to talk or look in a particular direction.

CAMERA SHOT TYPES
A camera shot is the amount of setting that is seen in frame. They are used to demonstrate different aspects of setting, themes and characters.
Long (Wide/Establishing) Shot: shows the entire scene area where the action is to take place.
Full Shot: It shows the entire object or human figure.
Medium Shot: The characters or a character from the waist up. It works well to show body language.
Medium Close-Up: This shot includes a space equivalent to a person's head and their shoulders.
Close-Up: Taken from a close distance in which the scale of the object appears relatively large and fills the entire frame to focus attention and emphasize its importance. This enables viewers to understand the actor's emotions.
Extreme Close-Up: This shot contains one part of a character's face or other object.
Point-of-View (POV): This is a shot that shows what a subject is looking at (represented through the camera). The camera is positioned where the character stands. It puts the reader in the place of the character.
Over the Shoulder: is a shot taken over the shoulder of the subject. This type of shot is very common when two characters are having a discussion and will usually follow an establishing shot which helps the audience place the characters in their setting. It retains the identification with the subject but adds more context about relationships.(Keller, 2006)

CAMERA ANGLES
A scene may be shot from several camera angles. Camera angle marks the specific location at which a camera is placed to take a shot. It shows the relation to the subject and affects the viewer perception of that subject.(Camera Angle, 2008) Camera angles can amplify the dramatic impact of the scene. (Osgood, 2009)
High Angle: Looking down upon a subject. The camera points down on the action, to make the subject appear smaller. This angle will diminish a character. The character/s will look vulnerable or small. These angles are often used to demonstrate the power relationship to the audience.
Eye-Level Angle: Looking in equal level. This puts the viewer on an equal footing with the character/s. This is the most common angle as it allows the viewers to feel comfortable with the characters.
Low Angle: Looking up at a subject. The camera points up at the action, to make the subject appear larger. This is the opposite of a high angle. It elevates the stature of a character in the story and makes them look more powerful.
Keep in mind!: Keep the camera at the subject's eye level, unless you have a good reason not to.

VISUAL AESTHETICS
We follow some basic principles in visual arts in order to maintain the visual aesthetics. The two important visual principles are ‘The Rule of Thirds’ and ‘The 180 Degree Rule’:
The Rule of Thirds: The design principle works on the theory that an unbalanced composition will be more interesting and dynamic. (Osgood, 2009). We divide the frame into nine equal part by two horizontal and two vertical imaginary lines and place the subject on the intersection points.
The 180 Degree Rule: This rule is about the camera placement during a scene to ensure a consistent screen direction. It is best understood in the context of an interview. When you cross the axis of 180 degree in camera placement, it will appear that the characters are not looking to each other. (Osgood, 2009) You can assume yourself as a viewer looking to the stage where the action takes place.

CAMERA MOVEMENT
Dynamic Shot: This shot has camera moves/movements.
Static Shot: This shot has no camera moves/movements.
Camera movements are important compositional elements and they represent the viewer’s viewpoint or perspective. They are used to follow or reveal an action.
Pan: Horizontal shift in viewpoint from a fixed position; like turning your head side-to-side. Horizontal movement can suggest travel or momentum. Movement from left-to-right across the screen is more common for western cultures. (Osgood, 2009)
Tilting: Vertical shift in viewpoint from a fixed position; like tipping your head back to look at the sky or down to look at the ground. Vertical camera movement can suggest growth and freedom from traditional bounds. Tilting down can suggest danger or overwhelming power. (Osgood, 2009)
Zoom: It is a single shot taken with a lens that has a variable focal length, moving from a wide-angle shot to a telephoto shot in one continuous movement.
Keep in mind!:
Avoid zoom. Move physically closer to the subject when necessary.
Move when subjects move. Pan the camera to a specific place or cut to your subject in motion.

Keep in mind!
Clean your camera's lens.
Look at every corner of the frame and the background.
If there's bright light, make sure it is behind you and not behind your subject.
If using artificial light, try to get more than one light source to fill the subject.
Use a tripod or keep it steady http://www.vimeo.com/4406909
Shoot a wide establishing shot of the scene, a medium shot, and then your content.
Shoot "B" roll (close-ups, environment, subjects being referenced, hands moving)
Start recording at least 5 seconds before action begins and keep rolling a while after the action stops.
Shooting with flip camera http://www.vimeo.com/3207870 , http://www.youtube.com/watch?v=NG1LKJ_ZRrk

Interview shooting
An interview shooting requires research, planning, coordination, error-free technical production and creativity to achieve the best results:
Research:Context – subject – interviewee
Planning: prepareyour questions (open-ended) & prepare your equipment
Coordination: time/budget – People - Places
Technical production: Good audio - Proper shot composition - Good lighting
Creative input: Open your eyes and listen, be flexible and use your creativity as you go along
Keep in mind:
Try telling your stories through people: Ask them to convert your questions to a complete sentence in their answers.
Check the interviewee’s appearance before start shooting.
Relax! You will get the best interviews when the subject is relaxed and at ease.
Have a written release or ask to record his/her verbal permission on tape.

interview SHOOTING– audio
What types of microphones and techniques will be used to capture the audio?
If the microphone is on the camcorder, the closer that you are to the camcorder, the better that the sound will be.
What is the natural sound? Will it play any role in your story?
Check the background noise , listen to the sounds around you for a minute. In a place with a lot of background noise it is likely that your subjects voice will be drowned out, so pay attention to your surroundings.
Cell phones
Noisy air-conditioners
Traffic
Always monitor the sound through headphones during the shoot
Make a test recording before the shoot
Don’t be afraid to ask the interviewee to redo parts of the interview that might be unusable due to content or technical difficulty.

Post-Production (editing)
Start with freely available software: either Windows Movie Maker for Windows, or iMovie for Mac .There are Vimeo basic tutorials for iMoviehere and Windows Movie Maker here.
Organize all of your material. Put all still photos, music files, storyboards and narration files into a folder on your computer and label it Project X.(Keep all files and materials in one location on your computer)
Download the footage from your camera onto your computer. It is easiest to open it up like an external drive, copy and paste the video files to your ProjectXfolder. Alternatively, you may capture/import the files through the editing software you use.
Import your files into your editing system. Each of the programs is a little different but generally you can either drag and drop or click File –> Import.
Start putting the pieces together. Record a quick narration, lay down a music track and try some simple transitions. FYI, effects often take away more than they add so keep it simple - let your subjects tell your compelling story. Make sure you save every couple minutes. (Flip Video Resources )

VIDEO DISTRIBUTION
Sites With a Social Focus: These sites are all connected with a larger social change mission. Browse through them to see which might work best for your organization.
DoGooder - DoGooderTV enables nonprofit organizations to present new videos and existing media assets to new audiences. Once site visitors see the compelling stories of nonprofits, DoGooderTV gives them a direct way to donate to the organization, join, volunteer or simply find out more information.
YouTube Non-Profit - Video is a powerful way to show your organization’s impact and needs, and with a designated “Nonprofit” channel on YouTube, you can deliver your message to the world’s largest online video community.
The HUB - Through the Hub, individuals, organizations, networks and groups around the world are able to bring their human rights stories and campaigns to global attention and to mobilize action to protect and promote human rights.
MTV Think - MTV has launched Think to give young people everywhere the opportunity to make your life, your community and your world better. The Think community provides the tools so you can do just that.
Causecast - Causecast, dubbed “a one stop philanthropy shop” by TechCrunch, is a platform where media, philanthropy, social networking, entertainment and education converge to serve a greater purpose.
MySpace Impact - MySpace’s hub for social and civic engagement – a channel for the causes and campaigns MySpace users care about. As part of the mission of IMPACT, we assist not-for-profit organizations and political campaigns in their efforts to make a positive difference in the world
TeacherTube - Our goal is to provide an online community for sharing instructional videos. We seek to fill a need for a more educationally focused, safe venue for teachers, schools, and home learners.
General Video Hosting
If you need a place to host your videos in order to embed on your own website, share through email, or spread through a social network, the following sites might be good for you.
Vimeo - Blip.tv - YouTube - Facebook - MySpace
Source: flip video spotlight

DO’S OF STORYTELLING
Keep It Short– max 2 min.
Keep It Simple– focus on one main topic
Keep It Fluid – story arc: beginning-middle-end.
Keep It Moving – use narration/music.
Keep It Interesting – variety of shots, lighting.
Practice, Practice, Practice – shoot, download, review, edit

DO’S OF STORYTELLING

references
Engeli, M. (2000). Digital stories: The poetics of communication. The IT revolution in architecture. Basel: Birkhauser.
Fields, A. M., & Díaz, K. R. (2008). Fostering community through digital storytelling: A guide for academic libraries. Westport, Conn: Libraries Unlimited.
Flip Video Resources http://www.flipvideospotlight.com/resources/production.aspx
Keller, D. (2006). The History and Future of Storytelling: From Myth to Mash-ups. Seattle, WA: Microsoft
Keller, D. (2009) COM547C Class Notes and Instructional Videos – MCDM University of Washington http://www.vimeo.com/drewke
McClean, S. T. (2007). Digital storytelling: The narrative power of visual effects in film. Cambridge, Mass: MIT Press.
Osgood, R. J., & Hinshaw, M. J. (2009). Visual storytelling: Videography and post production in the digital age. Boston, MA: Wadsworth Cengage Learning.
Wikipedia references are already linked to the related definitions.

http://filizefe.wordpress.com	210
http://storify.com	80
http://depts.washington.edu	51
http://www.slideshare.net	42
http://copyeditor.tumblr.com	31
http://filizefe.com	23
http://www.clasesdeperiodismo.com	14
http://guides.lib.washington.edu	12
http://apprentieweb.blogspot.com	4
http://www.computerskillsworkshop.blogspot.com	3
http://mtmbonita.blogspot.com	2
http://computerskillsworkshop.blogspot.com	2

Visual Storytelling For Web: Tips And Techniques

by Filiz Efe on Aug 31, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 474

Statistics

Visual Storytelling For Web: Tips And Techniques — Presentation Transcript