This time I am going to share about CSS Animation and it’s use in Web Design. And a little project that use pure CSS to spice up your resume web page.
People may ask, “Why use coding to do animated effect when we already have other easier tools?”
First, compare to pure motion graphics, CSS3 and HTML5 animations have the strength of interactivity, that the the animation could be triggered by an action make people involved in the design. This action could be such as scroll, mouse over, drag and draw or more advanced like postures of iPhone. Yes, it is greatly used to web app games already. However, since we are talking about web page, we are more concerned about the content and the message that needs to be delivered and how animation enhance the delivering, not distract or overwhem the viewers.
And some people may ask about flash? The future of Adobe Flash has been debated for a while over the community. The basic idea is the less distributions of flash player that many mobile devices don’t support it anymore. Maybe that’s why adobe is now developing edge animate, a software looks extremely like the hybrids of Flash, Dreamweaver and After Effect, and the result is a HTML5 page.
Here is some examples of the CSS animation (some might be integrated with jQuery. )
This example is an application similar to the previous monster one, interacting with you mouse movement, however presenting it as the relationship of light and shadow. And the idea of letters’ silhouette is BRILLIANT!!
This example shows the simplicity beauty of css animation. And also how it could be interact with the viewers.
In my opinion, the animation on website doesn’t need to be fancy and complicated. however, it has to be integrated with the design and help the message delivered. Otherwise, it will only be something eye catching (though it always partly served) but with less purpose. Of course this is just my personal aspect and idea, we are very welcome to have people discuss and share the thought with us!!
We don’t even realize how well we can remember the logos around us. Even given only part of it, most of us are able to tell which the logo is in a second. Now let’s start play, tell me how many you can tell from a letter draws from the original logo before looking the answer.
Today there are more and more brands enter into the international market. Though English is the most spoken language among the world, having a logo in the local language will help a company to enter the local market easier. Here are some examples I found.
1. Fedex logo in English and Arabic: the purple and orange combination and the hidden arrow are the key elements for these logo. While Arabic sentences are read from right to left therefore this Arabic version of arrow also points to the left. However it reminds me of the redesign of the daily object by MASAHIKO SATO. His design based on the normal perception of left as departure and right as arrival. And since Japanese also need to be read from right to left, I think the arrow pointing to left may lead to a wrong perception.
2. CNN logo in English and Spanish: just an accent note indicates “Spanish” in a second. It’s just smart.
Since I come from China, and have seen a lot of internationally recognized brands entered the Chinese market and doing well. I think how they brand themselves in Chinese is interesting.
3. NESCAFE logo in English and Chinese: The top bar stretched from the first character is the key element of this logo. Also the Chinese type keeps the original style. However, the first character is bigger than other characters, which makes the Chinese version look unbalanced. While it doesn’t hurt the original English logo. One reason could be the English version gets its accent note on top of last letter.
4. Pepsi logo in English and Chinese: The symbol and same style of the italic type keep its consistency.
5. Johnson&Johnson logo in English and Chinese: the swirling type inherit from the English logo makes the Chinese type local while consistent with the English version. I like this execution.
6. Lay’s logo in English and Chinese: the graphic composition keeps its consistency. While the Chinese type keep the feeling from the English, the kerning could be improved for sure.
Besides these, I also found some other conclusions made by other website.