Today’s post highlights the design of 10Words, the blog of RichPurple digital agency. Using desaturated purple for links and sidebar fading gradient, the design uses soft hand-drawn illustrations placed on noise texture background to frame the main content. The illustrations along the sidebar are an overkill and create too much visual noise, especially given that most of the entries do not have a lot of content. The social icons found in sidebar and below each blog post further reinforce the decoration style set by the pencil-themed rendering of the main site logo.

Trident aims to be a general-purpose animation library for Java applications. However, most of the time people talk and refer to animations in the context of pixels on the screen, be it for transitions between different states, rollover effects, smooth scrolling of large content and what not. Trident comes with built-in support for Java based UI toolkits. The three UI specific requirements are addressed by the core Trident library:

• Automatically respecting the threading rules of the UI toolkits
• Providing property interpolators for classes that represent graphical objects of the UI toolkits
• Repainting application windows that have continuous animations

Today i’m going to talk about the last point – repainting application windows. Trident has two special timelines – org.pushingpixels.trident.swing.SwingRepaintTimeline and org.pushingpixels.trident.swt.SWTRepaintTimeline. These are simple utility timelines that can be used to continuously repaint the contents of the specific window / component on every timeline pulse. For example, if you have a continuous emulation of fireworks, you can have “worker” timelines updating the model objects that represent the firework volleys, and one repaint timeline that updates the entire screen based on the current state of all firework volley model objects. This allows you to separate the model updates from the view updates.

However, as Rob Eden pointed out to me this week, these two classes repaint the window / component on every timeline pulse. This can result in unnecessary repaints if the model updates are not done on every timeline pulse as well. In the “snake” example, the model is updated only when the mouse is moving. Once the mouse has stopped moving and all rollover timelines are done, there are no changes to the model, and continuously repainting the screen consumes unnecessary CPU resources.

To address this, both SwingRepaintTimeline and SWTRepaintTimeline now have three new APIs:

1. setAutoRepaintMode(boolean) – by default the auto repaint mode is true. Application that wishes to control the repaint will call this method with false.
2. forceRepaintAtNextPulse() – will make the repaint() / redraw() call when the next pulse is fired. This will throw an exception if the timeline is in auto-repaint mode.
3. setRepaintRectangle(Rectangle) – allows to dynamically change the rectangle to be repainted. Can be used if the bounds of the view that represents the specific model can change dynamically (e.g. when the user resizes the application window).

The snake examples for both Swing and SWT have been updated to show the recommended usage of the first two APIs. Click the button below to run the WebStart version of the Swing demo:

If you’re interested in testing this functionality in your application, take the latest 1.3dev drop (code named Diamond In The Sky) for a spin.

Today’s post highlights the design of EmotionsLive.com. A warm, unique and memorable illustration highlighted by soft drop shadows is the main design element. A simple navigation menu along the top edge borrows some of the saturated colors from the stockings to separate between the three menu elements. The playful tone set by the main illustration continues in the header typography, with handwritten ligatures and a tree sprout projecting from the letter “o”. Custom framed portfolio thumbnails blend beautifully with the autumn green background which uses horizontal gradient to breath some life into the surrounding white space. Combined together, the design elements create an elegant and lasting impression.

Today’s post highlights the design of JosephPayton.com. Set in various shades of steel blue, the site features an intricate header that combines multiple illustration techniques for a unique and memorable appearance. The background layer starts with a soft geometric pattern, which is overlayed with a few watercolor strokes and a pencil vignette drawing. A three-tone color palette used for the stylized portrait of the designer creates a friendly and humane feel, further inforced by the custom typography used for the header bullet points. The next header layer combines the navigation menu section (set in a slightly darker shade of the brick red color from the portrait) and the social icons bar. Both use simple rollover highlights and rounded tab appearance for better balance. While these two sections use drop shadows to raise them above the illustrations, an even harder drop shadow separates the entire header from the main content. This separation is completed by overlaying and extending the fingers into the main section.

A two-column layout in the main section highlights snippets of recent blog entries and the latest tweets. The attention to details shows in every element of the snippets – consistent usage of custom fonts for the titles, title rollover effect, watercolor strokes behind the moleskin notebook, the dark mahogany color of the notebook cover that continues the color continuum of brick reds in the header section and slightly raised “callout” bubbles with the comment count. A simple footer section set in deep steel blue completes the usage of custom illustrations on top of watercolor strokes.

When you visit the main page, move the mouse over the header portrait illustration for an attractive fading transition that invites you to visit the designer’s portfolio.