In May Microsoft released new previews of Expression Graphic Designer, Expression Web Designer and Expression Interactive Designer.

It’s clear that Microsoft is preparing a new suite of applications aimed at a new target market - designers and creative professionals. So how are the new pretenders shaping up?

Expression Graphic Designer (Design)

expression graphic designer beta

Vector and bitmap graphics are central to any successful design suite and with Expression Graphic Designer, Microsoft has chosen to tackle both in the same product. It’s taken a shortcut however by buying up the longstanding Expression package from Hong Kong developer Creature House. This ensures that Expression Graphic Designer will be a powerful package for an apparent first release, but it does have a major downside: the interface. Unless radical changes are made, the working environment looks fussy and dated for a supposedly next-generation application.
Get to grips with the interface though and there’s certainly plenty of power. Key here is the use of so-called “skeletal strokes” (hopefully the terminology will have changed by the time of the full release). Each skeletal stroke is essentially a path along which other vector elements or bitmaps are either repeated or stretched. The resulting strokes can look like anything from pen strokes or air brushes through to photo-realistic ropes or marching ants. Plenty of preset strokes are provided and it’s simple to create your own and, thanks to their vector underpinning, each stroke’s path, width and formatting remain fully editable.
Alongside this skeletal stroke system, Microsoft has extended the power of Expression in a number of ways. The addition of Live Effects is especially powerful making it possible to apply a range of filter effects to both bitmap and vector-based objects. Options include core colour corrections, such as varying hue, saturation and brightness, along with more artistic filters. Like the skeletal strokes, each live effect can be retrospectively fine-tuned.
Most impressive is the work Microsoft has put into developing Expression’s bitmap capabilities. Now you can add a bitmap-based pixel layer as easily as you can a vector layer with the toolset on offer changing accordingly. As with its skeletal stroke brushes, the range of pixel-based brushes is extensive and you can also edit and create your own using a component system. You can also add 3D depth effects and control whether underlying paint is picked up by your brush strokes. Bitmap rushes can also apply basic retouching effects such as cloning, blurring, sharpening and red eye removal, but Photoshop is certainly not under threat.
Serious photo editing is not in the picture so how does Microsoft imagine Expression Graphic Designer being used? The answer is primarily as a graphical partner to its other applications. You should be able to copy and paste both vector and bitmap graphics into Office applications complete with full alpha channel transparency support – particularly useful for creating eye-catching PowerPoint presentations – though this is currently buggy. With its Pixel Preview and HTML Export you can also create rollovers for use in Visual Studio, FrontPage and Web Designer. And with its XAML support you can design rich graphics that you can then bring alive in Expression Interactive Designer.
Based on this integration and combined vector and pixel-based power, Expression Graphic Designer looks like it will prove a valuable creative all-rounder.

Expression Web Designer (Web)

expression web designer beta

Another area where Microsoft is looking to boost its design credentials is the Web. Here Microsoft’s current offering, FrontPage, has changed radically in recent years but its original poor support for standards means that it will never now gain professional acceptance compared to the likes of GoLive and especially Dreamweaver. The May CTP of Expression Web Designer already looks like a much more serious contender.
Key to this is the foregrounding of the underlying code with which each web page is created, something which FrontPage did its best to keep hidden. While Expression Web Designer is built around a main wysiwyg layout window it also offers tabbed access to code and split code and design views and is surrounded on all sides by technical task panes that are reminiscent of an advanced programming environment. It’s much more serious and professional than FrontPage but usability hasn’t been forgotten and the latest CTP can already show Dreamweaver a thing or two about efficiency and productivity.
Ultimately though it’s the quality and browser-compatibility of the code that Expression Web Designer outputs which will determine whether the program will be taken seriously and whether the ghost of FrontPage can be laid to rest. Here Microsoft is making all the right noises about standards compliance and crucially each page can be based on a doctype to which all code will then conform. You can also set a secondary schema for the compatibility checker so that correct code that isn’t actually supported, say in IE6 or IE5, can be flagged.
By default Expression Web Designer outputs XHTML 1.0 Transitional code which cuts out a lot of the complications of now-deprecated formatting tags. Instead the XHTML is styled with CSS (Cascading Style Sheets) and the support for this looks exemplary with dedicated task panes for applying and managing styles and a CSS Properties pane in which you can see just what rules are feeding into the current formatting and edit them accordingly.
Ultimately it’s XHTML/CSS code that is presented to the web browser to display, but for scalable sites with rapidly changing content it’s important to ensure that each page and page element doesn’t need to be manually designed and coded. Particularly useful here is the ability to process XML-based data sources, such as live RSS feeds. Expression Web Designer makes this daunting task as simple as possible by taking care of the necessary XSLT behind the scenes while the end user can simply drag and drop elements from the Data View task pane.
For server-based processing of data, Expression Web Designer offers particularly strong handling of Microsoft’s own ASP.NET 2.0 standard including drag and drop access to controls, support for nested master pages, full compatibility with Visual Studio 2005 and an in-built Development Server that lets you preview your site locally. This really goes a long way to making advanced dynamic web applications as simple to create as static pages and should seriously drive the take-up of ASP.NET 2.0. It’s impressive stuff but if you want to use other server languages such as JSP, PHP or ColdFusion or even older versions of ASP then, unless Microsoft rethinks before release, it looks as if you’re going to have to look elsewhere.
Microsoft’s conversion to standards remains in question, but if you’re looking for powerful and streamlined XHTML, CSS, XML and ASP.NET 2.0 handling then Expression Web Designer certainly looks set to give Dreamweaver a run for its money.

Expression Interactive Designer (Blend)

expression interactive designer beta

The third element in the new Expression suite is Expression Interactive Designer. The program’s original codename was “Sparkle” which with its nod to Adobe Flash reveals the program’s main target and function – creating compelling content-based applications suitable for internet-based delivery.
Expression Interactive Designer’s working environment is built on a central artboard with a series of docked palettes to the right and a timeline below and, as you’d expect with a program designed for creating user interfaces, it’s fresh, modern and efficient. In particular the interface as a whole is adaptive and intelligent so that, if you use the new Workspace Zoom feature for example, the size of the icons and text in all palettes increases or shrinks accordingly with palettes closing and opening depending on the space available.
Looking at the main Toolset palette there are options for drawing rectangles, ovals, lines and paths and adding text and these can be formatted with solid fills, linear or radial gradients and vector or bitmap patterns, with the same options available to control transparency. External media formats are also supported currently in the form of JPEG, GIF, PNG, BMP and TIFF for bitmaps, WMA and WAV for audio, WMV for video and OBJ for 3D. All elements can be brought to life using the Timeline which offers property-based animation and, using the Camera Orbit tool, you can even apply After Effects-style 3D effects to imported images.
Graphics and media handling are important to Expression Interactive Designer but, as its name suggests, the program’s real focus is interactivity. This is primarily handled through the Library palette from which you can add dozens of preset UI (user interface) controls. The ususal suspects – checkboxes, comboboxes, listboxes, buttons and so on – are all catered for alongside more advanced options, such as grid, dock and stack, that let you create your own adaptive layouts. All content-based UI controls can be bound to external XML or CLR-based data sources and Expression Interactive Designer makes this as simple as possible – simply drag and drop elements from the Data palette and the program suggests viable controls and sets up the necessary binding.
Code free data-handling like this is impressive, but eventually you need to get your hands dirty writing some code to tell your interface exactly how it should behave when run. At first sight it looks like the place to do this is in the Code tab of the artboard which reveals how the interface you have built up is actually written in Microsoft’s new XAML (eXtensible Application Markup Language). You can directly edit the code here but it’s dangerous as, if you make a mistake, your carefully crafted interface will fail to render back in design view until you fix it.
In any case you aren’t actually intended to add the interactivity to your application in XAML, instead you write your event handlers in a “code-behind” file. This approach has definite advantages as it separates markup from code which is cleaner and means that designers can focus on the interface while the developers get on with programming. And it enables the programmers to use the language they prefer – currently a choice between C# and Visual Basic .NET. On the other hand in the CTP as it stands there’s virtually no support for such coding so it’s difficult to make any judgements on how it will work in practice.
Assuming that the process of actually adding interactivity to Expression Interactive Designer is successfully addressed in the release version, the potential is undeniable. In particular the adaptive applications you create can be instantly deployed in two ways as either a Flash-style web browser application with partial trust or as an installed desktop application with full trust. In both cases the resulting applications are able to take full advantage of the new Windows Presentation Foundation (WPF) which has been specifically designed to work hand-in-hand with XAML to efficiently provide as rich an end user experience as possible. Of course if the end user isn’t running WPF then she – or you – is out in the cold.
Ultimately Expression Interactive Designer is the key to understanding what Microsoft is trying to achieve with the new Expression applications: improving and enriching the computer user’s experience both on the desktop and over the internet – especially if everyone is using Microsoft software.