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. )

ORIGINAL HOVER EFFECTS

Hover effects, sounds so normal and boring, can be very fancy with CSS animation.

THE CURSOR MONSTER

An animated cute monster that will interacte with your mouse cursor!! Sounds so fascinating~!!!

THE LETTER HEADS

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!! 

OUR SOLAR SYSTEM

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!! 

Therefore, the coming up post next week I am going to write a simple tutorial about using CSS and HTML plus a little bit JavaScript (jQuery) to have an resume infographic on the website animated!!

You can see a basic example here.

Since I am still in my learning stage, hope in the meantime of writing this series of tutorial, I can come up with more great stuffs to share with you guys!

by Vivi Feng

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.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

And here is the answer, how many are correct?

by Vivi Feng

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.

Carksberg’s international logos:

from logodesignlove

And of course, Coca-Cola’s logo

from Coca-Cola

This is our first post, hope you like. And also, please provide more logo in different language version, we can talk, comment and critic on it.

Thank you for reading!