Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The sixth principle of design will 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 the 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 really cool way of adding movement to a webpage.
There are tons of other really sweet effects and widgets that you can add to your webpages with jQuery. Check out the jqueryui.com website for examples. In addition, if you're developing pages in apps for mobile, definitely check out what you can do with jQuery mobile like page transitions and popups at the jquerymobile.com website. You might also really love the jQuery ThemeRoller where you can download predesigned jQuery themes for your site as well as roll your own designs.
Lastly if you're a flash action script or java script coder looking to harness your skills in the jQuery world, check out the green sock animation platform at greensock.com. With HTML 5 and CSS 3 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 is 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.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 51031 Viewers
117 Video lessons · 38806 Viewers
113 Video lessons · 81602 Viewers
65 Video lessons · 11696 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.