I’ve received a couple emails from friends who attended the Paris and Brighton events asking about what we used for the presentation “slides” (in reality they are not slides anymore but one single huge image… like a mind map). The technology is called DeepZoom.  DeepZoom is a feature part of Silverlight 2. You can create DeepZoom experiences by coding OR you can use DeepZoom Composer to get you started. Composer is a small tool currently offered for free. The Expression team creates this tool. Kirupa is very involved with it and keeps the community updated. Many of you might know Kirupa from his Flash blog and posts which have helps many people learn tips and tricks in Flash. Kirupa joined Microsoft last year as a Program Manager for Expression Blend. In his latest post Kirupa announced a new photo stitching feature available inside of DeepZoom Composer… lovely!

The process I followed to create my DeepZoom presentation is:

Design your single one “slide”… a mind map… it can be an illustration, flow chart, abstract or photography based image…  anything you like. I use Expression Design but you can use any other graphic design tool you like.

Export the image at a really big size (I usually do 14,000 pixels wide or height, whatever is bigger… you could do even larger if you like). DeepZoom composer handles gigabyte(s) large images so no worries… it was born to deal with large images. You want to do the image really big because you want to zoom in really close to it and still see the image crisp and neat. Export at 96dpi because that is the resolution that Silverlight uses (compared to the traditional 72dpi we use everywhere else). Export your image as a PNG if using flat colors or JPG if using lot’s of photos.

Open DeepZoom Composer and follow the 3 Step creation process… Import Image(s), Compose and Export. The Compose step is interesting. It turns out that you can “DeepZoomize” not only one image but any number of images… so in reality you could have exported multiple images from Expression Design or Photoshop… and then compose the final layout in DeepZoom Composer. The reason you would want to do that is to make images of different sizes. With some code this can also let you dynamically show/hide images you want to see or not. Check out the HardRock DeepZoom Experience…

When exporting you will get different options. Try View in Browser. You need a mouse with wheel to zoom in/out. What DeepZoom creates for you is a Silverlight project. A Silverlight Project is a collection of a bunch of folders and files of all sorts. It looks a lot like an HTML website project. I mention this because if you are a Flash designer you are used to deal with one single file, SWF. In Silverlight you work with a Project, this collection of files. There is also a package method called XAP. XAP is kind of like the SWF file. A XAP file is nothing more than a ZIP file with a different extension. Anyway, I mention this because the first time or first few times you want to re-open the DeepZoom experience you just created (which like I mentioned above is just a Silverlight project) you might get lost  because there are so many folders… the file you need to look for is:

C:\Users\[Your user name]\Documents\Expression\Deep Zoom Composer Projects\[Name of your Project]\source images\OutputSdi\remix uk\DeepZoomProjectWeb\ClientBin\DeepZoomProjectTestPage.html

So just open this html file and that’s the thing that will launch your DeepZoom experience. I usually make a shortcut in my Desktop or copy the entire Name of your Project folder to another location…

A few tips for creating these presentations is to design the mind map in a way that doesn’t have you zoom in/out too much… Also when designing the map, try to think about “framing” shots of that map that you will be talking about throughout your presentation… this “framing” is pretty fun because it will never be the same… you will always pan throughout your map a little different so try doing a design that works well with this “on purpose imperfection”.

Bon jour!

Paris, France.

This has been a fun week. I had the opportunity to visit France and the UK. This Wednesday Microsoft participated in the DDB Digital Days 2008 event in Paris. It was a fun event in a very social environment. The presentation has held in an open area in the building and not in the typical conference room. I liked that approach as it felt more like a casual conversation with the 100+ attendees that participated in the event. It was great to see the interest of designers and agencies for Silverlight and Expression. As promised below is a link to the assets I used in my session. It was also fun to visit the Microsoft office in Paris where I had a chance to visit the MCT, a technology center where Microsoft collaborates with Design Agencies, ISVs and SIs to produce WPF and Silverlight applications and provides the means to bring them all together around a common project for Enterprise customers. I learned from designers and developers the different ways they work together, the things that are smooth and easy and the ones that are more challenging. Very useful feedback for me to bring back to Redmond. In general there is an agreement that with XAML (Silverlight and WPF) designers can now not only participate in Microsoft based technology projects (something that in the past was possible only for developers) but now with Expression I met a couple agencies who are leading the projects themselves. At the same time, I found that designers take a little longer to learn the use of Expression as it incorporates many different ways of doing things compared to Flash. For example, our animation system is time based where the Flash system is frame based. Once designers cross this first stage, there seems to be a quick ramp up into being creative and productive with the tools.

Microsoft® Expression® Studio 2 vous ouvre de nouveaux horizons de créativité. Ses outils de création professionnels et ses technologies innovantes vous laissent libre de réaliser votre vision, que ce soit pour la création de sites Web, la réalisation d’interfaces riches ou la gestion des actifs numériques

Hello!

Brighton, UK

In Brighton, Microsoft hosted the REMIX08 event. It was big event with dual tracks for designers and developers. I missed the keynote! @%#!!! as I was flying in from Paris. I would have loved to see Scott Guthrie and Bill Buxton, together in action. As you know, Scott is our biggest technology ambassador and spokesperson. His background is completely in the development world. Developers love him and he is really popular. Bill Buxton is just as big of a figure but in the Design space. He is a UX and Design researcher at Microsoft. Bill has been designing UIs and drilling deep into design processes all his life. As deep as Scott can get development topics, Bill can do in Design concepts and theory and practice…  I had the opportunity of participating in a Discussion Board with other friends from UK agencies and Bill Buxton. It was the first time I talked to him. As expected he was a very kind person. We got some questions and Bill just kept providing not just answers but truly inspiring messages… I was just in awe. The depth of thinking he has gotten to after all this years of experiencing “Design” have definitely provided him amazing insights into practical approach to design. Check out his book Sketching User Experiences.

There was a question about the word Devigner. There were different opinions about it. I understand the role though and it exists undeniably but the word devigner just doesn’t resonate to me. I like to call them hybrids (which is not a great word either!) or “integrators”.  I’ve found that the majority of times it is a person with a developer background who executes this role. This role is defined at a technical level. The devigner, hybrid or integrator is the person who takes code files from a developer and visuals from a designers and integrates them. It is not a “management”/creative director type or role. It is the middle man in between the two worlds that for some reason cannot integrate or share assets directly. For me even though the devigner role exists, it shouldn’t. I think it is an opportunity to come up with ways to “delete” that role. In an ideal world the tools that both profiles use, designers and devs, should help these two people communicate with each other *directly* (that is exchange files and assets without the need of a person acting as an interpreter, patching files, making little changes in code and visuals so they can work together). I think we will see interactive/UI design tools evolve towards this paradigm in the near future but the role devigner IMO is not a “new role” or “something emerging” as being a “new way of doing things”… it’s just that tools in the industry are not fully achieving the goal of having designers and developers work together, hence an “integrator” role is needed. To be clear, this is at the technical level… there will ALWAYS be the need to Creative Directors, UX architects, Software Architects, Information Architects or even CTOs who can manage, inspire and motivate different profiles like designers and developers to work together.

On Friday I gave a session on Expression. I tried a different approach this time and worked well. Doing my “slides” in DeepZoom continues to work great. I love it. It’s not a linear Powerpoint presentation anymore but a “mind map”. I’m still afraid of making people dizzy when I pan around but apparently everyone was walking straight at the end of the session

Here are the assets for the Paris and Brighton sessions. I hope they are useful for you

I visited Total Training a week ago and recorded the first 12 video snippets for a series called “UI Design for Developers”… it is a fun series aimed at developers who wish to learn a few tricks on design.  These video snippets will be totally free and will be published in our different community sites. I hope this series, once published will help developers learn more about UI composition and visual design. I know you guys will not be able to  wait until we publish the series so here is a sneak peak of the Expression Design assets…. you’ll get the idea once you open them.  Once we get the videos, you will be able to learn more from this

this series was a fun experience for me as it allowed me to do some research on the Principles of Design and Elements of Design. One of those Elements is color. When doing research I found this amazing site called COLOURLovers. It’s an amazing place for the community to post colors and palettes as well as patterns. You can vote for your favourite colors and get an unlimited source of inspiration.