I just took an extended vacation. 10+ days actually. Went with the family to visit some friends and relatives. We had a great time. I was computer free for the entire time. *GASP*.

I was in an environment with a number of people that use a computer only as a communication tool, email, etc. Their level of web saviness and familiarity with computing in general is pretty low. They are casual technology users in general, not early adopters. They are all what you would consider white collar workers in various economic sectors. All are pretty successful in life, with nice homes, families and all the things that come with it. All of them great people, and people I consider myself lucky to know. Their lines of work and the careers they have built through their hard work are all things to be proud of, and rightfully so. I feel the same about the choices I have made in my professional life, too.

There was a clear dividing line between them and myself that was far more important, though much less noticeable than simply being a power user or a casual user of a computer. That line? A clear and driving force behind the work we choose to do. You see, I haven’t really ever considered a career path that didn’t involve design and interactivity. Since high-school, I wanted to be a graphic designer. I avidly learned Photoshop and Illustrator, Aldus SuperPaint and Apple Hypercard, etc… Once in college, I taught myself HTML and dug into Apple Media Tool, Director, and picked up Flash. Since then I have expanded into user experience design, application design and social media design. All evolutions of the same basic tenet, creating and providing superior experiences for the people that use my products, services or solutions.

The paths the others had taken or are currently taking, these friends and many of my other friends included, have been a little less clear. A few years in consulting, maybe a few in real estate or retail, on and on… not really in one sector or even one basic task/goal type. I find this a difficult life path to comprehend. To not love the work you do so much, that it is really about the only thing you want to do, so much that you are willing to take a lower paycheck or see a lull in your billable hours, just doesn’t sound rewarding to me. To be able to move from selling Widget A to selling Widget B without a blink just isn’t me. I love the weekend, but I’m never really working for it.

In the wake of the dot com bomb, I was unemployed for a while. Taking any sort of design oriented gig I could scrounge. Websites, brochures, banners, web games, etc. I interviewed a number of times for creative positions, but to no avail. At the lowest point, after the work dried up and we were seeking to buy a home to start a family, I interviewed for a position selling technology products at a full commission store. The interview was great, I was virtually a shoo-in with my level of expertise on computers, home entertainment gear and the like… then the big question, “What will you do if a position in your previous line of work becomes available locally?” My answer, “I’d probably take it.” They promptly shook my hand and showed me the door. I just couldn’t do it, I needed a design job!

It makes me think. What other career paths are out there that people take that they are so passionate about that they just can’t think of doing anything else? Teaching, Law, Medicine? What? I am anxious to hear your thoughts on this. Do you love what you do? Could you envision yourself in a totally different job or career path? I’ve made my decision. It’s like some sort of tattoo. Design.

I have shared tools, and components and source code libraries here in the past, primarily focusing on free and open-source libraries. I do enjoy using and getting to contribute to these community projects, but sometimes, there is no way to get around it, you just have to buy a component or plug-in to get the project done. When doing so, it’s really difficult to separate the wheat from the chaff. Here are a few commercially available tools or components that I have used that aid in creating web, RIA or other rich-media experiences like kiosks or tradeshow pieces. There are some add-ons that I have used in the past that I haven’t included here because they were troublesome or too buggy for final use, so view this as a list of only the ones that have stayed in my toolbox after a successful deployment.

• FlashLoaded’s 3D Wall/Spiral/Tube, etc – If you want to create a simple 3D gallery or touch-panel display, need it done quickly and don’t have a lot of time to to learn Papervision, this relatively inexpensive group of component will achieve most of your needs. It’s pretty much bug free and does have a fairly large and accessible API for managing and working with the properties, methods and events in the component. You can integrate video into the the 3d planes, and put interactive SWFs in the panels as well. Pretty cool. That said, if you are already adept at Papervision and have a grasp on how you might want to build image galleries using the library, this product would have very little use to use to you. FlashLoaded does a respectable job at offering support, updating the components when there are bugs or issues and even adding features after a components release, offering updates free of charge to registered purchasers. They are worth a look.

• JumpEye Component’s Menus – JumpEye is a well known rich media design/development consulting company, but they also offer a wide variety of components for sale at their JumpEyeComponents.com site. The menus they have there are pretty good in particular, and fill the void created after Adobe Flash CS3’s release, when the more advanced menu components and accordion panel were inexplicably removed from the product. It’s a shame you have to purchase a replacement for a component that Flash used to ship with straight from Adobe, but it seems that advanced UI components, etc have been migrated out of Flash and into Flex. This site has a number of add-ons available that help you overcome that shortcoming if you need to produce some advanced UI in Flash. For the price, it’s tough to argue for custom development of a menu when a deadline is looming. Highly cusomtizable and powered by XML, the components are flexible enough to make them useful for a wide variety of implementations. Find out more here.

• IconFactory’s IconBuilder- Do you find yourself needing to produce a wide variety of icons for AIR apps, Windows apps, Mac apps, websites, favicons, etc? If so, this will save you a ton of time. If all you ever need is a Favicon from time to time, this probably overkill, but Iconfactory’s IconBuilder is great for simplifying the process needed when moving through the design process for multi-sized icons inside of Photoshop or Fireworks. It can create icons of pretty much every size dimension and palette, even helping you verify how the color indexing will look for final output to older, or smaller icons used in list views, etc. It’s pretty indispensable for that reason. If you are delivering custom apps for clients and you aren’t creating custom icons for those apps, step up to the plate and add some polish to your deliverables. It really finishes off the presentation. This app is $79 for Mac users, $49 for Windows users, but the Mac version does have a few extra niceties for the extra $.

• ixis’s (formerly Softheap) Public PC Desktop – Have you ever produced a kiosk for use at a trade show, exhibit or other installation? How did you lock it down? You know, prevent those pesky users from monkeying with the system? An absolute necessity. This $80 app is super handy for keeping nosy people out of the OS. You can lock down the computer via a white-list for applications, URLs, services, firewalls/proxies or pretty much anything else. Additionally on lockdown, you can have Public PC desktop auto launch your kiosk app. This helps in the daily routine for a exhibit when the computer reboots after being off for the evening. I wouldn’t dream of putting in a touchscreen at a remote location that didn’t have some level of protection on it. This is a key step in setting up that final disk image that gets shipped on pretty much any project we do. This app is by no means the only out there that does this sort of thing, but is probably the easiest to use that still offeres enough configurability to fit your clients needs. The site is pretty poorly designed, but here is a link directly to the product page.

• Zoomifyer – This app gets a bit of use from time to time by me. The intelligent slicing, loading and simple navigation UI it adds for deep image viewing, panning and scrolling is pretty nice. Advanced hotspots, event management and other interactions make this a very nice choice for making an image viewer app. A simple version does ship with Photoshop, but the full product adds a suite of bells and whistles that make the upgrade worth it. To do this sort of thing by hand, you’d need an army of graphic prep artists and a very regimented workflow to ensure the proper consistency. Check out some samples here.

• Multidmedia’s Zinc – More than just a plug-in, this IDE allows for Mac, Windows, and Linux applicaiton compilation. Wht’s the big deal? Why would you use this instead of AIR? Well, not a lot of major client I encounter have made the jump to AIR yet. On top of that, Zinc compiled apps have deeper access to OS level APIs, file IO, Database connections and much much more. This compiler really does take your Flex or Flash app and turn it into a desktop program. It’s got an impressive list of features. My main complaint against it is that the developers seem to prize a rapid release cycle over a robust testing cycle, so sometimes even minor point updates can break previously stable code. I have learned this over the years and now only update Zinc after reading the suport forums and ensuring that the most recent release doesn’t mess things up. This is by far the best SWF to EXE tool out there IMHO, and I have used pretty much all of them. Check it out. Absolutely worth the $ if you have projects that require this sort of functionality.

So there you go, a group of tools I have found useful in my projects over the last couple of years. These get used again and again by me and my team, and maybe you will find a use for them as well. Got others in your toolbox you keep going back to? Share ‘em with me by leaving a comment.

Everyone has their favorite methods, tricks and tools for completing their work. As a Mac Webdesigner/developer, I thought I’d share my list of indispensable software and resources that I use on virtually every project. I wouldn’t call this list exhaustive as I have left out a couple things like an FTP client (though I do like Transmit) and an SSH client (I simply use OSX’s terminal), but it should give a little insight into how I get things done. I primarily use Firefox as my browser of choice, so some of the tools here are actually add-ons for the browser.

1. A decent text editor. I use BBEdit, though I sometimes use Eclipse/Aptana as well. Say what you want about WYSIWYG editors, they’re easier, they’re getting better, they have a lot more features, etc… I really just haven’t ever liked them. Sure Dreamweaver is much better than it used to be, Coda isn’t bad and Espresso looks pretty promising, but they still seem to get between you and the real markup IMHO. They all seem to let you down with their previews eventually anyway, so what’s the appeal? I haven’t been able to pin that down, and so until then, I edit in a text editor and preview with a browser. Honestly, I have a version of BBEdit that is a little old, so I may eventually shift away from the slightly overpriced standby, but old habits die hard.
2. Omnigraffle is tops in my book for wireframing and process documents. Sitemaps, data design, UI prototypes, etc pretty much always start here for me. I use it for sketches and for client delvierables alike. It’s easy, fast and extensible. I love it.¬† To enhance the already great app, head to Graffletopia.
3. Photoshop is most likely in your toolbox, too. That or Fireworks. I use the save for web for all my images feature now that Imageready is no more.
4. Kuler/ColourLovers. I seem to switch back and forth between the two color palette creation sites. Each has their pros and cons. I like Kuler’s flash tool interface a tad better, but ColourLover’s community is just awesome. When I feel creatively stagnated, I often pop over to one of them just to work up some palettes and get inspired.
5. The Web Developer Toolbar. If you don’t have this installed on your Firefox installation you are simply wasting too much time debugging and validating your markup and CSS. With the built in guides, grid and rulers, the toolbar in many ways seems to obsolete the tools in many of the WYSIWYG editors out there. I could probably write a post on just this tool alone, because each top level menu in the bar is loaded with useful utilities and features.
6. Firebug is a great combo/tag team tool to use with the Developer toolbar. The DOM inspector, HTTP request logger and header inspector along with the great inline CSS and HTML editing tools just make this another have to have editor tool for your browser.
7. Colorzilla is another handy little add-on that puts a eyedropper tool in your browser’s status bar. Sample the color of any pixel in your viewport, use the zoom to get nice and precise and then copy the hex color to your clipboard to use in an editor or your image editing program. Saves a lot of back and forth between Photoshop and the editor for me.
8. VMWare Fusion/Windows. Yes, we live in a windows dominated world. So, for my cross platform testing, I have to have a Windows partition with IE6, 7 and Firefox installed. I use IE Developer toolbars over there and also have used IE Watch in the past to track HTTP requests in the browser that everyone detests. I’m hoping we can drop support for IE6 soon, but I’m not holding my breath.
9. Pngbehavior/Pngfix. I can’t wait to not need this. But, until IE6 is no longer in my list of browsers to test against, I am going to need to be able to use one of these methods to get PNGs to render as transparent images in this aged browser. I was thinking about not including this in my list, but again, I don’t think I have produced a site in the last several years that didn’t need this.
10. My Delicious bookmarks. With nearly 800 web design focused bookmarks and no filler, this resource is one I use to solve quirky rendering problems and find inspiration or tips first. It’s like a mini Google of web design tricks, but all tagged by yours truly. Now, I can’t guarantee the answer to everything web is in there, but more than likely there is something I have saved in my account that you can use.

So, there you have it. My must haves. What have I missed? What can’t you live without in the W3C sea? I’m interested in learning more, so as always, let me know what you are using to create your work.

In my presentation last week at CD2, I mentioned I would provide a list of the resources I recommend using as reference in designing application interfaces. I thought I might get a chance to blog that list this past weekend, but I was a tad busy, designing interfaces for an RIA, naturally. We at Iona have a great app coming soon that uses CakePHP, AJAX, Flex and a whole lot of experience developing superior elearning solutions in order to create a fantastic RIA. That’s pretty much occupying my time right now, but I needed to get this list together.

That said, when I need to sit down in front of my diagramming tool of choice, OmniGraffle, I like to have some references to tap in order to ensure I am making the right choices. I might not use all of these every time, but I certainly do refer to them once and again. I hope you can find a couple of these useful in your work, too.

1. Designing Interfaces – Jennifer Tidwell: A newer book and one that many may not have in their library yet. This book is currently in use in my Mashups and RIAs class, and I can’t recommend it strongly enough. It is a virtual library of great UI analysis. Pretty much every modern UI pattern in play today is dissected and explained when and why it works. A must have.
2. The Visual Display of Quantitative Information -¬† Edward Tufte: Not really UI focused, but a necessary academic resource for all UI designers to have read. It’s no nonsense approach to data display and intolerance for bad design will not steer you wrong. A bit heady at times, this beautifully printed book is one you can open and read a little bit at a time and keep for years. The information in here is not going out of style anytime soon. I really got a lot out of reading each of the Tufte books, but this is his hallmark title, IMHO.
3. Information Dashboard Design: The Effective Visual Communication of Data – Stephen Few: Lots of pictures and a short book. This title is all about explaining quick and easy data display. Charts, graphs, widgets, etc. Not heavy on interactions, but a good resource for effective infographics.
4. Design of Everday Things – Donald Norman: This book should have you appreciating the nuances in the design of products you use all of the time. Hopefully some of that thought process will rub off on you when create the GUI you’re about to slave on.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition -Stephen Krug: I’m sure most of you have read this. It’s a very common sense approach to basic ideas behind web usability and may be one of the best known books on the subject. For those of you who haven’t picked it up yet, please do so. It may seem sort of obivious to many advanced designers out there, so if you are very experienced with topics like user testing, etc, you can probably skip this one.
6. The Art and Science of CSS -by Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, David Johnson : A simple book, no doubt, but this one has some real nuggets of CSS genius in it in regards to styling tables and form widgets. Some nice subtle effects get pulled off in here, so this one is shared with my students very often. Dates, lists, calendars, all kinds of things that can be really really boring screen elements get a bit of polish here. Nice touches all around.
7. Getting Real – 37 Signals: Not really about graphical user interface design at all, but it should definitely help you make some hard choices in your application’s functional design. Think simple, release early, release often. Build half a product, not a half ass product. On and on. Indespensable.
8. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies) – Jeff Johnson: This is a tome. Well over 500 pages. This teaches by illustrating major gaffes in UI design. It’s not an overly entertaining book, it’s not meant to be a graphic novel but rather a text book. Many of the apps detailed in here are showing there age, but I believe there is now an updated “2.0″ of this book. I haven’t reviewed that version, though.
9. Human Interface Guidelines – Various: Be it Apple, Sun, IBM, Microsoft or Adobe… all of your favorite dev/design centers have great topics for making informed UI design choices for your audiences. Don’t overlook them just because they are obvious. They get updated often and are pretty much always worth spinning through when starting a new project.
10. Creating Visual Experiences with Flex 3.0 (Developer’s Library) – Juan Sanchez & Andy McIntosh: Not technically available in stores yet, but a great great resource for understanding the powerful design tools in Adobe Flex. I was granted an early copy for review and it was a very satisfying read. RIA design with Flex is as much an art as it is a science, so dig in here. This book is really well laid out and has tons of great images.

So, there you have… some guides I find useful… Of course, I am always looking for new books and sites to add to my collection, so, let me know, what books are you using to help you with app UI design?

Though many of you may have seen this already, I would be remiss in not showing the rest of the readers here this amazing new interface concept from Adaptive Path and The Mozilla Labs.

Aurora (Part 1) from Adaptive Path on Vimeo.

This video was released a couple of weeks ago and represents some key concepts that are sure to come to fruition sooner rather than later. The fact that the browser serves as the primary user interface that is interacted with in the system is pretty similar to how many users are just now working with their PCs today. This trend is sure to continue with the move towards RIA and other semi connected technology. Many people simply don’t need any app that can’t be done as well or even better online than as a desktop binary app.

In addition to this basic use case, there is a significant interface advancement depicted in the video worth noting. The 3D spacial view shown is like Apple’s Time Machine but for all content, contacts and communications that have taken place in the user’s recent history. I want this now! I frequently use the “recent items” menu for apps, files, iChat conversations and server connections. The spacial view’s clustering functionality is a “stack”-like way of grouping content and other interactions by their subject matter and is so very very needed. I currently have a desktop with about 30-40 files and folders containing more content, some of them 3-4 levels deep with associated. All of these are related in some way to a project or series of otherdocuments I have in my user Documents directory… you can imagine how overgrown this gets from time to time. With a loose, time-based virtual association like this, the arbitrary location of the files is removed from your view, supplanting the need for spatial orientation with something more compatible with how your memory works.

Again, if you haven’t dug into the blog posts by the Adaptive Path team and you fancy yourself interested in UI design, you owe it to yourself to take a couple hours to read this series of posts. Is this how it will be? How far is this type of UI off in the future? Well, if you look back to Sun’s excellent StarFire concept, which I blogged about here, some things in it may never happen. It certainly doesn’t hurt to entertain the thoughts of how it could be, though.

A rambling yet somehow strangely coherent spiel on how America’s graphic heritage is being washed away by FastSigns and other commoditized design factories. Some good points here, and it looks as though there is a lot more to come. Warning… the language is a tad NSFW.

Why Amierca is F***ed