Making a library of interesting webdesign patterns
When I stumble upon an interesting graphical webdesign, I always feel sorry that I can't store a screenshot in a structured accessible way for future reference. Bookmarks just don't really work when you want to store only part of a website or if there are several interesting bits in a design. For a couple of days I had been looking for an efficient way to do just this, e.g. cut out screenshots; tag and store them as pain free as possible and preferable do this in collaboration with a community of webdesigners. So far I haven't found the holy grail yet, I ended up with the following 3 partial solutions:
Kwout provides a bookmarklet that when clicked opens the webpage you were visiting with a Javascript area selector. After you select an area, it saves a screenshot onto the kwout server. You can then do some basic processing, submit the screenshot to a number of websites or email it. There's a couple of downsides:
- Your screenshot is made public on their website, so you can only submit pictures where you have the proper copyrights.
- There is a limitation to the screenshot size.
- Since the page needs to be reloaded by kwout, it only works with webpages that are not behind a user login.
The second contender is Screengrab, a Firefox addon. I know there are several addons that will do similar things and you might not want to add another addon to your browser, but screengrab allows you to save parts of a webpage as well as full pages (e.g. not just what's above the fold). So it's useful also for customer interaction. The downsides are:
- Clumsy interface that requires 3 clicks to open up the addon interface.
- Only local storage supported (there is a fork of the addon that allows you to store your pictures on 1 specific picture service).
The third contender patternbrowser I found after a retweet from Bert Boerland. It's a website from the Design Department from the College of Potsdam that has a great collection of design patterns. It's a community site, so I'm sure that there is some great potential here. It will become one of my favorite sites once they:
- Include an easy to use upload system (e.g. maybe similar to what Kwoat is doing?).
- Emancipate design examples and not just store them as examples only accessible from a pattern's page.
- Get their service agreement up in English and not just in German.
Do you know any other tools that could be used for this purpose?
Bookmark/Search this post with:
Thank you all for the great comments!
I was very happy when I checked out patterntap : this is exactly the kind of thing I was looking for.
If they still add a bookmarklet or browser plugin to make it easier to capture and submit parts of a screenshot they could be sitting on my holy-webdesign-pattern-grail.
I personally like Zotero to save design ideas. And I also use Screengrab (a firefox plug-in) to take screenshots of a full page.
I use DEVONthink for a variety of uses and this is just one of them. I use the save webarchive to DEVONthink bookmarklet (bound to Apple + 2 so it is quick and easy for me) which creates a webarchive of the page (in case it is taken down or modified, I'll still have what I want) and saves it into the DEVONthink inbox. A few times a week, sometimes daily, I go through my inbox and I sort things out. I've got a "design I like" folder with several subfolders (forms, backgrounds, color schemes, UX, etc).
As for sharing, well, I don't but you can easily. DEVONthink has a built in webserver so you can serve your database to anyone (or restrict access if you so choose). As for letting multiple people put data in directly at the same time, I'm not sure if this feature has been added in the latest, 2.0, or not.
The best by far is http://patterntap.com
Agreed. Patterntap.com is an excellent resource. I use it for inspiration on just about every project I start on.