Tools of the Trade


I’ve come a long way from the days when my primary design tools were Photoshop and Illustrator. As I develop new methods, refine my processes, and figure out what works and what doesn’t, I usually get to the point where I need something that my existing software doesn’t do. At this stage, I’ve grown to rely on a wide variety of programs and utilities: apps for design, development, communication, and organization.

I’ve found the following three apps to be especially useful. Maybe they’ll be useful to you too.

LittleSnapper


I get a lot of good ideas from things I see online: illustrations, typefaces, site designs, colors, etc. Thanks to Twitter, blogs, and the discoveries of my excellent colleagues, I’m never lacking interesting and inspiring things to look at. The problem has always been where to put them.

I used to have an “inspiration” folder for stuff like this. The inspiration folder was a largely unorganized jungle of downloaded pages and images, which, while limitedly useful for locating things I remembered to look for, was cluttered and didn’t encourage casual browsing. The other problem was collecting things that weren’t easily saved, like a part of a web page or a shot from a video. That meant taking a screenshot, pasting it into Photoshop, and saving it – not impossible, but not very convenient. It was a mess.

I ditched inspiration folders after I found . LittleSnapper is sort of like the iPhoto of inspiration folders: it takes screenshots (or any other images you want to add to it) and then organizes everything in a library. All images can be edited with a basic set of tools – shapes, text, and arrows for annotation – and shared via FTP or Flickr.

This might sound familiar if you’ve ever used Skitch. Both LittleSnapper and Skitch are screenshot takers with similar capture abilities – timed screenshots, full web page capture – and they both allow annotating and sharing shots, but the differences end there. Skitch is best for quick and easy annotating and sharing; LittleSnapper is a full-fledged scrapbooking tool for assembling an image or pattern library.

If you’re diligent about organizing – which I’m trying to be – LittleSnapper provides a number of ways to keep things findable, starting with its own built-in categories: “Screenshot”, “Illustration”, “Mockup”, and a couple of others. Conveniently, it’ll automatically categorize items if it knows their origin, classifying a screenshot as “Screenshot” or a saved web page as “Websnap”, and images can be tagged and assembled in smart collections.

Besides its organizing abilities, LittleSnapper comes with a built-in Webkit-powered browser. It’s not meant to replace a regular browser, but for sites with a lot of things you want to snap – like a Flickr gallery or portfolio – it’ll save a lot of switching back and forth between your browser and LittleSnapper. (You can also install the for quicker access from your regular browser.) The built-in browser is great for snapping screenshots of entire pages, and it’s worth noting is that LittleSnapper doesn’t just save an image of the page – it also saves the page itself in webarchive format. If you ever want to review the original page, it’s right there in your library.

LittleSnapper can also select individual page elements – tags, paragraphs, whole modules – just by clicking them, no marquee-dragging needed. I’m in the process of building a pattern library, so a lot of times, there’s only one thing on a page I really want: an image, or a search box or comment form, or maybe an article layout. It’s a small thing, but if you’re going through an entire page of images and you want to snap each one individually, as I’ve done, clicking instead of dragging really speeds up the process.

You don’t have to have only one library. I’ve found it’s better to have multiple libraries for specific topics or projects, both for organizational and performance reasons. Like iPhoto, LittleSnapper can have multiple libraries, although, also like iPhoto, this feature isn’t immediately evident. There is no “New Library” command – the only way to create a new library other than copying an existing one is to hold down Option when launching LittleSnapper. Similarly, you have to switch libraries under “Advanced” in Preferences or, again, by holding down Option at launch time. It’s not that big a hassle but it’s still awkward, especially considering that having one huge library is not, in my experience, the best way to do things. My biggest library contains 3,119 images and weighs in at 3GB, and scrolling through it is noticeably laggy.

All in all, LittleSnapper is a really useful tool if you need to collect visual snippets and ideas. Check it out at or the Mac App Store.

Typecast

beta.typecastapp.com

I’ve never been satisfied with the way Photoshop renders type. No matter which anti-aliasing method is applied, text in Photoshop always looks choppier than native Mac or WebKit rendering, especially at smaller sizes. (Arial and a few others on the “sharp” setting look like different fonts entirely.)

So, not too long ago, I started incorporating browser-rendered type into my mockups. I’d put the text I needed on a page, style it with CSS, and paste screenshots of the result into my designs. It worked but it was hardly convenient, since I had to create a new kit in Typekit, host it somewhere so Typekit could find it, and then hand-code the associated type and layout CSS. I kept wondering how hard it would be to build a point-and-click web app for in-browser type styling.

Tim suggested I check out Typecast, a web app that does exactly that. It’s great for creating styled content that can be pasted into a mockup, but I’d say its biggest strength is making it easy to compare and experiment with different fonts. Typecast currently offers typefaces from Fontdeck, Fonts.com, Google Web Fonts, and Typekit, but accounts with these services aren’t required to try their fonts on Typecast. You can paste content directly into editable columns – or, to use the official Typecast terminology, “containers” – create as many containers as you need, and use any typeface from Typecast’s library. Containers can be widened or narrowed by dragging, and all the most common HTML tags – paragraph, blockquote, and headers – are available under a dropdown. (Typecast doesn’t include anchor tags at this time.) It’s pretty straightforward.

The main Typecast interface

The design is nice. The container columns are arranged side by side on an otherwise uncluttered page, sort of like clippings on a wall, or a table with sheets of paper spread out on it. The horizontal scrolling feels a little unnatural initially, but Typecast has tried to mitigate that with numbered buttons in the upper left that jump to a particular column.

Typecast will also generate CSS from your styling. This is especially convenient if you need to quickly style something, like a WordPress theme with a nice layout and ugly type choices, or a site based on one of the bare-bones WordPress themes. At this point, though, it doesn’t go the other way – you can’t edit the CSS to style an element. Although CSS monkeying is admittedly what I was trying to get away from, there have been moments when hand-tweaking the CSS would have been quicker than working with the palette.

There are still a few rough edges, hence the “beta” in the URL, but I’ve found Typecast to be really useful even as a beta. They seem to be hard at work on improving it – they just added the ability to change the background color, which is a feature I’d wanted to see for a bit – and they’re extremely responsive about feedback. I think the final version is going to be pretty cool.

Check out Typecast at beta.typecastapp.com.

Fontcase

Bohemian Coding

I found Fontcase a little while ago while searching for font management software. Linotype’s free FontExplorer, which I’d been using up until that point, stopped being free, and I decided to hold off on buying it in case there was anything better. I’d liked FontExplorer, but after testing Fontcase, I decided to go with that instead.

If LittleSnapper is iPhoto for screenshots, Fontcase feels like iPhoto for fonts, down to the way fonts and font families are represented as tiles and mousing over a tile displays the different fonts in that family. Colored bars on tiles indicate whether or not a font is activated and what kind of font it is (green bar for user-installed fonts, yellow and black stripes for system fonts). Like any good font manager, Fontcase also has a number of organization features. Truth be told, I haven’t actually organized my fonts at this point since I can usually find what I need just by scrolling or searching, but if I was so inclined, I could create collections (similar to albums), genres (descriptive categories like “Sans”, “Script”, “Dingbat”, etc), and tags.

The main Fontcase window

Fontcase also has a really nice type tester called Typesetter. Typesetter provides three templates where you can experiment with different combinations of fonts: Default (a series of headers with paragraphs), Header (a large header and sub header), and Columns (header, intro paragraph, and then two columns of text). You can’t modify the layout of the templates – add a third column, for example, or widen the columns – but they’ll still give you a sense for how well a particular font works on paragraphs.

Typesetter’s killer feature, however, is its ability to edit content and typefaces on web pages. Like LittleSnapper, Fontcase comes with a built-in web browser – enter a URL into the address bar and Typesetter will load the page, at which point you can edit all text on that page, as well as changing it to whatever typeface you want. One use of this would be to augment the somewhat limited templates I mentioned above by making your own templates and then loading them in the browser. (The templates need to be on a server, though – Typesetter won’t load local files, i.e. URLs that don’t start with “http”.) Also, Typesetter’s browser won’t display fonts from Typekit. If you’re testing a Typekit-heavy page, the text will be styled in whatever your backup fonts are. If you want to see how one of your own fonts would look in a layout, though, it’s extremely useful.

Get Fontcase at Bohemian Coding or the Mac App Store.

Got a tool or utility that makes your job easier? Tell me about it below.

4 comments

  1. Chris, thanks so much for this helpful review!

    I love Fontcase and use it often, but never knew about the Typesetter tool… thanks for the tip. I’m also enjoying experimenting with Typecast.

    I’ll have to check out LittleSnapper… strangely, I’ve never really saved things I find online. This makes me think I should start!

    Here are some tools from my “stash” that I can recommend:

    Evernote: https://evernote.com/
    I take notes for everything, and often need a place to jot down thoughts or organize ideas. Evernote is a note taking app that stores your info in the cloud, so you can easily access your notes from any computer or device. You can also easily organize them into folders, turn them into a URL to share with friends, and do some basic styling if you want your notes to have some visual flair.

    Golden Ratio Calculator: http://goldenratiocalculator.com/
    This is just a web tool, but I do refer to it occasionally if I’m feeling particularly geeky and want a perfect golden ratio in my design :)

    COLOURlovers: http://www.colourlovers.com/
    This is also a website with a community. I haven’t used it in awhile, but I used to spend a good amount of time playing with their color palette creator tool. They’ve since expanded to include pattern and shape tools. Everything you make in the site is shared with the community. A great place for inspiration!

    Thanks again for your post, Chris!

  2. Thanks, Rae and Jeff. I use Evernote all the time, but I’d forgotten about COLOURlovers. It’s one of those things I’m surprised I don’t use more often. (ColorSchemer is another one.) They’re both great for finding color combinations that wouldn’t have occurred to me.

    That Golden Ratio tool is awesome. I didn’t know about that. As long as we’re on golden ratio nerdery, take a look at Twitter – they’ve been golden for a while now. So, apparently, is Apple’s iCloud icon.

  3. Really great post Chris. After 2 years saving url’s,files,images,fonts and much more, my library is a complete mess. I’m going to take some time of to clean it up and use the tools you mentioned.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *