DesignAday

Designer’s Toolbelt: Parallels

Most of the projects that I work on are for the military or industry. As such, all of the software that I design runs on Windows. Even the web-based applications are built for IE without cross-browser support being a priority. In the past, I’ve had to remote into old, slow Windows machines or VMs to run IE or native applications. Now that I have a Mac with an Intel processor, I’m able to run Windows on it. I installed it yesterday using Parallels.

Parallels made the installation a piece of cake. All I had to do was insert the install CD, enter a license number, and away it went. I turned my attention to other work and in a matter of minutes, I heard the Windows startup sound.

Parallels has a few different view modes. You can run Windows in a window, where the window contains the Windows desktop, and all applications are opened in windows within the Windows window (catch that?). You can run it full screen so that you don’t see your Mac’s desktop at all. The best way to use it is in “Coherence” mode. This hides the Windows desktop altogether and presents each window as a window within your Mac OS X environment. Pressing the minimize button results in the window moving to the dock, genie effect and all. Windows can be moved between spaces, and they are sorted by Exposé. Clicking the Parallels icon in the dock results in the display of the Start Menu. Notifications are displayed in the standard Windows speech bubble in the bottom-right corner of the screen. The clipboard is shared between operating systems, and you can drag and drop between Windows and Mac applications. Network connections were made automatically without needing any of my input.

I showed it to one of the developers I work with, and he was surprised at how fast it runs. I’m impressed by the seamlessness with which they have integrated the Windows UI with the Mac OS. If you have to run Windows for testing, this is the way to do it.

I must admit, though, I do feel a little dirty having done it.

Designer’s Toolbelt: Acorn & Pixelmator vs. Photoshop

I’m still using Photoshop CS2 at work (CS3 at home). It’s well past time to upgrade, but it is a struggle to get approval to do it. Adobe’s creative suite is really expensive, and there are two of us in the office that need upgrades. Part of the reason we need upgrades is that we are due for new Macs, which will come with Snow Leopard. All the software we have currently will be running in Rosetta and no longer supported.

So, I decided I should finally take the time to evaluate other options. I’ve heard good things about the little Davids out there (to Adobe’s Goliath). I actually got a copy of Acorn in the latest MacHeist bundle, and both Acorn and Pixelmator have free trials. It didn’t take me long to come to a decision.

Both applications are well designed, very Mac-like, and take advantage of the modern capabilities of OS X. They feel fresh. They seem like applications I would enjoy using. And, compared to Photoshop, they are cheap. They aren’t crowded with hundreds of features that I’ll never use.

Unfortunately, they aren’t crowded with the features I rely on either. I am dependent on layer groups. I remember using Photoshop 3, in which I added extra, empty layers to use as section dividers in the layers palette. I am married to layer effects. The ability to add drop shadows, gradient overlays, and the like to a layer, and then copy those styles to other layers saves me untold hours of work. I use Photoshop’s actions to automate tasks I repeat often, and I use its batch capabilities to process large numbers of files. I am wedded to the robust history palette. Finally, I have hundreds of files that may open in those other applications, but would be missing a lot of data.

As much as I dislike the current state of Photoshop’s UI and the bloat it has built up, I am shackled to it—the old ball and chain. For better or for worse, in sickness and in health, and all that jazz.

Designer’s Toolbelt: Yojimbo

One of the tools I rely on and use almost daily is not really a design tool at all, but a general information manager. I read a lot of blogs and web publications about design. Most content is HTML, but a fair amount is in PDFs or even image files. I collect information that I think I might want to use in the classes I teach or that I want to have for later reference. I will also collect things that I want to read but don’t have the time when I find them. While I could keep bookmarks in my browser and files in folders on my file system, I prefer a more organized method of cataloging them.

Yojimbo, by Bare Bones Software, is a fantastically useful application and brilliantly simple. Think of it as iTunes for information. It will import PDFs and images and provides a quick method of entering things like serial numbers, passwords, and notes. Using a bookmarklet, it can save webpages either as bookmarks or as web archives that can be viewed offline. Everything is stored in a library, but is categorized by type. You can also categorize items in custom collections. Most importantly, you can tag them and create “smart” tag collections. The content is indexed so you can search against it. All content displays directly within Yojimbo, so you don’t have to launch Acrobat or a browser to view the content.

Version 2 was just released last week, and it added a new feature that makes tagging even more useful. Previously, tags could be searched against, but there was no way to see a list of all tags. The Tag Explorer lists the tags and shows how many items each applies to. Clicking a tag filters the library by it while at the same time filtering the Tag Explorer to show only the tags that are related to the items left in the library. I have tags for Design, Design Leadership, Design Thinking, Education, Experience, Forms, Industrial Design, Information Design, Innovation, Interaction, IxDA, Process, and so forth.

The icing on the cake is that Yojimbo syncs between my computers via MobileMe. So, if I add an article to it at work, I’ll have it at home to read that evening. Now, if they would just create an iPhone application…

Designer’s Toolbelt: LittleSnapper

For most purposes, I find Mac OS X’s screen capture capabilities to be perfectly adequate. I can capture the entire desktop (with multiple monitors captured as separate images), a single window (complete with drop shadow and transparent background), or draw out a rectangle to capture a particular area. However, every once in awhile, I need to do something a little different. For such cases, there is LittleSnapper, a robust application from Realmac Software that not only does screen capture, but provides editing, organization, and sharing features.

The one thing that makes LittleSnapper indispensable to me is its ability to capture an entire webpage, regardless of the size of the browser window. If you are tired of taking multiple snapshots and sticking them together in Photoshop, this is your ticket. It works in all of the common browsers, and has its own, built-in browser to boot, which allows you to select elements within a webpage to capture, based on the DOM.

Need to mark up a screenshot? There are a number of handy, vector annotation tools that work in a layered, non-destructive manner. If you do a lot of UI reviewing, you might find LittleSnapper’s organization capabilities useful. Think of it as iTunes for screenshots, with the ability to rate, tag, categorize, search, and yes—there are “smart” collections. It offers many options for sharing screenshots, including integration with Flickr and their own QuickSnapper service. They even have an iPhone version.

You can try LittleSnapper for free and buy it for $39. It’s another application cut from the same cloth as Apple’s own iLife suite. I’ve only recently added it to my collection of tools, and am slowly integrating it into my workflow. I deal with a lot of screenshots, and I think LittleSnapper will help me do so in a faster, more organized fashion.

Designer’s Toolbelt: Espresso

I’ve been happily using MacRabbit’s CSSEdit for some time now, and I don’t know how I could get along without it. It has become an integral tool. Just today, I used it during my company’s “continuing education” lunch, as I was giving the developers an overview of CSS. It’s ability to instantly preview changes as you type is priceless. I posted about it in October of 2007.

MacRabbit recently announced the release of their new text editor, Espresso. It was included as the final unlockable application in this year’s MacHeist. It was in large part due to its inclusion that I decided to participate this year. I’ve been using it for a few weeks now, and I quite like it.

It does the things one would expect a simple text editor to do, such as coloring syntax and code completion. Like CSSEdit, it provides a live preview that refreshes as you type. It has a very nice code folding feature, and it has a navigator panel that provides a succinct, collapsible tree showing tags and IDs. Clicking on a tag in the Navigator scrolls the document and highlights the relevant code.

Unlike many text editors, Espresso provides some simple project management capabilities, including publishing to a server. The entire project is presented as a tree few in a side panel. Clicking on a page displays it in the main editing area. Rather than opening and closing documents, you just click between them. Above the Project tree is the Workspace. Double-clicking a file in the Project tree will display it in the Workspace, which is really just a handy way of putting a few files from various places in a project within easy reach. They can also be dragged from here to create new windows, or new tabs in existing windows.

Espresso also provides Snippets—pieces of text that can be inserted into a document simply by clicking on them, or by assigning them to key commands. It comes with some standard ones, such as DOCTYPE declarations, and you can create your own. The UI for listing and selecting them doesn’t seem like it will scale very well, but the feature is quite useful. I’ve already created one that sets up a basic HTML file with a single click, and another for linking in a style sheet.

It isn’t perfect. It doesn’t seem to be quite as refined as CSSEdit, and I would expect them to have a bit more in common. It is missing CSSEdit’s Milestones feature, which seems like it would be a natural fit. The preview is missing CSSEdit’s X-ray view, which is invaluable. I would also like to see some integration, such as the ability to open a CSS file in CSSEdit from within an Espresso project.

Espresso is an acceptable first version that I will likely use often when I don’t need the heft of Dreamweaver. It will likely replace Bare Bones Software’s TextWrangler as my go-to text editor.

Designer’s Toolbelt: GammaSlamma & Name Mangler

Until relatively recently, I haven’t been able to make much use of PNGs in my web application UI designs. IE 6 doesn’t support the alpha channel that allows for partial transparency. However, IE 7 now has wide enough adoption that we are able to drop support for IE 6 in some cases. Even better, our developers have started using GWT for our client-side development, and it applies a fix that causes transparency to work in IE 6.

So, it was only a few months ago that I started running into the gamma correction problem. You can read a detailed explanation of the issue if you are interested, but the short of it is that when a graphics application creates a PNG file, it stores the gamma values for the display on which it was created. This then allows the browser to adjust the colors in the graphic to match on various displays. While this might be a good thing for photographs, it is extremely problematic for graphics meant to match colors on the page specified in CSS, as those colors are not adjusted. This leads to color inconsistency within a page—egads!

I found a free application called GammaSlamma that strips all gamma information out of the PNG. Drag a bunch of PNGs onto the application icon and presto-chango, all of the colors within the page match as they should.

There’s just one small annoyance. It creates new versions of the files, leaving the old ones, and adding “_slammed” to the file name for the new ones. That’s not part of my naming convention, so I have to rename all of the files. That’s where Name Mangler comes in. This is another free download, although donations are welcome. The application makes it extremely easy to replace a string in a file name (“_slammed” for example), as well as sequential numbering, changing case, setting extensions, and more. It does batch processing and can even create droplets for frequent drag-and-drop use.

Designer’s Toolbelt: FileMagnet

While I have downloaded a number of free applications for my iPhone, there are only a few I have purchased—not because I don’t think they are worth it or don’t have the need, but because I just haven’t taken the time to really think about what I need and analyze the options.

I recently learned of FileMagnet, from Magnetism Studios, when they were sponsoring Daring Fireball (effective advertising!), and immediately knew that it was an application I needed. I may have mentioned before that I use Yojimbo to collect documents and articles that I either want to read or have read and want to keep for future reference. This works quite well with one caveat. I haven’t been reading the items I’ve been collecting. They get thrown into a collection titled “Unread”, so I am secure in the knowledge that they are there and marked for later perusal, but I don’t spend time reading them while I’m sitting at my computer, and I don’t print them out to have for reading elsewhere.

FileMagnet allows me to put documents (PDFs, MS Office Docs, iWork, images, movies, and audio files) on my iPhone and read them. There is a desktop component into which I drag any files I want to have with me. When I launch the application on the iPhone, it immediately connects over wifi to the desktop software and slurps up the designated files.

Now I have the articles with me and can read them during those little moments of downtime when there’s nothing better to do. I feel empowered when I know that I have a solid process in place for getting things done.

Designer’s Toolbelt: What the Font?!

What the Font?! is a great little web application provided by MyFonts.com. You can upload an image file or point to one on the web by URL, and it will analyze the image looking for glyphs. It then renders multiple copies of the image, each with what it perceives to be a glyph highlighted. Beside each image is a field containing the glyph it recognizes in the image. You can make corrections to the ones it has gotten wrong. Then you tell it to identify the font. The application returns a list of fonts that it believes to be similar, with the most likely match at the top. Links take you to the foundries that sell the fonts.

It isn’t perfect, and you do need a sizable image to get good results, but it is extremely useful. Why, just yesterday I was working on my halloween costume. My wife and I are going to dress up as the Mythbusters, and as part of the costumes, we’ll be holding signs that say “Busted” and “Confirmed”. I wanted to know what font they used to make those signs on the show. What The Font?! flawlessly pointed me to Just van Rossum’s FF Confidential.

Every designer should have MyFonts.com bookmarked.

CONFIRMED

Designer’s Toolbelt: CopyPaste Pro

I’ve tried a couple of clipboard utilities in the past, but I finally found one that works in a way that I find useful. CopyPaste Pro from Script Software automatically builds a clip history of everything you copy to the clipboard. If you want to paste something other than the most recently copied item, use the standard Command+V to paste but continue holding the Command key for a second. The clip browser will open, allowing you to see as many of your past copies as you have specified in the preferences (I set mine to 30). It also has an archive wherein you may store clips you want to keep indefinitely.

That’s the meat and potatoes, but the application has a number of other useful features. It allows you to edit text clippings and paste them with or without styling. Clips can be accessed through an icon in the menu bar. You can create multiple archives to categorize your clips. There are a number of tools accessible through the menu, such as extracting email addresses and urls from a clip and sorting them, sending clips to email or your browser, clean up text by removing line breaks and indentation.

The application isn’t perfect. One significant issue is that it doesn’t get anything copied from Photoshop. I believe this is because Photoshop doesn’t use the OS clipboard for internal copying and pasting. But, overall, it is a powerful tool that saves me a lot of time. It’s empowering to know that I can copy away willy-nilly before switching apps to where I want to paste things. It’s $30 well spent.

Oh, and yes, this is another Mac OS X only application.

Designer’s Toolbelt: Versions

As an Interaction Designer, I work very closely with software engineers. To that end, I must integrate my own processes and tools with theirs. In the past year, my company decided to make the switch from StarTeam to Subversion for version control. I’ve been involved in two projects recently for which I’ve had to check files in and out of Subversion. I’m not about to do this using a command line, so I need a client with a GUI. Tortoise seems to be a favorite on the Windows side, but there is no Mac version. Up to just a couple weeks ago, I was using a tool called Subcommander, which was the best I could find. However, it was clunky and unintuitive. My experience with it was, at best, a struggle. Then, on June 5th, Pico and Sofa announced the availability of Versions.

A year after its development was announced, Versions is currently in beta. Even so, based on what little I’ve used it thus far, I would say it is far better than any other Mac client out there. Not having used Tortoise, I can’t speak for the WIndows side. As described on their website:

Versions provides a pleasant way to work with Subversion on your Mac. Whether you’re a hardcore Subversion user or new to version control systems, Versions will help streamline your workflow.

Okay, so it isn’t a design tool, per se, but it is a tool that makes this designer’s job less frustrating.