Examples of Using
Animated GIFs
Documentation | Educate | Video Presentation
Animated GIFs turn a single picture into a sequence of pictures that can be displayed in one place. They are useful for websites and on-line documentation to animate a series of pictures together.
GIF stands for Graphics Interchange Format and is based off old technology developed in 1987. Because it’s old technology, it’s simple. Basically, GIFs utilize the same concept as a cartoon, which takes many illustrations in a sequence and creates a movie. GIFs are small versions of such animation, hence the name Animated GIF.
content-smith LLC can create animated GIFs from a series of pictures, maps, computer screenshots, basically any series of related images, and create a GIF. Rather than displaying a video on a webpage, which requires the use of a streaming service such as YouTube or Vimeo, a 30 second-long GIF can be used that doesn’t require the extra steps and complication of working with video.
Listed below are several examples of animated GIFs that we have created for both our clients and our own BackRoadsWest.com travel guides. These examples include:
- The animated map of Southwest Utah’s “triple junction” of three great and well-known ecosystems in the American Southwest
- An animated flowchart that explains a business process to employees
- An animation that shows employees how to use a particular data input screen in a software system
- A panorama that shows a 360° view of a viewpoint
Animated Map
This GIS was created using a base map, four shaded areas (from the Colorado Plateau to the Virgin River Watershed), and multiple captions to show where the three regions meet. The components to this map were used in our The Triple Junction of Southern Utah video available on YouTube.
Maps present a lot of information to the viewer. Adding animation like this to a map will enhance how the viewer will comprehend the information they are seeking to learn. Assembling components and layers of a map together is a great application for animated GIFs.
Animated Flowchart
Rather than explaining a business process with words, flowcharts are useful for describing the flow of that process to employees that need to learn and understand them. Add animation to a flowchart, and the process becomes easier to understand.
The old saying, “a picture is worth a thousand words” is multiplied when the picture or diagram is animated. In this case, the animation makes the flowchart come alive as it goes through each step in a process.
This particular animated flowchart describes what two employees need to do in order to accomplish a task. In this case, a passenger that is scheduled to ride a bus cannot be located. The operator (a bus driver), which are the red-colored boxes in the flowchart, needs to first follow certain steps. Then, they must contact dispatch, which are the blue-colored boxes. At that point in the flowchart, dispatch staff needs to follow certain steps. When someone new needs to learn this process, they can watch this flowchart to understand the entire process.
Data Input Screen Simulation
Training new employees how to use computer software so that they can do their jobs is no easy task. Standard manuals on 100s, sometimes 1,000s of pages, is not an ideal way method for training. Training videos are very helpful, which we promote, but can be expensive to produce and takes a lot of time for an employee to watch.
Enter the animated GIF. Used in conjunction with on-line help systems or knowledgebases, which we also develop, GIFs are an easy way to deploy video-like training, they’re easy to create and are much shorter. Either one or a series of GIFs can show an employee how to interact with a entry or lookup screen.
The GIF below shows how to lookup a client’s record. Large captions are used in the GIF to point out where the user needs to click and type. Mouse movements are highlighted in yellow. Mouse clicks are shown with pulsing red circles. When the user needs to type, actual letters appear.
The GIF below shows a user how to use a screen to delete trips that were assigned to an employee. Again, large captions point out where the user needs to click and type.
How to use a Map
The GIF below shows a user the intricate steps of reviewing a vehicle’s GPS location between two specific times using an embedded map in a software application. The GIF points out specifically where the user is supposed to click and type, as well as what to type into each input field.
Panorama
This GIF demonstrates how a panoramic view can be represented in a series of still pictures taken by a camera that is rotated 360°. Rather than being limited to how a panorama would be displayed on a webpage or other means, along with the visual distortion a panorama often creates, a GIF with all the pictures in a series can display the entire panorama in a series and without any distortion.
This particular panoramic animated GIF was shot a drone by taking a single picture, then rotating it about 30°, until the full 360° is reached (a series of 12 individual pictures). Captions pointing out points of interest in the individual pictures are added later.
Panoramic animated GIFs are particularly useful in travel-related or DMO websites where there is a need to showcase places of interest or destinations. Since they are easy to publish on a webpage, they are a great alternative to using video.
pointing out the junction of three major ecosystems in green