Week 11 Page 7: Kinetic Typography
Using Type in Motion!Kinetic or motion typography adds a whole new dimension to design. In print design, the type is "glued" on the page so meaning and interest need to be conveyed through typeface selection, contrast, formatting and placement. In the screen world, typography can be fluid and moving. This gives the designer the opportunity to reinforce a message through the way type moves on the screen. For example: to express a "sad" emotion type can appear to droop or slide, to express anger type can appear quickly and grow to imply a shouting tone. It can be dynamic, expressive and has the added benefit of attracting the viewer's attention. Kinetic typography had its origins in the movies and TV (think title sequences, rolling credits and advertisements) but now it is positively ubiquitous in the screen design world too. How many tablet or phone apps can you think of that have some kind of type in motion? What about websites? Many landing or splash pages seem to feature creative kinetic type! So why the sudden rise in the popularity of kinetic typography? The main reason is advances in technology: downloading data is faster and the software to create such animation has far more capabilities than before. Here's an example of kinetic typography, just to whet your appetites! (I thought you'd appreciate the English accent too!). Click on the image below to view the animation.
How to Produce Kinetic Type Animations!Traditionally, digital editing software (like Adobe After Effects) and web animation software (like Adobe Flash) have been used to create kinetic typography but there are now some new players on the scene including Adobe Edge, Apple Motion and even PowerPoint! These programs all offer the capability of moving, reshaping, turning, fading type and then setting specific timing for each action. The key is to make short, compressed animations that download and play quickly! Here's an animation made in Powerpoint (just to prove it can be done!). Click on the image to view the movie in youtube or view in this screen by clicking the arrow in the box below!
General Guidelines for Designing with Kinetic Type!When you add motion to typography, there are several important things to keep in mind:
Readability & Legibility: Remember our discussion about the differences between reading onscreen and reading in print? The screen is a more difficult environment for reading so if you add motion to that process, the situation is even worse. Sans serif fonts (without the little "feet" on the strokes!) are a much better choice for motion typography because of the clarity of their letters. You can apply a variety of effects to them and they will still remain mostly readable. Using a serif font designed for print, such as Times New Roman, can be disastrous when you start to add motion effects. So... stick to strong, simple fonts for your kinetic typography! And just use a couple of fonts per design. There's nothing wrong with picking a font with some character, just make sure it isn't too detailed, with fine, thin strokes. Which of the following fonts do you think would be good or bad choices for a kinetic typography project? Contrast: This is another important consideration for creating type in motion. Use strong, contrasting colors for type and background rather than similar values or subtle tints. In our readability discussion, we already talked about the optimum contrast: Black type on a white background. You should apply the same rules (even more strictly) to kinetic typography! Look how great the contrast is in the following kinetic typography project! The simple black font on the light yellow stands out well. This enables us to read the words quickly enough to keep up with the changing animation. (Click on the image to play the movie!) Timing: Timing is everything in animation! The speed at which content appears, disappears and moves can really change the viewer's successful understanding of the message. We already know that reading onscreen takes longer, add animation effects and it's even slower. Be sure that the important parts/words stay around long enough to be digested (3 seconds might be a good basic guideline). Have someone else look at the animation with fresh eyes because you know what it's supposed to say and can read it much faster! Effects: It's so tempting to throw every effect available into an animation! The most successful animations tend to be ones that are simpler. Less is more! The effects are chosen purposefully to emphasize the meaning, not just because they can be done! Animation effects can include: slow or fast motion in a particular direction, moving along a curved path, stretching or shrinking, fading, glowing, bouncing, blur etc. Simplicity: With all the effect and motion options, it's easy to be tempted into a circus of animation! Just keep in mind that "content is king." Your goal is to communicate the message, first, and create a visual feast, second. By being selective in your animation and font choices, your kinetic typography will be effective AND attractive! Of course, if the animation is purely for attraction, then a visual animation feast might be permissible! Lastly... here are some examples of kinetic typography. As you watch them, think about the guidelines provided above and see how well they apply them! Notice how the motion adds extra meaning and emphasis to the message.
Type in Motion on the WebThe kinetic type on the web tends to be brief and more subtle. It adds some visual spice and additional meaning without disrupting download times or access to the content.
|
