DesignAday

Designer’s Toolbelt: Type Connection

I’ve found that one of the trickier typographical concepts to teach is the proper selection of multiple typefaces for use within a design. That’s where Aura Seltzer’s Type Connection comes in.

Type Connection is a game that helps you learn how to pair typefaces.

Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

Type Connection is Aura’s MFA thesis project. Exquisitely designed and crafted, the site is a great example of education through gaming. And if your are really interested in type, make sure you check out her resources page.

This is great work. I’d say she deserves to graduate.

Another Shoebox

I have a number of software tools that I use for collection of digital information. I’ve been using Yojimbo to catalog articles that I want to keep, especially for use in my classes. NoteBook is my preferred tool for organized note taking. NetNewsWire automatically pulls down all of my RSS subscriptions, and iTunes does the same for podcasts. I’m still using Ta-da List to keep track of DesignAday topics, while Wunderlist is my to-do list. And, of course, Delicious holds links that I share with my students. To paraphrase Herb Simon, I’m not lacking information; I’m lacking time to attend to information.

I have come to love the relatively new Reading List feature in Safari. I don’t have to decide immediately whether or not I want to save an article in Yojimbo where I may never actually get around to reading it. It has also become a solution for getting things from my iPhone into Yojimbo. Whereas before I would mail URLs to myself, I now just add them to my reading list. With iCloud, the reading list gets synched between my iPhone, my work laptop, and my home desktop. I do wish the “Add to Reading List” option was available from within NetNewsWire—as it is, I must first tell it to open the page in my browser.

The one problem is that, just like my other collections, the reading list is collecting items to be read faster than I am reading them. I can’t keep up with it. I throw an article in their with the secure knowledge that I won’t lose it, but just like shoeboxes of old photographs, they sit in my internet attic collecting dust. I just purged a number of items from it, and it’s still 57 items long. What I really need is some kind of feature that encourages me to read the items in the list.

Designer’s Toolbelt: xScope

The Iconfactory has released version 3 of one of my favorite little utilities: xScope. This is a significant update the makes the already awesome suite of tools, well, more awesome. Take the Loupe tool, for example. It now has two modes: the original mode that showed an enlarged view of the area around the cursor and one in which the window itself is a magnifying glass, allowing you to set it over the area you want to enlarge while doing other things with your mouse. The window is resizable, so you can decide how big or small an area you want to enlarge. A menu allows selection of the format in which you wish to see the color of the center point, and another menu allows you to view the area with different types of color blindness. You can even drag out areas on the grid to measure their pixel dimensions.

I already found this tool to be indispensable. Now it goes all the way to eleven, and that’s just one of seven imminently useful tools. It’s available on the App Store for $29.99, or you can buy a $19.99 upgrade directly from The Iconfactory. It’s a must-have for anyone doing design on a Mac.

Designer’s Toolbelt: Font Dragr

Font Dragr is a nifty little web utility that allows you to test fonts for use on the web. As described on their website:

font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.

It alleviates the cumbersome nature of testing custom fonts and allows you to quickly and easily load in a font, play around with it and see if it’s the right one for you.

You can literally drag a font file (ttf, otf, or woff) right into the browser window. The site adds the font to a list on the page and changes the text on the page to display using that font—slick as a whistle.

Even better, they provide a bookmarklet that will add the capability to any page you visit, so you can test fonts against your own site design with live content. It even allows you to target specific elements.

Unfortunately, it doesn’t seem to work in Safari. I used it in Firefox, and it claims to work in Chrome.

Hanging by a Thread

 Apple gave Rosetta its walking papers, and I was surprised at the number of “broken” applications I had lying around after installing Lion. Some I hadn’t been using, some I used occasionally, and others I relied on. The former, I purged; the latter, I replaced. I’ve been getting along just fine.

 I just realized yesterday, however, that none of my Director projectors will run. Now, I don’t like losing my work, and I have quite a bit of work, stretching all the way back to my senior year of college, that was created in Director. So, I immediately hit Adobe’s forums. I learned that there is a patch for Director that adds an “Intel Binary” publishing setting. You have to tell Director to search for updates—it won’t do it automatically.

Well, I installed the patch and proceeded to open one of my files. After it had updated the file and saved a backup of the original, I published a projector. When it ran, I was upset to find that none of the text was displaying in the correct font. All of my Director projects have the fonts embedded, so there shouldn’t have been a problem.

I did more forum-searching and learned that there was a bug with the Director 11.5.8 patch that kept embedded fonts from working. The 11.5.9 patch was released just a couple weeks ago, and fixes that bug. I confirmed that I got the most recent patch. Then I opened the original file again (not the updated one), and the fonts displayed correctly. There are some formatting options that I have to address before publishing, which is annoying, but at least I’ll still have them, and hopefully they’ll be viable for years to come.

Director, I do believe, is on it’s last legs. Adobe has always treated it as a second-class citizen, at best, and I would be surprised to see an 11.6, let alone version 12. I haven’t used it to create anything new since I upgraded to 11.5. I’ve only used it for maintenance of existing files. It certainly shows its age—would you believe it still only has one level of undo?

I’ll be sad to see it go. It was my tool of choice for creation of animations, presentations, and prototypes for a good thirteen years or so.

Designer’s Toolbelt: Espresso 2

I’ve been using MacRabbit’s Espresso as my primary HTML editor since it’s release, but it’s gotten a bit long in the tooth. It’s lacking support for CSS 3 and HTML 5, and it has never received a lot of the great features they already had implemented in CSSEdit. I was excited to discover recently that they have released their Kaboom version of Espresso 2. In other words, it’s a beta release. I tried it out today, and I’m quite pleased with it.

CSSEdit has been integrated with Espresso, so it is now a single application, as it should be. Espresso benefits greatly from the live preview and inspection tools CSSEdit has always had, and the CSSEdit functionality can now take advantage of the project management and publishing features of Espresso. It’s so much better than using the two of them separately. And of course, it now recognizes all of the new selectors and syntax for HTML 5 and CSS 3. I haven’t yet experienced any bugs, so go ahead and give it a try.

Designer’s Toolbelt: CardRaider

I took over 200 photos during my vacation last week, and last night, when I imported them into iPhoto, I discovered that the card was corrupt and that about half of them couldn’t be read. That scared me. But then I figured that surely someone is making money off of this problem, so I did some Googling. I found a few photo recovery tools and decided to give CardRaider a go, because it’s available on the Mac App Store. I downloaded a free trial from ecamm’s site, first. The test proved that most of the photos were fully recoverable, so I purchased the app for $19.95. Fifteen minutes later, I had all of the photos safely saved off of the card. Even if I never have to use the app again, and I hope I don’t, that’s twenty bucks well spent. I’ll feature one of them this Friday.

Designer’s Toolbelt: IE7.js

This JavaScript library has been around for several years, but don’t let its name fool you. While it can be found in Google’s repository under the name IE7.js, it has been regularly updated with more recent versions titled IE8.js and IE9.js. But, I’m getting ahead of myself. Just what, exactly, does it do?

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG [sic] work correctly under IE5 and IE6.

Consequently, IE8.js will make previous versions behave more like IE 8, and IE9.js will make all previous versions behave more like IE 9. To see the list of selectors, properties, and elements that are enabled, take a look at the demo page. I’m using it to get IE6 to cooperate with the :hover and :active pseudo classes.

Designer’s Toolbelt: jQuery Resources

I explained last week that I am learning jQuery and applying it in my work. I’ve found a number of excellent resources that I’d like to share for any other designers inspired to do the same.

jQuery.com
First, of course, is the jQuery website itself. This is where you can download the most recent version, view the official documentation, and access discussion forums. The site includes lists of tutorials, plugins, and other resources. This is a good place to get started.

jQuery API Browser
Providing both categorical and alphabetical listings of the API, this browser provides a dynamic filter that makes it easy to find the element or selector you are looking for and then provides examples of use. If only it were updated for version 1.5. Bookmark it now.

jQuery UI
Once you are comfortable with the basics, you’ll want to add jQuery UI to your kit. This additional library extends jQuery’s ease-of-use to include common behaviors and widgets like resizing objects, drag and drop, sorting, date pickers, tabs, and progress bars. I’ve already put it to good use on some robust pop-up dialogs.

jQuery for Designers
This site was created with you and me in mind. It’s chock full of tutorials on using jQuery to implement specific features, such as populating select boxes and form validation. The tutorials are categorized by difficulty (i.e. easy, medium, hard) and include demos, code, and in some cases, video. The site is run by Remy Sharp, a well-known speaker and author on HTML, CSS, and JavaScript, and a past member of the jQuery project team.

jQuery Fundamentals
This is an online book by Rebecca Murphey. You can use it directly on the web, but I recommend downloading it from GitHub where you can get an offline version of the book, demos, and exercises with solutions. I found the exercises especially useful, as it forced me to apply what I had been learning. Then I could check my work against her solutions. I almost always implemented things differently (typically less efficiently), and it was very educational to compare my solutions with those provided as exemplars.

jQuery 1.5 Visual Cheat Sheet
It’s the jQuery API laid out as a four-page PDF by Antonio Lupetti. Very useful for quick reference.

Finally, for a great list of additional resources, visit Hein Maas’ site.

Designer’s Toolbelt: jQuery

Dave Malouf recently tweeted that a UX professional should prioritize improving visual design skills over technical skills, and I wholly agree. Even someone that primarily performs user research studies and usability testing will benefit far more from understanding design than programming. But what about an interaction designer that already has a degree in graphic design and has mastered HTML and CSS; what should he pursue? There are multiple answers, of course, including business and entrepreneurship, but at the moment, I’m deepening my technical skills with jQuery.

For every project I’m on, I’m responsible for implementing the UI in HTML and CSS. I currently document behavior and work with developers to make sure it’s implemented as intended. I’ve been satisfied with this in the past, and after all, it’s a big improvement over leaving the entire UI implementation to developers, which I used to do several years ago. Lately, however, I’ve been wanting more control of implementation of UI behavior. I’ve fiddled with JavaScript, but have never been comfortable with it. jQuery is just what the designer ordered.

There are quite a few JavaScript libraries out there, such as MooTools, Dojo, and Prototype. I settled on jQuery for a couple reasons. In my admittedly brief research, it seemed that jQuery is currently the most popular, and therefore has the most resources and support. Developers at my company have employed it for a couple of things, so I’m not introducing something entirely new. Most importantly, it uses the same selector syntax as CSS. This has made it extremely easy for me to grok. With just a few days of reading, working exercises, and playing around, I’ve been able to accomplish some nifty stuff. If you already know your way around HTML and CSS (and already have a strong visual design foundation), I strongly recommend it. Next week, I’ll share a few related resources.