is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Vice President of User Experience at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. Refer to the advertising and sponsorship page for inquiries.

Menu

To the Vector Go the Spoils

Remember how I created those Aqua-style sliders and buttons a few weeks ago for that project at Behavior? After having finished designing them in Adobe Photoshop, I had come to the realization that they needed to be built using Adobe Illustrator instead, so that the buttons would scale easily and be less processor-intensive when used in Macromedia Flash.

So here are a few of the widgets that I built in Illustrator, with one of them scaled up to show how it maintains its fidelity at larger sizes. It took quite a bit of fussing around to get comfortable working in this style, but I managed to do it. They were about as difficult to build in Illustrator as in Photoshop, but I can’t imagine how much more difficult they would have been had I not essentially ‘sketched’ them out in bitmap form, first.

The irony of the whole effort was that, having so painstakingly rebuilt them with vectors, we ended up using Flash’s Trace Bitmap feature to trace pixel-rendered versions of these widgets anyway. All the extra care I had invested in creating special blends and gradients for these buttons using Illustrator’s somewhat kludgy tools resulted in fairly bloated Flash objects. I was a little disappointed in this, but not too greatly because I felt it was a worthwhile experience to learn this illustration method.