0
Standard Post Production Multimedia techniques are trending in Web Typography
In motion pictures, animations, and multimedia productions, it is not uncommon to take the footage and add effects in post-production. From scrolling title sequences such as in Star Wars to masking and reveling techniques such as that used in Once Upon a Time, post-production has been a large part of the industry. It is not surprising that website design has followed the trends of the top cinematic movies and televisions shows, especially where typography and navigation is concerned. Here are a few areas where typography trends in website development are catering to the 3D effects and post-production visualizations.
Distorted Focus
The distorted text effect gives the navigation a three dimensional feel to the space. The navigation is set up with scroll over features so that those elements which are not selected are blurred and scaled down while the page that is being navigated to is in clear focus and scaled up. By using this simple technique, the page gets some Z axis accents (depth) and it adds a small level of user engagement.
Those which use the distorted focus technique on their site should be cautious of the colors and the font that is chosen. Thinner fonts may look good in the foreground, but when they are skewed and blurred, they may fade into oblivion. It is recommended that when choosing a font that you use the bold or bold condensed version over the thin text and that the colors contrast the background heavily but aesthetically.
Animated Typography on Splash pages
Custom typography has gained animation. Using brush masking techniques (which is the most common as it is a simple plugin in After Effects), the typography can be animated to look as though it is being revealed on the main page. Such animations do take a bit of planning as the text has to be made in a graphics program such as Illustrator and brought into a motion effects program. However, if you have the time and the patience to get the timing and the look down right, it is a powerful way to present your splash page.
Should you not wish to have an animated gif image or flash on your splash page, parallax scrolling can simulate a revealing of your text to an extent. I would not recommend using such on the page for text (such as using it on a text logo), but I would use the parallax scrolling for an image under the text so that the text appears to move upward.
The shadow
A trend that has become more common in website typography in the past year is the re-emergence of the shadow on text. From a designer’s perspective, I find that the text resembles the old Word Clip Art effects and looks a bit too cliché and juvenile for most pages. Essentially, the text is mirrored and black is added at a specified angle to the text. This is supposed to give the impression of light hitting the text and thereby making the text 3D. The problem with this technique is that the designer cannot calculate the lighting of the viewer. So, if there is a strong light in the office from the right and you have the shadow on the right, the website looks a bit off. Granted, most viewers will not know why they are feeling the design is flawed, but there you have it.
3D text
The solution to the shadow is to have 3D text. There are several models available which allow the designer to input their text in to the 3D model and use such in the site. Additionally, you could hire a 3D artist to make your logo from scratch or to animate your existing typography, specifically if it is to be used for marketing videos on the webpage.
Before you start your typography effects consider its impact on your page
Where the typography of websites is clearly taking to the more dynamic and more 3D look, it is essential that designers keep in mind that type is meant to be read and understood primarily and then appreciated for its aesthetics. If the font is not readable, does not look professional, and is not compatible with the browser, it is pointless. Additionally, if you have too many effects on your page the navigation could be the thing that causes the site to load slower or the page to crash. Finally, the SEO may suffer if the type is converted to an image. Keywords and content which is changed into the image format will not register as standard SEO content apart from perhaps the tag data.
Overall, consider the trend and effect you want to use. Is it beneficial to your site? Will it drive viewers to engage in your site, or is the desired look just something you want to do because everyone else is jumping on the bandwagon and you don’t want to be left out?
Image: Copyright iterateCGI 2016
