4

For over a year now I've been trying to get into all of these UI pattern sites, but the fundamental flaw I've found across the board is the level of effort it takes to create/post styles you come across in the wild. This became even more apparent to me as I searched through these sites again today and found barely any new content from what was posted 14 months ago.

Sites like Patternry & the Open Source Design Pattern Library have the right idea as far as the rest of the metadata associated with the images/patterns themselves, but I'm not finding any that have out-of-the-box browser tools/extensions for accumulating and then identifying/tagging/supplementing those patterns with the appropriate data on-the-go.

What I'd really like to see is a means to screencap/aggregate a bunch of images before having to go back through and do the time-consuming part. I know there are tools out there for individual capture, obviously, but I'm wondering if there are any sites that have such a tool as it pertains to their product.

For the record, I'm also already using library-esque sites with bookmarklets like snip.it and Lookwork, but these are both so broad in scope that they don't really work well for this kind of thing. Plus I'd really like to be able to have my own library on a pre-existing pattern site.

If nothing currently exists, what's your most effective workflow for sourcing/posting patterns? Any little known but pretty robust libraries I might be unaware of?


Updates (most recent at top)

12/5/12 : Was able to get the Easel.io tool to work, but it's a bit difficult to select specific sections of a site instead of just the elements and their parents (i.e. in trying to grab a site's header and nav that are vertically-stacked siblings, you have to select them individually and manually move them into place within Easel). I also had an issue where some inactive tabs were relying on their parent's background color (the elements themselves gradate from semi-transparent to fully-transparent to look sunken in), and for whatever reason even though the entire parent was selected, it did not bleed the parent background into the tabs.


9/27/12 : Easel.io's Chrome extension (other browsers can use a bookmarklet provided by the site) is supposed to grab live elements on-the-fly to import into your projects on their site. It doesn't currently create a repository of your imported/copied styles to organize into categories, just lumps them all into a "My Elements" section.


3/27/12 : Patternry has started allowing HTML/CSS patterns. Still doesn't allow you to "save" element styles from a browser extension, but at least gives you a place to store code snippets.

Layout would be cleaner if they utilized something like embeddable jsFiddles and CSS3Please-esque mass vendor-prefix editing. But it's a start.

3
  • In Balsamiq I usually use Window's Snipping tool to save the image and then Balsamiq can "sketch" your image into black and white to fit with the default library assets. I'll be interested to see what better options there are.
    – Ben Brocka
    Dec 19, 2011 at 19:12
  • 1
    A screen clipping bookmarklet sounds like an awesome side project, and is technically quite feasible in a modern browser: stackoverflow.com/questions/923885/…. Takers? Dec 20, 2011 at 15:29
  • I was going to add in my comment that I would /love/ to design one if someone has the developer prowess. A friend suggested something like html2canvas.hertzen.com but unfortunately it takes forever to render, doesn't always do it right, and doesn't include any of the interaction states. Dec 20, 2011 at 17:40

2 Answers 2

3

I used LittleSnapper for Mac and you can easily categorized your images and you can make folders also.

I used also different social bookmarking tools such as Zootool and Minus to share and organized screen capture images from the web.

2
  • How was I oblivious to Zootool? It has the process down, but the experience is still a little wonky. My concern is that a screenshot only shows so much, and additionally, linking to the site's original URL to show the actual effect goes out of date really fast. Dec 20, 2011 at 17:49
  • (Sorry, didn't realize I went over the 5-minute limit to edit as I accidentally hit Enter too quickly.) + Sometimes sites change within a week or a few months, which is why the scope of this project is shifting to grabbing a literal live cross-section or full page without all of the individual files. I'm totally crossing my fingers and my toes that this is even remotely capable at this point in time. Thanks for responding! Dec 20, 2011 at 18:01
1

I personally use the Awesome screenshot chrome add-on which is really useful as it allows me quickly take screenshots of pages, add annotations and notes and save it either offline or even online in http://www.diigo.com/ or Google Drive.

enter image description here

This is a screenshot I took of an UX Mag article with some annotations.

The only pitfall of this add on is that that it does not capture dynamic interaction on the screen so well (e.g. you are trying to take a screenshot of a dropdown which gets activated on hover only).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.