Design GalleRIA
link
Fidelity Media Player. Search videos and podcasts for investment insights, expert analysis or market reports.
Nice little app from Fidelity Labs. Good example of the principle “Stay in the Page” - easy transition between selecting and watching a video.

Fidelity Media Player. Search videos and podcasts for investment insights, expert analysis or market reports.

Nice little app from Fidelity Labs. Good example of the principle “Stay in the Page” - easy transition between selecting and watching a video.

link

If you tell someone about a great idea, and they say “That’s a great idea!”, it’s not a pattern.

If you tell someone a great idea, and they say “Yes, we do something like that too!”, that’s a pattern.

AgileProductDesign.com (and probably someone before them)
link

Prezi is the zooming presentation editor.

So, there are a number of good presentation editors out there. I use SlideRocket or 280Slides, both really well designed web apps. But Prezi is different. Tim Leberecht at frog design explains: “Prezi differs radically from PowerPoint in that it requires an alternative mental model: Information is displayed in a non-linear fashion. That’s also true for mind-mapping, but Prezi offers additional linear paths, knowing that “time is linear” when you present, as Adam Somlai-Fischer put it. Users can jump in and out of these paths and are thus given enormous flexibility in storing and presenting information.”

For everyone out there designing and developing an application, look at the love and care invested in crafting the Prezi experience. The marketing site is phenomenal, the application is smooth and professional, and the product itself inspires creativity. This is more than picking the right RIA framework, and more than just designing for usability- I would suspect this team has a remarkable technical lead AND creative director AND experience designer. This product raises the bar for all of us.

link
Well Spaaze doesn’t seem to have a tag line or description, but go play with it anyway. Especially if you are thinking out using an Ajax toolkit for something interactive like this. This is built with Dojo!

Well Spaaze doesn’t seem to have a tag line or description, but go play with it anyway. Especially if you are thinking out using an Ajax toolkit for something interactive like this. This is built with Dojo!

link

The New York Times: The Jobless Rate for People Like You. Not all groups have felt the recession equally.
They have some good designers at the NY Times. Check out this interactive chart. There is a very nice example of the column browse control for filtering the chart, as well as hover  actions built into the chart itself.

The New York Times: The Jobless Rate for People Like You. Not all groups have felt the recession equally.

They have some good designers at the NY Times. Check out this interactive chart. There is a very nice example of the column browse control for filtering the chart, as well as hover  actions built into the chart itself.

link
960 Grid System Variable Grid System-The variable grid system is a quick way to generate an underlying CSS grid for your site.
A small app within the larger site for quickly generating CSS. Quick and responsive.

960 Grid System Variable Grid System-The variable grid system is a quick way to generate an underlying CSS grid for your site.

A small app within the larger site for quickly generating CSS. Quick and responsive.

link

ChessJam is an Adobe AIR that you install on your computer that enables you to play live online chess with players from all over the world in a fun environment rich with graphics.

This is an extremely well designed application. Beautiful graphics, clear instructions, great interaction design. Check it out: http://www.chessjam.com/

link
Flurry Analytics provides mobile game and application developers real-time user data to recognize opportunities, proactively fix problems and grow revenue.
This interface is pretty similar to Google Analytics. If they wanted to make it really rich, they could take a look at some ideas from the saturnboy blog, where the author uses Axiis, Degrafa and Flex to create deeper data visualizations:
http://saturnboy.com/2009/11/interactive-visualization-with-axiis/

Flurry Analytics provides mobile game and application developers real-time user data to recognize opportunities, proactively fix problems and grow revenue.

This interface is pretty similar to Google Analytics. If they wanted to make it really rich, they could take a look at some ideas from the saturnboy blog, where the author uses Axiis, Degrafa and Flex to create deeper data visualizations:

http://saturnboy.com/2009/11/interactive-visualization-with-axiis/

link
Swivel: Where Curious People Explore Data.
If you are designing or building anything  for customers who are stuck in the world of Excel, this is an interesting application to play with. Great invitations, clean layout, thoughtful design for standard workflows, great contextual help, and a very nice approach to showing errors (list of issues on the left below the chart, and clicking on an individual error shows a help tip where the actual issue is on the spreadsheet). Nice!

Swivel: Where Curious People Explore Data.

If you are designing or building anything  for customers who are stuck in the world of Excel, this is an interesting application to play with. Great invitations, clean layout, thoughtful design for standard workflows, great contextual help, and a very nice approach to showing errors (list of issues on the left below the chart, and clicking on an individual error shows a help tip where the actual issue is on the spreadsheet). Nice!

link

SwebApps helps you create your own iPhone application fast, easy & affordable. No programming or coding or a Mac needed just use our online interface. Created by www.mindset-designs.com

Swebapps does an excellent job applying the “Provide Invitation ” principle - by using a little sticky note to guide the customers first interactions with the application. The sticky note is replaced with real content, in context, as the user gets deeper into the design workflow. Nice job!

link
Google Wave- instant communication and collaboration can take place within and across platforms like email, IM, blogs, social networks and other communication media – all in real time and all in a web browser.
Another excellent example of using RIA technology to reshape an existing experience- or in this case, combining a bunch of previously silo-ed experiences into one interface. Wave uses n information application structure, the portal screen layout and a bunch of rich UI controls (see http://designingwebinterfaces.com/rich_ui_controls)  including a multiple document interface, sliding panels, dynamic search, carousels, auto-suggest, advanced grids, overlays, toolbars…

Google Wave- instant communication and collaboration can take place within and across platforms like email, IM, blogs, social networks and other communication media – all in real time and all in a web browser.


Another excellent example of using RIA technology to reshape an existing experience- or in this case, combining a bunch of previously silo-ed experiences into one interface. Wave uses n information application structure, the portal screen layout and a bunch of rich UI controls (see http://designingwebinterfaces.com/rich_ui_controls)  including a multiple document interface, sliding panels, dynamic search, carousels, auto-suggest, advanced grids, overlays, toolbars…

link

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:
- Balsamiq Mock-ups + Nakpee
- Any wireframes + Protoscript
- Prototcasting (using click-throughs and screencasts to convey requirements)
- Atlas and other development environments + visual layout editors

This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.

*Note-To skip through all the individual note cards- jump from page 7 to page 50 where you can get to the matrix - also at http://designingwebinterfaces.com/rich_ui_controls

link
Fuze Meeting is a free web conferencing tool that allows desktop and screen sharing  on Mac, PC, and iPhone.

This is a pretty well designed Flex application. Easy to start using, nice layout. Good example of the “Stay in the page” design principle, and hub-and-spoke application structure.

Fuze Meeting is a free web conferencing tool that allows desktop and screen sharing on Mac, PC, and iPhone.

This is a pretty well designed Flex application. Easy to start using, nice layout. Good example of the “Stay in the page” design principle, and hub-and-spoke application structure.

link
CrazyEgg will help you improve the design of your site by showing you where people are clicking and where they are not.This app epitomizes all six design principles (from Designing Web Interfaces: Principles and Patterns for Rich Interactions). Don’t miss: affordance invitations, all four views with integrated analytics instead of text based reports, and specifically the ‘Confetti’ view which uses animation in an interesting (and useful) way.

CrazyEgg will help you improve the design of your site by showing you where people are clicking and where they are not.

This app epitomizes all six design principles (from Designing Web Interfaces: Principles and Patterns for Rich Interactions). Don’t miss: affordance invitations, all four views with integrated analytics instead of text based reports, and specifically the ‘Confetti’ view which uses animation in an interesting (and useful) way.

link

Designing for Interesting Moments by my co-author and Director of UI Engineering at Netflix, Bill Scott.

Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience — or worse to create confusion in the user’s mind.

In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn’t work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).

These are conveniently summarized in six over-arching design principles.

* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.

This talk goes hand-in-hand with Bill Scott & Theresa Neil’s book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.