Grayscale made my day

By Luke Smith on October 18, 2005 11:08 PM

The highlight of my day today was desaturating a set of icons that I'd created. I'd created these nice colorful—in a minimalist way—icons for representing different language entities in the web application I work on. Terms, clauses, rates, rate sheets, and documents. These entities get jumbled together to create a contract document. Well, sometimes contracts are amended, so I had to deal with indicating that certain bits of a contract were "effected" by the amendment. We're calling it scope, though I didn't have a hand in naming it. So certain terms or clauses or rates might be in the scope of the amendment. So how do I communicate that? And what, precisely, am I communicating? In a flash, I conceived of a simple yet elegant solution: desaturate the icons I already had. I also lightened them a bit for effect, but the end result was not only amazingly simple, but a perfect fit. My task was to communicate:
  1. This is a (term/clause/rate/etc), and
  2. The language here does not reflect the final legal language of the contract
So basically, this bit of language is "inactive" within the context of this contract. I also added a light gray background to the language containers, lightened and italicized the text, and added an additional icon indicating the presence of an amendment in the meta region for overkill I guess* the icon has an informative title/tooltip as well as image, and the meta isn't always visible. So now when perusing the document, you see colorful icons and black on white text for active language, and grayed icons and text for inactive language. It's all about conventions. Gray something out and it's inactive. It was the mental dicovery that what I was trying to communicate could be described as an active state. When you're surrounded by a perception of things, you tend to prescribe to that perception, and "inactive" was not in the vocabulary of the general perspective. Well, not until now. I asked my boss for some feedback on a related issue (but I considered the grayscale icon issue closed) and he started down the path: "We're not trying to say that they're inact—...wait. Actually, that's exactly what we're trying to say" Of course context plays an equal role here. If I were listing language components in a neutral environment, graying the icons would communicate that they were inactive in a general sense. But given their display within the context of an amended contract, the communication is clear. The simple (and I mean simple) elegance of the solution made my day. Yay me.

No TrackBacks (http://lucassmith.name/mt/mt-tb.cgi/40)

ls.n

LucasSmith.name

Luke and Heidi

I'm Luke. I am a front end engineer at Yahoo! on the YUI team.

Mostly I write about code stuff, but occassionally I'll mix in some real life. You've been warned.

Archives

Tags

Feeds

Subscribe to feed Recent entries

Content licensed under Creative Commons

Code licensed under BSD license

©2005 - 2010 Lucas Smith

Powered by Movable Type