Notebook

UX Lx, User Experience Lisbon, is set to take place in Lisbon Portugal next May 12 to 14. Nice time for a trip to Portugal. Speakers include Jared Spool, Luke Wroblewski, Dan Saffer, Peter Merholz, Donna Spencer, Brian Fling, Bill Scott, and Dana Chisnell.

Drawter has been sitting in my tabs for a few days now, and I keep coming back to play with it. It wasn't until I watched the screencast, however, that I really got to see how beautifully it generates markup and css.

Drawter is a web-based xhtml/css layout tool written in JavaScript using the jQuery library. It allows you to literally draw your website's code by dragging boxes within the onscreen canvas to create divs using the dimensions of your rectangles, and then to edit each div's style properties within floating inspectors. When precisely positioned, divs will be nested within containers, and nested divs can be floated within them.

Where this tool really impressed me was with the output of code. Upon generating the code for the layout, a clean stylesheet was produced that used floated divs for positioning, unlike most attempts I've seen to generate code from layouts using absolute positioning. In this way, this tool is not a toy, but creates usable code. The markup and css are also formatted nicely. Watch the screencast to see what I mean.

Drawter is available in a Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is required. It also requires at least 256MB RAM and 800Mhz CPU. It would be interesting to know how they'd react to getting money to integrate it into existing CMSes. They are also working on a simpler version that requires less knowledge of html/css, so this will be one to watch for sure.

I wanted to take a moment before I start the New Year's reveling with my family to thank all of you for the past year.

It's been a great second year discussing and learning with all of you via Konigi. I've connected with so many awesome UX designers by posting my thoughts and experiments on the site, meeting up in the NYC area at social gatherings and conferences, and in the exchange of little tweets here and there.

To end a great year, I promised to donate 50% of sales proceeds to New York City charities that fight poverty and homelessness, and you guys came through with your support. With your help, I was able to donate $800 ($400 each) to The Food Bank of New York City and Robin Hood.

I thank all of you who bought my little sketchbooks, notepads, icons, and stencils. Every one of them counted, and while the dollars may be small compared to what corporations give, I feel good knowing that this is a giving effort that's been powered by an indie spirit and hand made goods. It's felt so good that I'm going to make the promise to donate of a percentage of sales a regular part of what I do as long as I sell stuff on this site.

So cheers to the great UX community that I'm fortunate enough to be a part of. I wish all of a you an ass kickin' Twenty Ten!

Iain Lamb's Typograph is cool tool that allows you to explore the relationship between scale and rhythm by modifying the properties of typographic elements in a page of sample text.

It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it."

The full text of the proceedings of MobileHCI09, the 11th International Conference on Human-Computer Interaction with Mobile Devices and Services is available online. The event, which covers mobile and wearable computing devices and services took place September, 2009 at the University of Bonn in Germany.

BiDi Screen was demonstrated at SIGGRAPH Asia this year. It is a thin, depth-sensing LCD for 3D interaction using light fields.

The BiDi Screen is an example of a new type of I/O device that possesses the ability to both capture images and display them. This thin, bidirectional screen extends the latest trend in LCD devices, which has seen the incorporation of photo-diodes into every display pixel. Using a novel optical masking technique developed at the Media Lab, the BiDi Screen can capture lightfield-like quantities, unlocking a wide array of applications from 3-D gesture interaction with CE devices, to seamless video communication.

More demonstrations and paper at Matthew Hirsch's BiDi Screen page.

The OmniGraffle Wireframe Icons and the Royalty Free EPS/PNG icons have been updated.

In the OmniGraffle version, all icons have been converted to vector format so they are editable in OmniGraffle. You can now modify the shapes and easily change their colors. The vector icons also reduce file size of OG documents. In both OmniGraffle and EPS/PNG versions, I've cleaned up all existing icons for consistency and added new icons including: globe, wrench/screwdriver, lightning bolt, spaces, desktop, gun sight, cloud, bug, books, presentation, twitter bird, bullhorn, megaphone, rocket, windows, mac, and more.

If you've purchased either of the icon sets in the past, you can re-download the updated versions by logging in and visiting your user profile. In your profile page, access the Files link below your username to download the new version.