recycled web visuals and other web tools

October 10, 2007 5:25 PM

Design Patterns, Reuse, recycle, but don’t reinvent the wheel unless necessary. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. One of the many tools, tutorials etc. from Smashing Magazine's list, Best of September 2007.

"Design Patterns by Brian Christiansen at UI Engineering. Via."

posted by nickyskye (9 comments total)

These do not appear to be Design Patterns, either in Christopher Alexander's original application to architecture, or Gamma et al. ("Gang of Four") to computer engineering.
posted by orthogonality at 5:41 PM on October 10, 2007

September was apparently a kickass month in webdevland.
posted by mullingitover at 5:45 PM on October 10, 2007

The comparisons in those image galleries are fun. Thanks for the post.
posted by tepidmonkey at 6:03 PM on October 10, 2007

I like the patterns that you get when you look at a page of thumbnails, like this. You wind up with something that'd be about right as a CD jacket for whatever minimal/glitch/IDM/flavor-of-the-month electronica subgenre that's coming out of, say, Finland at the moment.
posted by flapjax at midnite at 7:02 PM on October 10, 2007

Huh, I thought of a different design pattern.

Patterns for increased usability is good in my book.
posted by spiderskull at 7:50 PM on October 10, 2007

FYI I'm a co-author on The Design of Sites, a book on user interface design patterns for the web. I've also met the author of Designing Interfaces: Patterns for Effective Interaction Design, another book on UI design patterns. Both of these books try to stick more to Alexander's notion of patterns.

You might also be interested in Martin van Welie's site on Interaction Design Patterns.

You might further be interested in Damask, a tool (created by my former office-mate) that uses design patterns as the basis for designing user interfaces. Think of Damask as a variant of the DENIM sketch-based rapid prototyping tool.

One problem with UI design patterns is that they tend to stay only at the UI level, and don't give much support for implementing them. I've heard from some people at SAP and eBay that they have some internal system for cataloguing UI design patterns and linking it with HTML output, though I've never seen them in action.

Another idea we never got around to (primarily because we didn't have a good angle of attack) was trying to automatically detect UI design patterns in web sites. This would be useful, for example, for automatically transforming a web site from desktop usage to mobile or speech, since you had more semantics or pre-canned interactions you could use.
posted by jasonhong at 8:23 PM on October 10, 2007 [5 favorites]

ooh, That Martin van Welie's site on Interaction Design Patterns you linked is sweet and Damask too. Thanks for adding great links to the thread jasonhong.
posted by nickyskye at 9:41 PM on October 10, 2007

I love these but wishes there was a 'one search engine'/repository of all of them. I don't care the format - could be FactoryJoe's on Flickr, could be anything else. Having a bunch of them across multiple domains means lots of hunting.

I put together a bunch of the domains at Rollyo and I'll be sure to add any posted in this thread and check if AskMe has any related questions.

Damask looks like a great start, Jason. And I don't know how that automatic UI detection would work - but it sounds like a fantastic start.
posted by rmm at 9:38 AM on October 11, 2007

I love factoryjoe's galleries but concur that they aren't really patterns in the Alexander => Gang of Four / ward's wiki => Tidwell lineage of the term.

Of course they are patterns in the ordinary sense, but I see some value in preserving the context (when to use), problem, solution core pattern format.

But I'm biased, as I'm currently curating Yahoo's pattern library, both our internal one and the public one, and working on a next generation version of same.

In our internal library we do tie patterns to specs and code, examples and templates, etc. It's a bit harder to do that in the open one.

I'm dubious about ever detecting patterns automatically, but the pattern-authoring community has been talking about ways of federating or sharing the various libraries and repositories. There's no one-true-definitive pattern language, though: there are many.

Another good thing to document is antipatterns.
posted by xian at 5:57 PM on October 11, 2007