C5.   Space

Style Sheets

1.

For a simple example of internal style sheets,  Click here

2.



Blurring means action, as does the posture.

3.



Strike point is accentuated .

4.



He just hit a ball - we assume.

5. Example of axes implying movement.




6.



Flow lines.

7.



Why doesn't this work?

8.



Here is animation - but what does it mean?

9.



here is an animated gif - it is important that there is some obvious connection, and also that the animation is not so fast we cant make that connection. Note here the connection is a logical one - if the connection was a sensory one, like for example a leapard leaping, our visual system would easily make the connection

10.



Why doesn't he get closer? (because he isnt moving?)

11.



Here is an example of useful animation - the chalk and eraser make the animation meaningful.

By contrast consider this one ...

12.



This is an example of storyboarding People look for the story. Is there one?

13.



In cartoons, we combine the frames to form a story. This is another example of story boarding. This time all the frames are there. In both cases the frames must be designed carefully

14.



Realism is created by color and texture variety,gradients.Real colors etc are rearely "pure"

15.



A static picture that gives a vivid sense of action via shock points and flow lines.

16.



Here is a good example of depth created in a flat picture

17.



The background indicates movement. Sound is simulated by text.

18.



This picture is very clear. Action posture plus animated movement, blurry at the point of impact, and the facial expression makes the purpose clear.


19.



Here is a tiny gif that works. Why?




This uses flow lines to indicate action, and the sense of movement gives a good association with what the button is all about

20.



Hear the background moves, which could be distracting, and soon we want to press to stop the flashing. However in a large screen the moving background draws attention to the ENTER sign. Could be good use of attention, if then you press enter to make it stop.

21.



Animation and 3D. Here's something that really gets our attention. Notice how the moving ball gets attention, and then there is time to read the text.

22.



What is moving? the car or the background> To us it is the car. But actually, it is the background. Why do we assume the car is moving? (this is a gif)

23.

Driving movie

Here is an AVI of the same type of thing

24.



Animated images are a set of static images played consecutively. We dont see the "gaps" but assume the car is continuously rotating

25.



Here is a less oppressive rainbow line.

27.



Depth and shadow. If you use it - KEEP IT SHORT AND SIMPLE

28.



Same

29.



Small but effective. It doesnt take much to evoke an image

30.



Santa is an example of a familiar object.

31.



Note that the background is blurred.

32.



Here is an example of depth indicated by perspective lines and shadows.

33.



A scene is naturally and easily taken in, the title and menu are included in the scene.

34.



Can now see why the lines are seen as not parallel - imagine them pushed into the page along with the created experience of depth.

35. Dino movie

A good example of pan, cut and zoom     Dinosaur

Some Sites




Catches your attention straight away. Has a menu. Allows search.


Does this tell you what Starbucks is all about? Probably they know it is as much about a quite cool place to sit as the coffee



Notice the person is there - we just cant see all of them. Compare this with just putting up a faucet or hose!