Digital Trading Cards?

Okay, I came across this site and was like what the heck is this? I’m a designer and so I like cool illustrations, but I was never into card collections or anything like that. My mom wouldn’t let me have Garbage Pail Kids but I had a few baseball cards when I was younger. At any rate, this new site called neonmob is pretty cool. The website is really nicely done and the game mechanics have me intrigued. They have created a system where some of the items in the collection are more rare than others. In the real world, this idea of scarcity for tangible objects has been around for a while, but with digital objects, we’ve grown accustomed to a mentality of cut-n-paste everything.

I’m really curious to see where this goes.



Reversing Trackpad Scroll Direction in Windows

When OSX Lion was released last July, I was a little surprised by the bold change to have scrolling reversed by default. I totally get why they made the change, but it’s amazing to think about how much frustration this must have caused for people who have been scrolling the opposite direction for a while now. I was onboard with making the change so I embraced the new, more natural approach, and began to retrain my brain. Surprisingly, it didn’t take very long to get used to the new scroll direction in Mac OS, but switching over to Windows on my MacBook Air left me feeling frustrated again. I tried looking for updated Boot Camp drivers but didn’t find them.

Finally, I came across some instructions for adding the behavior to Windows using AutoHotKey: How to Get the Worst OS X Lion Feature in Windows (Reverse Scrolling)

Now I’m a happy camper again.

Correct Usage of the Ellipsis (…) in UI Text

Trying to figure out when and why to use the ellipsis within UI can be somewhat confusing. It isn’t always your best bet to look at other products for the answer because the guidelines are often not followed. If that’s the case, you might be wondering, if the big software companies don’t even get it right, then why should I care. Well, even though it won’t make your app crash, proper usage of the ellipsis will allow your users to be more informed about what will happen when they initiate a command.

Here’s what the ‘big boys’ have to say on the matter:

Windows User Experience Interaction Guidelines

Proper use of ellipses is important to indicate that users can make further choices before performing the action, or even cancel the action entirely. The visual cue offered by an ellipsis allows users to explore your software without fear.

This doesn’t mean you should use an ellipsis whenever an action displays another window—only when additional information is required to perform the action. Consequently, any command button whose implicit verb is to “show another window” doesn’t take an ellipsis, such as with the commands About, Advanced, Help (or any other command linking to a Help topic), Options, Properties, or Settings.

Generally, ellipses are used in user interfaces to indicate incompleteness. Commands that show other windows aren’t incomplete—they must display another window and additional information isn’t needed to perform their action. This approach eliminates screen clutter in situations where ellipses have little value.


Apple Human Interface Guidelines

When it appears in the name of a button or a menu item, an ellipsis character (…) indicates to the user that additional information is required before the associated operation can be performed. Specifically, it prepares the user to expect the appearance of a window or dialog in which to make selections or enter information before the command executes.


Font rendering issue fixed (finally)

For several months now I’ve been seeing strange artifacts appear for certain fonts when viewed in my webkit-based browsers such as Chrome and Safari, as well as in Firefox. This was only happening on my Windows machine and didn’t show up in Internet Explorer for some reason. After looking at the source for these pages, they all seemed to be referencing Helvetica as the primary font in the style sheet.

Finally, this post at TechRepublic helped me figure it out. As it turns out, the corrupt font is not actually named “Helvetica”, but does show up in various apps like Word, etc. as Helvetica. This strange font appears in the Windows/Fonts folder like this. Once I deleted it, everything was all good and back to normal.

Thanks to user jerang for posting the original question. Now, I can put this annoyance behind me and move on : ) with my life.

Microsoft Evolves IE Logo

Internet Explorer Logos

Following on the heels of the iTunes icon redesign, Microsoft is sharing some of their design work as they prepare for the release of IE 9. One key difference between the way Apple and Microsoft approached their respective redesign efforts is how Microsoft chose to carefully evolve the existing design rather than make a dramatic departure.

To be fair, the scope of Microsoft’s redesign is slightly larger since they are updating a logo and not just a product icon. Still, in both cases this is the primary symbol that is associated with each of the products. In Apple’s case, getting rid of the CD was clearly the right move but I really think they jumped forward too far in one step. Smaller, more evolutionary steps may have been a better approach here.

Experimental iTunes IconJust for fun I decided to see what the iTunes icon might have looked like if things hadn’t been so rushed. The icon that I came up with is basically a blend between the old and the new, but it seems like it could work as a transition between the two.

With visual design, you’re never going to please everyone, but taking the time to carefully consider certain graphical elements is probably a wise choice. It just goes to show you how powerful these brand elements can become once the consumer has been exposed to them for a while.

Apple iTunes Icon – The Missing Link

A couple weeks ago when Apple released iTunes 10, I immediately pulled down the update. I was impressed by most of the visual enhancements made to the product. However, like many others, the new application icon left me feeling a little surprised. Since I didn’t watch the press event, I saw the icon for the first time after installing the iTunes update. My gut reaction was that it was clearly different but also seemed familiar for some reason. I’m not sure if it’s the blue gradient glow or what, but something about it looks old to me.

Although I understand the reasoning behind the decision to remove the CD, I am wondering why they felt it was necessary to go with such a dramatic change. I decided to do an experiment and interpolate between the old and the new just to see what the result would be.


As you can see, it’s an interesting exploration:

Experimental Apple iTunes Icon


I don’t think I necessarily like the “hybrid” icon any better than the new one but it was a fun little project. Aesthetically, I think the old one with the CD still comes out on top, but hey, that’s just me.

Color Experiment II

Lately I’ve been mesmerized by all the trees that seem to be transforming right in front of me every day. Just looking around I can see an abundance of vibrant colors and some truly fabulous combinations. For my second color experiment I decided to try to capture a sequence of colors from multiple leaves on a single tree. To get started, I selected a bunch of leaves from one tree, brought them inside and took a picture.

Instead of spending a bunch of time optimizing the image to create a custom palette, I decided to try out the Kuler panel that is now integrated into Photoshop CS4.

I think this is a great new feature and they’ve made it pretty easy to search for colors and add them to your swatches panel in Photoshop. However, getting new colors into the Kuler extension is another story. Unfortuneatley, there isn’t a simple way to sample colors from an open image so that you can create a new theme.

They do allow you do insert the foreground or background color into the theme as the “Base Color” so here is the process for building out a new color theme.

First, make sure you’re creating a custom theme by selecting Custom from the Select Rule dropdown. Then select the first color position and click the base color icon (two concentric circles) to make the first slot the base color. Now you can sample a color from your open image and then add the foreground color as the base color. Sample another color and then make slot number 2 the base color before adding it to your theme. Repeat the steps until all five slots have been set.

When your satisfied with the color values you can save them to a file, add them to the swatches panel, or upload the theme to the kuler website.

It was kind of a work around to create a new theme but it’s pretty cool.

Color Experiment I

Deriving a color palette from seasonal photos

It was a beautiful October day in the Snoqualmie River Valley and I thought it was the perfect chance to go out and capture some of the amazing fall colors. When I got back I wanted to do something fun with the pictures so I decided to extract some color and create a palette that was representative of the photo shoot.

>> Read

Pioneer Square Photo Walk

Exploring the nooks and crannies of Seattle’s historic pioneer square district

In Seattle, there are many cool neighborhoods which are perfect for wandering and discovering new things. Pioneer Square is one such neighborhood with a nice blend of upscale shops, combined with some nice alley-way grime. This delicate balance is often hard to find. If it goes too far in one direction, you get an area that is either too new (sterile and clean) or too old (run down and scary). Great photos can definitely come from places at both ends of the spectrum, but I think I am most successful when I’m somewhere in the middle.