VT’s Tech Blog

Yahoo’s UI Blog and Design pattern Library have interesting topics on patterns to follow while designing UI’s for Web 2.0 applications. In the old web, an action almost always followed a page reload or an intrusive Javascript pop-up, indicating that the action was complete. In the age of Ajax, how do we communicate the action completion to the user?Transitions are a powerful way to communicate change in a user interface. Transitions can communicate a change in relationships between elements on a page or a change in an element’s state. Additionally, when interactions are complex or involve important changes transitions can be used to slow down an interaction allowing the user to “see what just happened.” During lengthy processes, transitions can be used to make time seem to pass faster by distracting the user during the waiting time. 

Transition Parent – Yahoo! Design Pattern Library

With the widespread acceptance of Ajax (and the resurgence of Flash) new ways of interacting on the web have emerged. In many ways, these interactions are not new. Interactions like drag and drop and inline editing have been mainstream on desktop applications for over 20 years. What is new, though, is the emergence of these idioms on the web. 

Link: Design Pattern: Invitation

Another interesting link on this topic: Mind Hacking Visual Transitions

Various implementations of Drag & Drop sortable lists using JS and CSS.

“In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.”

Link: Drag & Drop Sortable Lists with JavaScript and CSS

[tags]Javascript, CSS[/tags]

Here’s a good tutorial on now to create an interactive rating system using CSS. You can combine this with Ajax to create a rating system for your site.

Links to the Tutorial:
Creating a Star Rater using CSS
CSS Star Rating Part Deux

Here’s a cool site which hosts Open Source Web Designs. They have around 1500 designs available for you to use on your site for free.

Link: Open Source Web Design