How do you organize all your 'design idea' clippings?
31 Jan 2012 - 3:14pm
17 replies
807 reads
truth1ness
2012
I'm always taking screenshots of cool website interactions or designs when I browse around and put them into a 'design ideas/inspirations' folder on my computer. I was wondering, for you designers that do something similar, how do you go about organizing your clippings?
The folder is getting less useful as it grows larger because it just takes so long to sift through to find what I want. I'm curious if people use a folder taxonomy, or putting tags in the filenames, or is there software you use for organizing and displaying all your clippings?
Get the feed
Comments
My own collection is relatively small as I usually neglect to add my finds to it, but LittleSnapper may be what you seek. It works well for me, and with tagging and "collections" features.
Evernote is pretty instrumental for organizing my clippings.
Also, I recently discovered UI-Patterns....pretty cool site.
You may also want to check this article
http://wireframes.linowski.ca/2011/05/personal-pattern-books/
+1 for Evernote
I just email them to myself and have rules set up that put them in a separate folder as "unread". I guess it talks volumes of how I do my work - always on the computer, rarely on the pen-and-paper. It might be partially explained by me having a stronger process/workflow and software background than one in e.g. arts and design. What paper sketches I have left are in chaos on my desktop.
I go over my idea and snippets irregularly, but often. Even if I don't use them. I find this to be more important than anything else.
I use Microsoft ONENote to screen clip Interesting Interactions / design patterns and file them inside notebook or sub chapters ( titled as : App UI, Notification Design, Use it next time, Web Components REF and so on... )
You can also add notes in the screenshot page, tag them, search text within image ( OCR stuff ) and most interestingly , when you screen clip a webpage ( or part of it ), OneNote will capture additional info along with the screenshot like : Page title, capture time stamp and the URL
Note: currently this feature works only in IE browser, however there are few plugins available for Firefox.
OneNote more info : http://www.howtogeek.com/howto/22125/beginner-geek-getting-started-with-onenote-2010/
I use OneNote too, but I find that my collection of screen clippings is so huge that I have a hard time finding that clipping of that breadcrumb style i liked, or whatever. So I tried to organize them by categories, but it hasn't worked all that well because as soon as you take the clipping you have to immediately go into onenote and the move it to the proper category (which is kind of a hassle).
The big problem I see is, How do I share it with others? I want to be able to peruse not only ideas I liked, but stuff other people liked as well and have a way to bubble up the good ideas so that all the good stuff is easily browsable. I've recently started using Pinterest, and I think something like that, but just for UI geeks like us would be awesome.
I'd love a good answer to logging and sharing these - I tried Pinterest, but it only grabs images in the current page, and won't take an image *of* the whole page.
I take screen shots and post the images to an extremely simple Tumblog (http://www.tumblr.com/blog/uispottr). I use tags to organize them. It is a pretty crude system, but reasonably fast and effective. I have to remember the tags I am using, as the tag UI does not have a type ahead. I also thought using Pinterest could replace the Tumblog, but grabbing images isn't usually what I want.
@roundand - i have been doing the same thing with pinterest (my influential interfaces board) using skitch.
@tania schlatter - your tumblog is not publicly accessible - "request denied"
I’d love to subscribe! But I’m getting the same error Justin mentions.
We use Diigo or Evernote. But looking for other tools. Great topic!
Oops. Here's the link. http://uispottr.tumblr.com/ - caveat: super crude and intended for my own inconsistent purposes. ;)
How about https://gimmebar.com/ ?
@tania - thanks, following with interest!
@uxtweater - aha! where has gimmebar.com been all my life?
I built this site:
http://userexperiencereview.com
a while back, for the purpose of cataloging interfaces using tags and crital notes, so I could slowly build a libarary of UI patterns being used effectively and not so effectivly in the real world. It is open for anybody to add interfaces or notes to.
-j
I have a Design folder that I place imgs/screenshots of interesting designs I find on the web, breaking them out into folders like 'navigation', 'breadcrumbs', 'filters', 'login', etc.
However I see http://pInterest.com taking over as my new method. Easy to access and share with others.
Nice topic!