During these last few months I created and published an online font viewer that lets you browse through your catalog of installed fonts using only your web browser. The tool is called My Fontbook, and though it is primarily of use to designers, it is probably pretty handy for anyone trying to find an alternative to Times New Roman or Arial when drafting documents.

A brief anecdotal background…

I often do a fair bit of web design and layout as part of my duties as a freelance web developer. The aesthetic aspects of my work are a joy, but I feel like they can drag on for hours – days even – with no end in sight. The seemingly endless adjustments of a pixel here and a rounded edge there do not possess the finite nature of software programming. With software, it is complete when it works. Visual art does not have such a clear boundary.

Typography

At some point in the design process, usually early on, I go through the steps of settling on a combination of fonts to use. Usually this requires a heading font and then another typeface for the body content, and possibly a third or fourth font for sub-headings or navigational elements. I have a short list of my favorite fonts, but that does not stop me from opening Vector Designer, creating several text examples and then engaging in the meticulous process of applying nearly every font in my catalog to the example text.

After thirty minutes of this, I am typically left with a dozen or so typefaces from which to experiment with further. In January, I set out to find some font viewer software which would display my entire font catalog with samples and save me some time in the design cycle. There are many font management tools available on the market (some quite good), but I had to both pay a licensing fee and then install yet another program on my computer. If you have not heard before, the more crap that you install on your computer, the crappier it runs.

Font Viewer

I tried to find a font viewer online, that works from the “cloud” (in my browser), but there were not any suitable options. So in a effort to save myself fifity bucks, I spent considerable time making My Fontbook, and now you can use it for free.

If you use it, and you like it, leave me a comment on this blog.

link: My Fontbook font viewer

One of the design challenges I faced was creating a careers page for the firm. They use this page to list available opportunities and allow engineers to apply for employment online. From a design standpoint, I could not use the standard photo of yuppies standing around cross-armed in starched white shirts looking smug. It just doesn’t fit the image of a team of sun-drenched Texans covered in oil and grease.

I looked at photos of guys working in oil fields, but most of them are not very artistic and convey some burden of back-breaking labor. Not exactly enticing imagery when our target prospect likely has a masters degree in geologic science.

I finally created the following graphic using Illustrator. The site is not yet launched (officially) so I cannot provide a link or specify the client. The image is of a man who works in the oil fields of South Texas near the bay at Galveston. I added the caption for the purpose of this post and is not included on the client site.

Another time-saving approach was that I envisioned what elements I wanted to include and searched for exact matches to my vision on iStockPhoto, in contrast to the much more time consuming process of searching through an entire visual catalog related to “radio”. I originally intended to feature a smaller version of the hanging microphone so the entire mic would be visible. I made a mistake when cutting up the image in Pixelmator and ended up with this giant, very dramatic detail of the mic. I think is works better than my initial idea so I left it. This is the first time I have been involved in my father’s efforts to market himself, and he conveyed a great deal of enthusiasm about the result.

link

ImageWell is a very lightweight image application that allows you to drag and drog images to make adjustments and then drag and drop the edited image onto your desktop or into another application for use. For example I can drag an iPhoto image directly into ImageWell, add borders, resize for web, and then drag the finished image into my blog software for publication. Scaling the image and setting the file quality are a snap and ImageWell will even generate a random file name to shave seconds off your workflow.

You can save an image as a template to easily apply the same process to a batch of images. Most of my photos that I publish on this site with borders and shadows are done using this technique.

Here is a screen grab of the ImageWell interface that I have summarized using ImageWell.

And here is the Edit Screen.

ImageWell does not do everything and will not replace Pixelmator, VectorDesigner, or Photoshop, but it does a few things very well. For $20 it will quickly pay for itself in time saved.

[UPDATE] I recently checked the memory usage for ImageWell using the Activity Monitor, and this program is a beast for memory usage. Upon launch, the ImageWell consumes 129 MB of system memory, compared to 150 for Adobe Illustrator, and a paltry 22 MB for Vector Designer.

Link: ImageWell

link: JLern Design

This interface approach reminds me of the work of Jef Raskin, an early Mac pioneer and user interface researcher. The Raskin Center is working on new techniques to interface with data as demonstrated in the following concept interface.

Raskin zoom demo