Slick design shouldn’t compromise HTTP requests or size of DOM tree. That’s why the new version is going to use as little images as possible – you can see how each new color pane was made – just by changing some RGB values in CSS.

This effect was created by using one large PNG mask and a few smaller semitransparent black sprites (triangles, X circles). There is no need to make new images for each color, as semitransparency takes care of everything – starting from darker border to hover effects.

Permalink | Leave a comment  »

Preferences will work on the fly – everything is saved instantly. [Watch in HD]

Permalink | Leave a comment  »

You can probably tell where the inspiration came from. Frankly, I wanted the new version to blend with my desktop as much as possible. I’m planning to run it in Fluid.app. Enough about visuals already, here comes the new stuff:

1. Project toolbar at the top – ‘new project’ button, project switcher (editable select), save and delete buttons. On the very right config button, sliding in the sidebar.
2. Sidebar – all configuration was moved here. You can see some new features regarding autosave and ability to export / import data (because as you probably already know, projects are saved only in your browser).
3. Main tree pane – all magic happens here.
   • ‘Add sibling / child’ buttons are visible on hover. Keyboard shortcuts for these actions are planned too.
   • There’s a new button with ‘plus’ icon – it allows to add CSS properties to the tree, like em-based line-height.

What’s probably not gonna change:

• No drag & drop.
• Deleting a node means deleting its children too.

Other things: No support for IE whatsoever. If you’re using cutting-edge browser like Safari 4 or Firefox 3.5, you’ll be rewarded with slicker look & greater performance.

Looking forward to your comments.

Permalink | Leave a comment  »