Before returning to Microsoft, I had worked to develop websites for years using the traditional model: client meetings, user-research, wireframes, Photoshop comps, development, deployment… of course, with a million client meetings in between each stage. This, obviously, is an over-simplification of the process, but I think this is a pretty accurate summation.

Now as a member of the MIX Online team here at Microsoft, away from producing websites for clients,and focusing more on prototypes for new web-apps and client software,I’m able to explore some new paradigms in the creation of these assets that have absolutely had an influence on the way I now design and develop software.

I’m not saying that this methodology is the right way for application design in all situations. I am saying, however, that my experience has given me an opportunity to do things a new way, which one might want to explore as an alternative to the standard way of the road.

Wireframes

When starting a project, it’s still absolutely imperative to go through the wireframing and conceptual process to help give scope and form to your ideas. In the past, I would most-often create these wireframes using Adobe Photoshop or Illustrator… and to a large degree I still do.

However, when developing applications in WPF it’s easy to use Microsoft Expression Blend to do this task quickly and easily. Not only does this make wireframing as easy as it may have been in the other products, but now the wireframes are written in native XAML, which is what WPF needs. Additionally, I would often have found myself creating 50-page PowerPoints or PDFs to demonstrate simple functionality. Using Blend, interactions such as rollovers, simple animations and transitions and functional forms are a snap to produce, and don’t require multiple images and explanation.

Comps, Redlines, and Prototypes

Once wireframes and requirements have been locked down, the next stage is generally Photoshop comps. While totally useful to show the true look and feel of how the product, everything produced in this stage generally has acted as a “guide” for developers to develop the product. Including redlines – comps that callout the size of text, the margins and sizes of elements, and the like – at the end of the project all the comps so diligently designed and marked-up are thrown directly in the garbage.

With the “new way” of application design using Blend, the wireframes that were originally created in XAML can now simply be skinned and designed. There’s no longer disconnect between what the designer wants and what the developer delivers. If the designer wants the font to be a certain size, for instance, he or she simply makes the text that size. The same with margins, image sizes, and so on – if we want something to look a certain way, we simply have to make it look that way. The back-and-forth between design and development is greatly reduced, saving both time and money.

And at this point, we’re well on our way to a working piece of software.

As I mentioned, the above is an over-simplification of the process of designing and developing software, and isn’t appropriate for all cases. However, in situations where rapid application development is key — whether due to timelines, cost-restraints, or both – starting work in Blend and working directly with the code that will be eventually delivered, again, saves time, money, and a lot of frustration for designers, developers, and those they work with.