France and UK designers @ Expression & Silverlight Events
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 
September 20th, 2008 at 1:12 pm
Nice post, I had never seen a picture of the Eiffel tower lit up like that!
You guys that get to travel around and attend those mighty conferences are quite lucky!
About “Devigners” … I never thought of them as integrators. I think of integrators as those that can’t lay down the code or the design, so they just sit in between and merge other people’s work without dealing with much of the complexity underlying both the code and design sides.
My take on the word devigner is someone that can lay down a compelling design and write solid code, at the same time if needed. This is especially useful in agile projects aiming for rapid prototyping and rapid delivery.
This is a bit how my personal devigner process goes:
- Understand the problem space and define the domain model, often directly in code and using unit tests
- Understand the target audience and define user experience model, often mocked-up directly in the UI tech of choice
- Set up the solution and create projects for architectural layers
- Isolate a portion of the domain model and implement data layer and service layers and UI functionality in vertical spikes (ex, 10 minutes of LINQ, 10 minutes of WCF, 10 minutes of XAML)
- Refine the UI look and aesthetics and refactor code to satisfaction (move elements by a few pixels, add gradients, clean up code and tests, look for bugs, missed exception catching, using clauses, abstraction, coupling/cohesion, etc)
- Throw it to the lions
Generally, programmers can’t come up with a friendly and compelling design and designers can’t write good code or define a solutions’s initial architecture. And integrators can do neither. Devigners can do both, and on top of it, the integration of the UI and code is usually much neater.
Well that’s my 2 cents
September 20th, 2008 at 2:22 pm
Hello Alex!
Interesting, yes, perhaps my vision of devigner was that of an integrator but I see what you mean. From that point of view yes, it makes sense to identify it as a specific profile. Makes me think of people in the renaissance, time when thinking with both sides of the brain was highly appreciated… perhaps with Da Vinci as a good example of amazing engineering understanding and deep creative vision and execution. Our agreement then seems to be an “integrator” is different than a “devigner”.
I was told the Eiffel tower is blue + stars this year because the French president leads the European Commision hence the blue and stars. Thank you for posting!!!
September 20th, 2008 at 4:29 pm
Cool assets and very helpful. I’d love to see here design related post on WPF and Silverlight User Interface. Thanks again for the assets.
September 22nd, 2008 at 7:28 am
I Second Admin’s comments:
“Generally, programmers can’t come up with a friendly and compelling design” - because they think the Linux command line console is the greatest GUI innovation since the Unix command line console.
“Designers can’t write good code or define a solutions’s initial architecture” -because their ‘creative genius’ means that they would never soil their hands with “that technical stuff.”
“And integrators can do neither.” - because they are often too busy thinking outside of the box to spend any time thinking inside of it. We call them management consultants.
If the philosophy of the Designer-Developer is make it look nice and make it work well, then that is bound to put them on a collision course with Developers, Designers and Integrators. Power to the artesan!
October 2nd, 2008 at 9:25 pm
Hi,
I am really enjoying your blog. I downloaded the assets from the Paris and Brighton demos (European Expression Tour). I’ve learned so much from your Icons.design. One quick question … I can not figure out how you made the “ShapeGradient” that is in the edit button. The ShapeGradient was used in the stroke around the edit button. I tried everything, but, I could not replicate it. Any suggestions?
Best regards,
Chris
October 3rd, 2008 at 8:09 am
Hello! Good question… It took me about an hour to discover a good way to do this in Expression Design. By default we do not currently support shape gradients so what I did is created a custom stroke made out of a number of rectangles which decrease in opacity… I then applied the stroke to my capsule shape (or you can apply to any other shape) and it works… you can even increase the width of the stroke if you like making it feel like the gradient is bigger… Check out the source file, you will see this is just a stroke and If I am not mistaken the stroke will be available in your Stroke/Brush library…
October 3rd, 2008 at 9:14 am
Thank you for your response! That makes sense, I will look for it so I can understand how it was constructed. I have to admit that it makes the “glass like” look that much more convincing. I have to say that your design series has really helped me. I am new to Expression Design and your samples have helped me to focus on the techniques I need to know.
I also had a more general question that relates more to process than anything else. Let’s say I complete an “Edit” button (similar to your sample) and I import it into my Blend project. The “Edit” button has a nice red “outer glow” around the outer button stroke. Once the “Edit” button is in Blend; how would I go about animating the outer glow of the stroke (i.e. making it larger or brighter on mouseover)? I know about animation (both property and event triggers). My question is more about how I would go about getting a handle on just the border in order to animate the outer glow. In the past, I’ve usually used Blend to construct my objects, so, I could name the object parts as the object was built. In Design, I see the object being built as one object. Do I need to build the “Edit” button in layers? Your advice is greatly appreciated.
I hope all is well,
Chris
October 10th, 2008 at 1:56 am
Hello Chris!
Thanks for writing
When you export your “Edit” button from Design into Blend you have two options: to export as a flat bitmap (PNG) or to export it as XAML. If you export as XAML then all the little pieces the make out the button will be preserved as separate pieces. In your scenario, the outer glow would be preserved as a rasterized PNG mixed with other vector objects (because effects from Design get converted to bitmaps since Silverlight doesn’t support effects yet). So anyway, when you export from Design as XAML you get the “little pieces”… then on MouseOver simply change the Opacity of the Image to 100%…. set the Base state to 0%. If you take a look at your Layer panel in Design you will notice it is pretty much the same as the Object panel in Blend… we just happen to call it different, so all your Design elements will be preserved in the same tree structure just as if in Blend, even the names are preserved. Let me know how it goes
October 13th, 2008 at 11:20 am
Arturo,
Thanks for your input … I appreciate it and your samples a lot. I have gone from not using Expression design at all to actually replicating your samples and doing more than I had imagined in a short time
Chris