Skip to content


Category Archives: Design Patterns

  1. mnemo map – Search Visualization

    image Most of the sites that I’ve featured recently that have to do with content visualization have really been about deep discovery. If you take that notion and apply it to a search engine you have mnemo map. With mnemo you can search Yahoo!, flickr, and YouTube by tags, synonyms and translations for any search term. mnemo, “combines the technologies of social networking, search engines and other data sources to help you formulate search queries and find really relevant information”. I have to say the site is a very refreshing way to search! Thanks.

    Continued…

    No comments - Posted in Search, Search Patterns, Visualizations. - Tagged with , , ,

  2. Relay – AJAX Directory Manager

    image There are many directory management tools out there, however, Relay is worth checking out. Relay is a free, downloadable AJAX powered directory manager that feels very much like a desktop application. Features include, drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts. Awesome open source AJAX app!

    Continued…

    No comments - Posted in Design Patterns, Organizers. -

  3. ThickBox – AJAX Modal Window With Functionality

    image Thickbox includes the functionality of the Greybox technique with that of Lightbox, to product a great model window solution. The script allows you show structural markup and images in the window. The html that is shown inside ThickBox is pulled from the server using AJAX. Additionally, Thickbox uses a compressed version of jquery rather than the close to 100k of Prototype & Scriptaculous to create a lightweight model window solution.

    Continued…

    No comments - Posted in Design Patterns, Model Windows. - Tagged with , ,

  4. Prototype Window Class

    image Model windows or lightboxes are being used on many sites today. I’ve been using them for over a year now in a variety of ways including login boxes, bookmarkletts, and alerts. Prototype has come through again by producing a series of samples that you can use yourself. This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. It has been tested on Safari, Camino, Firefox and IE6. Enjoy!

    Continued…

    No comments - Posted in Design Patterns, Model Windows. - Tagged with ,

  5. Tagnatica – Flash and flickr Mashup

    image Since flickr released it’s API we have seen many wonderful mashups, however, Tagnatica is now one of my favorites. The user interface is very intuitive and easy to use. Simply type in a flickr tag on the initial screen and you’re presented with a circle made of of categories in that tag. As you hover over the images you can click on them and drill down through different categories or launch into a new one. Very fun.

    Continued…

    No comments - Posted in Design Patterns, Images & Media. - Tagged with , , , ,

  6. Bubblr – Fun and Games With Flickr

    image There are many applications that use the Flickr API to enrich our web experience, Bubblr is now at the top of my list. Bubblr allows you to search by tag or person and then to have some fun with the images. In their first screen you can search flickr images and then add thought and conversation bubble to them. Then you can publish them and send them to a friend. It feel like making a comic strip out of any flickr image. Additionally, there are two fun games to play. Memry and Phrasr are both worth checking out. Have fun!

    Continued…

    No comments - Posted in Design Patterns, Images & Media. - Tagged with , , ,

  7. Feed Rinse – Easy RSS Filtering

    image In my opinion Feed Rinse is one of the best designed products I’ve seen in a while. Their name matches the function of the application, the branding works well with the core message and the overall user interface is intuitive and stylish. The real gem is the user interaction and experience. The process of importing and rinsing your rss feed is fast and easy to use. The free version is limited to 3 feeds, however, it seems to have full functionality, except for profanity filtering. A very well designed application!

    Continued…

    No comments - Posted in Design Patterns, RSS Patterns. - Tagged with ,

  8. Keotag – Search and Create Tags

    image The keotag site makes it easy to search for tags in multiple search engines, social bookmarking sites and gives you the ability to create your own tags. The interface has a nice tasked-based navigation which gets the user to the information they need quickly. The user interaction is seamless with fast search results from 14 search engines and social bookmarking sites. Keotag also gives you the opportunity to create your own tags at Technorati, del.icio.us and icerocket. In short the keotag search blazes.

    Continued…

    No comments - Posted in Design Patterns, Tagging Patterns. - Tagged with ,

  9. Attack of the AJAX Activity Indicators

    image OK, I have to admit this demo makes me feel a bit like I’m sitting at my computer in 1997 looking at a clip art site full of spinning email buttons, however, these AJAX activity indicators are essential to web applications which use asynchronous requests. When an action happens through the use of an XMLHttpRequest the user needs some kind of indication that an action has occurred. A large percentage of the activity indicators that my company uses are custom built for the individual company, however, circumstances such as timelines and budgets often get in the way of custom indicators. This page offers an excellent array of stock indicators. Caution: starring at this demo too long will make you sick. smile

    Continued…

    No comments - Posted in Activity Indicators, Design Patterns. - Tagged with , ,

  10. pixoh – Edit pictures online

    image pixoh is an easy to use online image editor. The user experience is tasked based and very intuitive. You can edit your first image from the by either submitting a URL, browsing your computer or you can simply play with one of their sample images – no login required. Next, you’re presented with an edit screen where you can rotate or resize your image. Finally, you can save your image to the desktop in several different formats. pixoh also includes a bookmarklett so you can edit and save images from any website. Very cool.

    Continued…

    No comments - Posted in Design Patterns, Images & Media. - Tagged with , ,

  11. Fluxiom – Knowledge Management Tool

    image Fluxiom is not live yet and I have not live demoed it, however the fact that the script.aculo.us JavaScript library was developed as part of fluxiom gives me high hopes that the demo is just a taste of some amazing UI elements to come with the full release. Fluxiom is a web-based knowledge management tool. It is an easy and elegant way for small to medium sized teams to manage digital assets and share them with clients, partners and co-workers. Fluxiom is a product and will be available for a usage fee. Although it’s closed source, some components it consists of are available as open source. Since script.aculo.us was developed as part of fluxiom, you can basically have most of the user interface effects and controls that fluxiom uses in your application for free.

    Continued…

    No comments - Posted in Design Patterns, Organizers. - Tagged with , , ,

  12. iOutliner AJAX Idea Organizer

    image The iOutliner marketing website has a to-the-point task based user interface with a nice mix of gradients, icons, and high contrast large fonts. The application itself is smooth, intuitive and fast via an AJAX layer. A very clean user experience.

    Continued…

    No comments - Posted in Design Patterns, Organizers. - Tagged with , ,

  13. BubbleShare's AJAX Image Zoom

    image I’ve been interested in image galleries and slideshows since I started designing for the web in 1996. Recently AJAX and web 2.0 social features have changed the way we view and think about photo sharing. BubbleShare has just released a new AJAX image zoom feature that takes web-based image viewing to the next level. When you click on the BubbleZoom link, you’re presented with an AJAX magnifier that allows you to zoom in on any part of a image just by hovering over it with your mouse. This is an intuitive and helpful addition to any image viewing application.

    Continued…

    No comments - Posted in Design Patterns, Images & Media. - Tagged with , ,

  14. AJAX Fisheye List Widget Demo

    image Dojo Tool Kit has come up with a new web based non-flash menu which is easy to use, and is loaded with the “wow factor”. After ten years of designing with standard navigational constructs we finally have many new and exciting possibilities to help users navigate websites. The AJAX Fisheye List Widget is basically a javascript version of the Apple Dock. As a mac owner I love the user interaction with Apple’s Dock, however, until now this has only been available on the web through Flash. Watch out, this could well be the next Yellow Fade Technique.

    Continued…

    No comments - Posted in Design Patterns, Navigation. - Tagged with , ,

  15. TurboWidgets Demo

    image TurboWidgets are essentially a library of very useful user interface and interaction widgets that are well designed and easy to implement. In most cases it’s always better to design custom UI elements for each client or application. However, recently many clients who are more interested in being “first to market” with a product are fine with customizable “stock” elements for alpha launch. That’s where products like TurboWidgets fit well into the design process. All of their AJAX widgets are highly customizable as their style is all CSS based. A very nice product.

    Continued…

    1 comment - Posted in Design Patterns, Widgets. - Tagged with ,

  16. Feedblendr's RSS Aggregator

    image Combining RSS feed has always been problematic for a non-tech oriented blogger. Feedblendr has created an intuitive user interface for their web application that anyone can use to combine as many feeds as they like. The user interface is superb with oversized fonts and form input fields, overlapping header-to-content-area graphic and an effective use of color. An outstanding user interface and interaction experience.

    Continued…

    No comments - Posted in Design Patterns, RSS Patterns. - Tagged with ,

  17. Logahead – AJAX Weblog

    image Finally, someone has produced a blog that uses many of the current popular AJAX widgets along with web 2.0 social features. The seventeen year old developer has produced a great user experience with an inline admin, tagging, and rss support. Adding content is enhanced by inline editing, deleting and creating of all of the page content. The themes are controlled with one click. and since they are CSS based they are easy to develop and configure.

    Continued…

    No comments - Posted in Blog Patterns, Design Patterns. - Tagged with , ,

  18. Wufoo AJAX & Flash Form Builder

    image Wufoo uses flash objects and the Prototype JavaScript framework to create a very fluid user experience for building web forms of any kind. Currently, Wufoo is not released to the public, however, from the look of the demo, it will be a very easy to use, and a valuable tool to web designers and developers. The process of creating a form is very intuitive and and smooth. In short, I didn’t need to read any instructions to create my first form. The user interface is a nice mix of color, readability and non-liner shapes which creates an excellent skin to the smooth user interaction.

    Continued…

    No comments - Posted in Design Patterns, Form Design. - Tagged with , ,

  19. AJAX Tabs

    image I’ve been using CSS tabs for many years now and have always wished they had a bit more functionality. AJAX Tabs uses the time tested Sliding Doors method for CSS tabs and implements a very useful AJAX layer. This functionality could add some very dynamic user interaction. Among a few of the features offered are, the ability to specify default open tabs, AJAX preloading, and tab based javascript events. Think of the possibilities.

    Continued…

    No comments - Posted in Design Patterns, Navigation. - Tagged with ,

  20. BloxPress – AJAX Wordpress Theme

    image BloxPress has created the first completely modular AJAX theme for a popular blog software. Their vision was to create a MyYahoo or NetVibes.com like interface with a blog backend. The user experience is superb with drag and drop modules, RSS, Flickr, etc… You can also add or delete as many modules as you like by simply clicking the Add / Remove Content link under the logo. Reseting to the original default settings is facilitated easily by clicking one link. Hopefully, at some point this type of web 2.0 / AJAX theme will be available for all of the major blogs API’s.

    Continued…

    No comments - Posted in Blog Patterns, Design Patterns. - Tagged with ,

  21. Spongecell's AJAX Calendar

    image The user experience for most online calendaring systems is slow, non-ituitive, and frustrating. The thing that usually turns me off first about online calendaring is the constant page reloading. Reloading the calendar to add, delete, and edit entries is time consuming and cumbersome. Spongecell, solves all of these issues with the intelligent use AJAX features and widgets. For me the highlights include drag and drop event times into any date, instant event editing via AJAX popovers, and a fast send to friend feature. A great user experience!

    Continued…

    No comments - Posted in Calendars, Design Patterns. - Tagged with , ,

  22. Ajaxian's Star Rating System

    image In a day when many users have dozens if not hundreds of feeds, ratings and reputations systems are becoming increasingly important in the web 2.0 space. Ajaxian has implemented a nice wordpress hack of the votio rating system.The AJAX user generated ratings system is intuitive and fun to use. A good user experience with instant results.

    Continued…

    No comments - Posted in Design Patterns, Ratings. - Tagged with , ,

  23. digg spy Live Page

    image The digg spy page is essentially a real-time view of digg. As users digg stories they instantly appear on the spy page without reloading the page itself. These asynchronous content loads make using the digg spy page a bit like watching a movie. The other nice UI element on the spy page is the asynchronous tab views which let you, spy on all stories, spy on queued stories and spy on front page stories only.

    Continued…

    No comments - Posted in Design Patterns, Live Pages. - Tagged with , ,

  24. onesens Messaging

    image Great page presentation with a nice use of dark tones, highlight colors and gradients. The thing I like best about onsens is their user experience. Sending a message is intuitive and visually appealing. Your message text is added through an live edit on the first screen. Clicking “next” gives you a nice slide and fade into the next screen. Here you can asynchronously add an image, change background colors, and drag the text around in you new message. Finally, all you have to do is click the large send button. A great user experience.

    Continued…

    No comments - Posted in Design Patterns, Messaging. - Tagged with , ,

  25. Podbop Entrance Page

    image Excellent use of color, oversized text, and a well designed map navigator are highlights of the Podbop start page. The interior uses the same high contrast and highly readable layout. The dark brown and lime green work well together with the white font. The site has a great user experience with inline previews of the band’s mp3’s categorized by date and location.

    Continued…

    No comments - Posted in Design Patterns, Search, Start Pages. - Tagged with , , , ,