Because I’ve always been fascinated about how other designers do their thing, I thought I’d share a bit about my organizational setup on my computer and how it plays into my work. On my desktop, 99% of my time in the last 6 months were dedicated to the following folders and files:

kevinotherfolders

Karakoram is just the name of my hard drive (a reference you’ll know if you’re a Genghis Khan fan). Then there’s two Textmate projects, one for the Subversion checkout of Wufoo’s source code and the other for our recently released desktop notifier, Unplugged. The three folders, Infinity Box, Code and Progress are used for quick triage.

  • Infinity Box is for all company related matters.

  • Code is where I keep all the cool scripts, code projects, snippets and examples I come across when I do research on any number of ideas.

  • Progress is my writing dump folder. It’s filled with hundreds of text files containing unfinished ideas, outlines, future blog posts, Particletree features, poems, short stories and even recipes. Basically, if started writing something and I didn’t finish it, it goes in that folder.

About once a week, the root of the Infinity Box folder gets additional triage treatment. Files I’ve dragged in there will go into the following structures:

kevindesignfolder

Everything I’m responsible for in regards to Wufoo fits into the categories shown in the secondary folders. I highlighted the Icons, Images, PSD and Screenshots folders because I use them the most and got tired of having to scan to find them (milliseconds, I’ve found, are precious when you’re looking at something hundreds of times a day). Here’s a quick rundown of those folders :

  • Documents : These are company documents like invoice templates, stationary, employee handbooks, etc.

  • Flash : Leftover from when Wufoo had a lot more Flash in the interface than it does now.

  • Fonts : A copy of the fonts used around the web site and in the marketing materials for Particletree, Wufoo and Treehouse. In Wufoo, we use the always excellent Whitney and a customized version of Milkman.

  • Icons : A copy and reference for all the icons and avatars used in Wufoo.

  • Images : This contains a copy of any stock photos we might have bought for artwork and any finished renderings from PSD files.

  • Inspiration : As I browse the web and go through my feedreader, I use a screen capture tool like Snapz Pro X to capture anything that tickles my fancy. Lots of interface fragments, color schemes, copy I think is brilliant and even videos of interactions. Whenever I get stuck on a design, this is the folder that helps me the most.

  • Legal : Corporate documents, contracts and investment papers.

  • Marketing : Anything used to help someone spread the word about Wufoo. Copies of all the advertisements I’ve designed, logo kits, custom made icons and badges, etc.

  • Movies : Screencasts used in our documentation and demos.

  • Photos : This one is for documenting the history of the company. Photographs of the team in action, group photos, company trips, etc. A copy of almost all of these are on our Wufoo Flickr account.

  • Press : Safari webarchives, screenshots and copies of articles and interviews written about Wufoo, Particletree and Treehouse.

  • PSD : Sweet photoshop files. This is the folder that is constantly backed up in multiple places and bunkers.

  • Screenshots : These are of the application and the web sites. Again, most of these images are also uploaded to the Wufoo Flickr account for posterity.

  • Wireframes : XHTML, CSS and a little bit of JavaScript that’s in progress. These are usually experimental redesigns, Particletree proof-of-concepts and fragments of HTML markup ideas.

And that’s a quick snapshot of my organizational foundation. A lot of this is leftover from habits made while keeping design and writing notebooks in college. It’s tremendously useful when I’m working and when I need some inspiration to get out of a rut. What I really love about the system is how it automatically helps me document and track the history of our application interface and our company’s decisions. Lately, I’ve started to see that knowing how I got to a place is sometimes just as important as where I want to go.

If you have an interesting work layout for your files, I’d love to hear about them. Just write about it on your blog (with screenshots too if you can!) and link to them in the comments.

HTML Form Builder
Kevin Hale

Workflow Voyeurism : Kevin by Kevin Hale

This entry was posted 2 years ago and was filed under Notebooks.
Comments are currently closed.

· 12 Comments! ·

  1. Jason Long · 2 years ago

    Very cool, Kevin - thanks for sharing. I too enjoy a little workflow voyeurism. It’s always interesting to see how others work.

  2. Kevin Hale · 2 years ago

    Workflow Voyeurism…I totally love that phrase, Jason. In fact, I’m going to rename the notebook.

  3. Chris Griffin · 2 years ago

    Very interesting article, I’m always interested in seeing other people’s organization methods.

    I don’t see a place where you keep your code/subversion checkouts. Do you touch it at all? If so, where does that fit in?

  4. Riddle · 2 years ago

    Kevin, you should really try Skitch.app – I think it’s the best screenshot app ever made. Give it a try, I think you’ll love it. :)

  5. Colin · 2 years ago

    Very interesting article, I’m always interested in seeing other people’s organization methods.

  6. Chris Griffin · 2 years ago

    Should clarify my last comment. I see the textmate project in the first screenshot, but the code lives on the desktop?

  7. Shpigford · 2 years ago

    That code icon is legit. Where might one procure such icon?

  8. Kevin Hale · 2 years ago

    Hey Chris, the SVN working copy lives in a folder elsewhere on the computer. I interact with that folder pretty much solely through Textmate. The reason I don’t keep it in the Infinity Box folder is because of some of the requirements needed to run Wufoo on a localhost setup and because we use Dropbox to sync parts of that Infinity Box folder with all the other team members.

  9. Kevin Hale · 2 years ago

    The icons are courtesy of David Lanham at http://dlanham.com/art/agua/. He offers them for free for personal use. All of his work is most excellent.

  10. Sam · 2 years ago

    Love the organization style. Quick question I am a menu bar fanatic what are those 3 applications running on your system specifically the blue T, blue box and the yellow ball?

  11. Kevin Hale · 2 years ago

    Blue box is Dropbox : http://getdropbox.com
    The blue T is Textexpander : http://www.smileonmymac.com/TextExpander/
    Yellow Ball is Eye-Fi : http://www.eye.fi/

  12. Jamie Lottering · 2 years ago

    I always try to come up with an organizational scheme but I have trouble keeping at it.