My marvelous image
2010 Mar 01

It’s the Wonderneath! Come and see!

The latest show at the House of Yes in Brooklyn, “The Wonderneath”, is now showing! The early Modern day fairy tale summarizes the journey of Hailey down to the secret underground of New York City in the 1910’s, with wonderful musical numbers and spectacular circus acts.

I’m doing part of the set design for the show, so please come and check it out!

Read the rest of this entry »

My marvelous image
2010 Feb 07

The Wonderneath in progress…

I am working on some spanking new set design for the newest show at House of Yes in Brooklyn called “The Wonderneath”! Design cues come from art nouveau movement a hundred years ago.

Here is a work in progress for the rotunda platform… More to come. Stay tuned!

2009 Dec 09

Blog Blitz on Harlequin Project: Re-cap

Harlequin Project

Today’s blog blitz came as a surprise to me as I have not even completed the Harlequin Project yet, but it’s all over the news already. I do see the appeal of working with dual screens, and the potential UIs that can be productive and futuristic, though I didn’t realize the urge is this great.  As a UX designer, I’m still trying to sort this out.

Microsoft nailed the idea with Courier, and I hope they do come out with something soon, or people like me or other companies will start ‘borrowing’ it for their own.

As a record for myself, here’s a list of blogs that mentioned the project:

I had been working hard on the House of Yes Christmas Spectacular for the past few weeks, so I haven’t worked much on the tablet, except I took apart everything even more. It’s time to go back to the lab more!

Thanks a lot again, Internet!

On another note, I just won a Woot! Bag of Crap.

My marvelous image
2009 Jul 07

Browspace Concept for Mozilla Firefox

This concept was done a while ago, but I was too lazy to blog about it. It’s a little too late since voting has already ended… but anyway, since you are reading this page, you wouldn’t mind seeing something new, right?

I had been designing user interfaces for various software for a long time. Most of my work is realized in Trillian Astra, of course. Though I had already reserved all my ideas related to chat and social messaging to Trillian, there are still plenty of stray ideas left on the cutting table. I figured it will be nice to contribute some to the future of the web, like this particular contest from Mozilla Labs Concept Series. The challenge of the Summer contest is to design a replacement for tabs in a web browser.

The concept here I had designed is called “Browspace”. The general idea is to create usable tabs by employing web page rendering technologies we had discovered in developing mobile browsers into the desktop.

Read the rest of this entry »

2008 Jun 17

256 New Pixels for a GreaseMonkey Logo!

Sorry for the lack of updates last month. I had been sick for a month in May due to some deadly allergies, as well as breathing the construction dust from my new apartment (and as well as various turbulent personal matters). That means I have quite a big list of blogs I have to catch up writing!

For most geeks, today is the Firefox Download Day. However, what’s more exciting to me is the release of GreaseMonkey 0.8 last week. Besides a great slew of fixes and new functions, it also revealed a new logo I updated for the GreaseMonkey dev crew a while ago.

Trillian Monkey

The story began with a emoticon pack I did for Trillian back in 2001. As Trillian became popular, quite a few people had fallen in love with its emoticons, due to its vast selection and simplistic design. The emoticons were later ported to Trillian fan sites in GIF format, and of course, later leaked to the whole Internet (something you can never stop).

Eventually, the main developer of GreaseMonkey Aaron Boodman searched on Google for a monkey image, and some monkey.gif came up. Perhaps the square-eyed Trillian monkey were cute/decent/handsome enough, it begged for adoption and ended up in the early builds of GreaseMonkey.

It went full circle when I downloaded my copy of Firefox 1.5 and a friend pointed out the use of the monkey. I’m rather surprised and pleased that the emoticons had found an unlikely home, as it would be usually kidnapped by some Trillian instant messenger clones! I wrote an email to Aaron, and got a reply a while after.

New GreaseMonkey on status bar of Firefox

The new logo is a visual update of the old happy and smug monkey… :] I attempted to keep the essence of the smile and updated it with better drawing techniques. 16×16 is a particularly difficult size, as I cannot include too many visual information – It has to be simple, clean and crisp.

GreaseMonkey and Friends

The large version references the Firefox logo and Aaron’s comment on how he thought the original monkey is Donkey Kong. I expanded on these ideas and make a full logo out of it, so it looks like the ones from Firefox or Thunderbird. While Firefox ‘ruled’ the web by encircling the globe, and Thunderbird delivered a email on its beak, GreaseMonkey changed the web by swinging around and greasing up the Internet’s series of tubes (no pun intended!).

So that was the short story. I hope you like it, and like the logo as well! (If you don’t, I’m sure some Stylish scripts can fix it for you… hahaha) Either way, enjoy and go download it now!

2008 Apr 12

Oh my, My Apple Genius!

The song and music video, conceived by my talented activist great friend Miss Lauren Larken, criticizes the veil between a person being truly personal and a technical support acting personal for your services, while suggests that a corporate love is perhaps possible as well as we break our preconceptions and let our imagination go wild.

The kids staged a few improv dances inside and outside Apple Stores around Manhattan a couple weeks ago. I was in the dance, too, making fun of the Apple products that I love and hate, while handing out heart-shaped balloons that resemble their oh-so-glorious logo.

The video was released on Valentines’ Day, and a few performances followed.

On the back side of the project, I also designed the animation for the opening and the karaoke session. Everything was done in Adobe AfterEffects and Illustrator, the same tool I used for the over-the-top Trillian Astra preview movie. (Watch it over and over again while it’s still up!)

Photoshop/Illustrator test for iLove U
Faking the space with some simple polar distortion. Well, not so good.

Simple 3D layers and motion paths were used, plus a few custom space-y background effects inspired by tutorials of Andrew Kramer. His tutorials are intuitive and helpful, and I would recommend everyone to watch them if you are interested in animation effects more advanced than Flash.

Apple = iiLove, really?iLove U, of course!
Tada! (yeah, give me credits if you rip this off for your next Valentine's e-card)

“Subtle arrogance” through font weight: Notice how there is hardly a U, there is only i.

Imitating Apple is always educational, as you learn how to restrain yourself from using way to many effects while giving the products a nice professional finish. Just having a few pixels or centimeters off will ruin your composition, while picking the wrong highlights and shadows will end up looking like a fake. However, make sure you don’t end up ripping off the whole design!

2008 Apr 09

"A Good Skin"

WindowClipping

Not exactly a feat in design, but a feat in code optimization.

This skin was made as a proof of concept long time ago, when I designed the Custom Windows feature. As skins get more and more complex (Trillian Cordonata is 700+KB of hand code), the goal is to create a new subsystem that allows creation of skin in the least amount of code possible.

The solution is to have a base skin that encompasses everything that needs to be skinned, and to allow major parts of the skin (e.g. Contact List, Chat Windows) to be swap-able. It is unprecedented in any skinning engines in the world, as Trillian slowly becomes highly intricate and increasingly complex.

Originally based on Stixe, Custom Windows allow creation of skins that is semi-dependent on the base skin. The result is the ability for users to mix and match bits and parts of a skin, and the ability for skinners to easily create a skin as a weekend project.

“A Good Skin” contains around 20 lines of code, and only take an hour to bash out the graphics and codes.

Comparing the months and years spent on Trillian Cordonata, this is quite a feat.

You can download the skin here for a test drive.

2008 Apr 08

An Icon for a Group of Chat Rooms

Another day, another incremental build forward for Trillian Astra. As the new build 77 features a new Chat Room Browser UI design, I designed a few new icons to accompany it.

The main problem of a “Chat Room” icon is that there is hardly ever a general icon designed for it. A search on Google Images for idea reveals nothing particularly interesting:

Google Search on Chat Room icon

Most designs retreats to the method used by Chinese characters as concepts get more and more complicated, i.e. 3 chat bubbles imply that it is not 1-to-1 conversation, thus a chat room or a conference:

Hmm...

This design would work, but, until the concept of “Chat Room Groups” come up in the Yahoo! Chat Browser. And very soon we would find ourselves drowning in the vortex of the most complicated Chinese character if we put forward such logic:

Hmmmmmm..... Naaah.

The solution is to replace the icon with a new concept. In this case, I drew a little House with a chat bubble blowing through its chimney to represent a Chat Room. As users learn that a house represents a Chat Room, they will also understand that a few houses represents a group of Chat Rooms. (Let’s see how many other chat clients and chat sites would rip this idea off.)

Tada!

I know, this is pretty minute, but it saves you from a bubble bath in the Chat Room Browser. :)

2008 Mar 29

A Blank Vista Logon Screen

After having installed Windows Vista for a year, I got a little bored by the blue and green Aurora logon screen. Since I’m not particularly interesting in having outer space, sexy women, XP-inspired landscapes or some arbitrary corporate graphics as the background of the screen, I decided to make my own:

DSC03486

A blank screen.

It turns out that this is the best background in my opinion. Though very likely to be opposed by the marketing department for its lack of product identity, or to be criticized by the head of the graphic design department for being lazy, the black background seems to be the best transition between the computer turning on till the wallpaper shows up after logging on.

The black blends with the edge of the monitor screen, very much so the way the Vista design team decided that a maximized window should have a black edge.

I had also flashed my BIOS for a blank boot-up screen as well to match the whole experience.

To create a black Vista logon screen is easy. Simply go here to download a free copy of Logon Studio Vista, courtesy of Stardock. All you need to do next is to create a black bitmap in any size. Here I made it in 640×480 and saved as a PNG. The UI of the software is fairly simple, and that’s what makes you think that it is a safe process to customize your logon screen.

2007 Nov 13

I Made It I (A Zune Mod)

Poor grammar of the title aside, after picking up a refurbished mocha-colored Microsoft-made media player (known as “Zune”) from Woot!, I am pretty satisfied with owning a fully functional yet unnecessary piece of commodity: Although my cell phone does pretty much all of what it does, having a dedicated player not draining your cell phone battery is nice.

Since it is colored in mocha, it is now lovingly named “Turdis”, a music dork reference to a line in one of Radiohead’s songs, and the apparent color of a certain type of organic matter. It plays most of my songs (My library is 60+ GB), it never crashes (hahaha), and it showcases album art proudly.

After the update today, it gained a very nice and graphic (i.e. flat) interface with big fonts, and a formidable section dedicated to podcasts, which means “Portable O-something Device Casts”.

Turdis: My modified Zune with new case patterns

I was fine with the mocha color for a while, and it was a delight once in a while to see a subtle green glow around the border, when the device is shone in the bright rays of dawn. That effect is known as “double-shot”.

However, that’s all the moments when the player actually look good.

Unlike the iPod, this Zune is deeply discounted. And unlike the iPod, it does not have a shiny surface – being flat and matt is a nice aesthetic, too. Since it costs less than a hundred, it does not hurt to experiment and modify. So last weekend I decided to spend a morning modifying it.

I posted the process on Instructables if anyone are interested.

I am pretty satisfied with the result. I now have a player of my own, and it is not even available in Zune Originals. It is nice that we have alternatives that do not look way too pristine to be modified or touched, so that I can ruin it any way I want.