10 Web Design Tools I Can’t Live Without

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.

Design Resources for RIA Developers

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. Edward TufteThe 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 DesignInformation 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. Art and Science of CSSThe 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?

The Aurora Interface: How It Will Be?

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 Designer’s Perspective on Why America is F***ed (Graphically).

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