Sparkle, Quartz, Acrylic. Those are definitely some of the more unique product names I've heard in a while. As these are targeted towards the usual hip "own a mac as a spare" types of folks, you won't find any ".NET" or "2006" or similar in the names. Just like the apps and their purpose, the names are simple and clean, and conjure up crisp images of diamond-honed user interfaces.

First, a little background. I love UI. If I had to declare a specialization in any one area of application development, I would do it in UI design. I've loved UI work ever since my first college CS professor drilled the importance of good UI design into our heads back in 1990. Later, I graduated with my CS degree with a definite concentration in Human Factors. Ever since then, I have done my best to be the UI "go to" guy on individual projects and in the company as a whole.

User Interface Design Today

While I'm by no means a graphics artist, I use lots of different tools when I do UI work. Here's the usual rundown:

General Graphics Work

I use Paint Shop Pro for 2d Buttons, banners and general graphics. It is inexpensive and powerful. It does both vector and raster graphics, basic image slicing, effects, background removals, masking etc. While not quite as powerful a raster editor as PhotoShop, it does enough to keep me happy.

Icons

I use Axialis IconWorkshop to do general icon work. While this is an excellent program I have used since it was first released, I find myself doing less and less in it these days. PNGs have all but eliminated the need for using icon formats just to preserve high color and transparency. I still use this to create application and forms Icons, however.

3d Work

I own licenses for both 3d Studio Max and Rhino 3d. I tend to do a lot of the organic design work in Rhino, and any animation or rendering in 3ds Max. In the past I have also used TrueSpace for design and animation, and dabbled a bit with LightWave. (As an aside, I also use Rhino as a component of my CAD/CAM/CNC system at home.)

User Interface Design

Typically the actual UI design is done in Visual Studio. I use it as the assembly tool to layout all the graphics (Windows or Web Forms), and in the case of Windows Forms, the tool by which I design custom controls with overridden rendering. It is decent for Windows Forms layout, but is still severely lacking in WYSIWYG web layout.

 

In designing a user interface I'll typically bounce back and forth between all of the above applications, with PSP and VS.NET being the two that absorb most of my time. It's not an integrated process, and not one which allows a good separation of tasks. In fact, I often end up stepping on other developers when I need to mess around with look and feel on a form or web page. We work out a process between us, but it is not something well supported by the tools. To get even basic eye candy, I find myself often dropping down to code, trying to override paint methods (which can be frustrating as not all controls support this in a consistent way - just look at the tab control or the list view for examples)

 

User Interface Design From Now On

Microsoft officially introduced today the Expression family of applications. Applications in this family are firmly targeted to user interface and graphics designers, but integrate with the rest of the development team tools. From the looks of things, Microsoft is really giving Macromedia a run for their money on this one.

Acrylic

Acrylic is a raster and vector graphics editing program along the lines of Paint Shop Pro or PhotoShop/Illustrator, or some of the Macromedia graphics design tools.

The Acrylic demo today impressed a lot of folks, but what was shown (removing a background from a photo) is pretty standard fare in even the least expensive photo/image editing programs, with some nice tweaks thrown in for good measure. What does look very promising with this tool is its very strong targeting towards vector-based XAML-represented content for WPF applications (more on WPF and XAML in an upcoming blog). This is a graphics tool with a very specific market, and that market is not brochures and paper publications, posters or book jackets, but is instead very firmly planted in the user interface design space.

The demo is currently available from Microsoft from the site liked earlier. I'll report more on it once I get to spend some serious time playing with this app.

Sparkle

Sparkle is a WPF presentation and animation design tool. Think of it as a replacement for the Windows Forms design surface, with the addition of timeline-based animation.

Today I spent a fair amount of time with Sparkle in a hands on lab, and had a brief discussion with some of the folks on the Sparkle development team. I hope to get a bit more time with them during the remainder of the week.

Sparkle allows you to do the following:

• Define every last bit of the UX for your application, including styles, type faces, scaling, grouping, scaling etc.
• Data bind all UI elements to existing classes, xml or other programmer-defined data stores
• Create timeline-based animations of one or more elements. While this isn't 3ds Max, it is still very powerful. I haven't used Flash or Director, but I suspect the concepts are very similar, if not identical.
• Preview and test the user interface
• If you wish, modify the entire UX after a programmer has already written the code without screwing them up.

In addition, Sparkle integrates with source control and the VS project and build systems, making it seamless to integrate a designer into your team. In a word: cool.

When I get back, I'll post some really bad pocket-pc-taken photos of the WPF UI I worked on during the hands-on lab. While it is not particularly exciting, it was extremely easy to build with the tools provided.

The version of Sparkle I tried was a little rough around the edges, but was usable. I'm really looking forward to a beta (I was told we'll likely see one in about 3 months) as this is an app I want to really specialize in. This will be your XAML UI/UX editor in the future.

 

Quartz

Quartz is the new Web UI design product. I haven't had a chance yet to see this in action, but it sounds promising.

 

With the new capabilities provided by WPF and Windows Vista, the bar for UX is going to be set a lot higher. WPF will be the standard UX presentation technology just as GDI is today. Graphics-rich user interfaces with 3d-accelerated animation are going to expected then, just as users expect Windows Forms apps to be graphically-rich like web apps today. If you don't currently have graphics designers on your team, or at least a person who is a developer but also a decent graphics designer, you'll find yourself having to fill that role in the future. For those of you interested in being that person, you need to start learning XAML and these XAML-editing applications today. I know I will!