Students will gain an overview of the Principle of Movement and discover a few simple ways to add a sense of movement and dynamism to a web layout.
- [Voiceover] The sixth principle of design we'll explore is movement. There are several ways to add a sense of movement to a web layout including working with line and shape. In this lesson however, we'll concentrate on adding movement with various scrolling and animation effects. In graphic design, we can say that the principle of movement refers to the suggestion of action or direction, since nearly all graphic design is two-dimensional. On the web however, we can work with both implied, and actual movement.
For instance, movement can be the invisible path that our eyes follow across a design. Or, it could be the illusion of motion that happens when a design or illustration includes static elements such as horizontal, vertical, curved or diagonal direction lines. The same thing happens with angled and curved shapes, or even a rotated object. In fact, even illustrations and photographs can imply movement. However, motion need not always be implied, it can also happen in a web design through actual movement.
So let's explore a few ways to use scrolling and animation to create real movement in a web design. First, when building websites with background images on the body element, the default scrolling style is scrolling, whether you specify it or not in the CSS. A scrolling background travels with the text as you scroll down the page like so. The other option that you can use, for scrolling with a background graphic is fixed. With a fixed background, the image stays put and the content scrolls on top of it like this.
Another way to add movement is with parallax scrolling which when done well can be really wonderful. Essentially what happens with this type of scrolling, is that the background images shift slower than the content in the foreground creating this wonderful illusion of three-dimensional depth. Easing, is one of several popular jQuery animation effects. It's another cool way of adding movement to a webpage. There are tons of other really sweet effects and widgets that you can ad to your webpages with jQuery.
With HTML5 and CSS3, as well as with jQuery and other code tools like GreenSock.com, designers are creating all kinds of great interactive moving and animated features to their sites without the use of flash. This not to say that as a designer, you also need to be a coder or programmer, but it does mean that you may want to familiarize yourself with some of these tools so that you can speak the same language to any programmers you might hire to assist you with these features. However you add a sense of movement to your web projects, remember that movement brings with it a sense of interactivity for the site visitor.
Which can really help make your site, more attractive and engaging.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices