spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dlab / 9903
Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next
 
  Realistic dynamism
 
 

The simplest way to add some vitality to a composition is to use a photo or a drawing of a naturally dynamic object with an expressive motion theme, such as a car, a running businessman, or a flying bird. Of course such an image is likely to turn into something more important than just a dynamic add-on, so you'll have to exercise your entire inventory of design approaches (such as the analysis of colors, shapes, sizes, textures, etc.) in order to find a good way of inscribing it into your composition. Here we'll only focus on those requirements and limitations that result from the dynamic nature of such an element.

First off, to be able to move without hindrance, an object needs some empty space around it. That's why an element with a strong motion implication may require rearranging the neighboring elements so as to give it some more elbow room, otherwise its motion will "bump into a wall" without producing much of a dynamic effect - or even causing an undesirable impression of an obstacle or entanglement.

If there's more empty space on the trailing side of a dynamic object than in front of it, then the movement is perceived as decelerating, about to stop. This is sometimes accompanied by bending the vector of motion downwards, as we're accustomed to seeing a downwards movement as a final stage of a flying body's trajectory.

On the other hand, if the object has more room to move ahead than behind it, or if its "nose" is above its "tail," we perceive its motion as accelerating and "uphill." Interestingly, when the object is positioned horizontally and symmetrically with equal intervals on both sides, the perceived motion is not only of constant velocity but, in most cases, pretty much slowed down and unpersuasive. This is because we view asymmetry and acceleration as necessary attributes of any psychologically significant motion. Constant linear motion and the state of rest are equivalent not only in physics, but also in design (compare the visual equivalence of straight lines and circular arcs, both having zero curvature range).

Any motion introduces a vector, i.e. a line or direction which, as any other line in your composition, must be carefully coordinated with other dominant directions on the page. Of course in the case of complex, non-geometric images (such as a running figure), this line can be determined only vaguely, and it therefore naturally tends to "snap" to horizontals and verticals. To make perception more seamless, I'd recommend emphasizing the supposed direction of motion by a parallel line positioned close to the dynamic object.

On the other hand, the imprecise yet powerful direction defined by a realistically dynamic image could be used to add a diagonal theme to the composition in an obvious yet unobtrusive manner. As I once mentioned, horizontals and verticals are dominant in almost any composition if only because of the rectangular nature of computer screen and window borders, so breaking this directional monotony in a persuasive way may be difficult. Dynamic images, with their implicit direction without an explicit line, may be very useful here.

Let's see an example. On the Kasparov vs Deep Blue site (that I already referred to before), the expressively dynamic athlete photo defines a diagonal descending direction (top left to bottom right), which is additionally emphasized by the background arc of the earth's horizon seen from space. Both elements avoid being too precise in this directional innovation: both the arc and the athlete's arms and legs are not straight lines, and their implied directions are close but not parallel, producing a fuzzy bunch of diagonals rather than a single definite direction.

 

Figure 1
  Fig. 1:  Horizontal statics vs. diagonal dynamics on the Kasparov vs. Deep Blue site (click the image to visit the page)  

  This lack of definition is not coincidental. One of the fundamental oppositions on the page is that of the static horizontality of the menu bar at the top (supported by the heading lines and the striped texture overlaying the photo) and the slanted dynamism of the photographic elements. Since any contrast works best when the objects are opposed in more than one aspect, it was a good idea to augment the contrast of horizontal vs. diagonal by the oppositions of definite vs. fuzzy and geometric vs. photographic.  

Comments are welcome
Produced by Dmitry Kirsanov and

JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

Created: Mar. 16, 1999
Revised: Mar. 16, 1999

URL: http://www.webreference.com/dlab/9903/realistic.html