Information for designers and interactive developers - Issue 3 - September 2008
home  |  articles  |  register for the newsletter  |  Issue 1  |  Issue 2  |  Issue 4  |  Issue 5  |  Issue 6
Developing applications that are true to the intended creative vision, with Jonathan Ramirez
Jonathan Ramirez Creatives speak the language of feelings. Developers speak the language of logic. So collaborating to develop applications that are true to the intended creative vision can be a challenge without the right tools. Here is how I have used Expression Blend to make this happen.

Jonathan Ramirez Motion Designer
Advanced Interaction Group Schematic,
Costa Rica

Hi Jonathan. You work for Schematic. Could you tell more about your role and your background?
There are two kinds of "Devigners": Creatives who understand code and Techies who worry about beauty. Both of them are kind of weird, don't you think? I would say I see myself more like the first one. I have been performing this role for more than five years now, but it was not until a couple of months ago that I found a name I like for it.

The place where Schematic locks the Devigners is called the Advanced Interaction Group, or AIG for short; it's in this group that we translate between creatives and techies. Let me say it isn't that easy, but it sure is fun. Our mission is to make applications look exactly like the comps, make things move with the same mood as the motion tests, create prototypes and explore different technologies.

I started with Silverlight back when it was called WPF-e, a little bit more than a year now. To be honest, the projects weren't very exiting back then, but the technology has moved very quickly and I've seen the potential and tools required grow and mature, helping us deliver a first-class Rich Internet Application (RIA).

Schematic has been involved in several Silverlight projects. Could you mention some of them and tell us how did you get some best practices?
Being part of huge projects like the NBC Olympics Silverlight Video Player - and a couple more I can't mention quite yet - is extremely stimulating, not just because of the worldwide importance of the projects, but because of the challenge of working with a new technology, with such highly skilled people from Schematic, Microsoft and other companies involved in the effort.

During this past year, I had the chance to participate in many interesting projects and events related to Silverlight. We started the year with an internal interoffice summit where we and our peers from LA, New York and Atlanta shared our Silverlight experience and knowledge. I've also been invited by Microsoft Central America to talk about Silverlight at various events.

Another interesting event I enjoyed being part of was the Microsoft Artists in Residency program, in which ten agencies send a team of one developer and one designer to Microsoft's campus in Redmond. They provided us with two days of training and talks from Silverlight and Expression evangelists and developers, and then they gave us 8 days to create an application using what we learned and the best project got a prize; I have to say that the most exciting part was that we won first place against very good and interesting projects.

What is your favorite use of Silverlight today? Is the a specific Silverlight feature that you are investigating ?
There's nothing you can do with Silverlight that is impossible to do with other technologies, and vice versa. But there are some things you can do more quickly and with better performance using Silverlight.

We are building a "deepzoom" feature for the Olympics player that lets you watch four videos at the same time -one will be bigger and the other three will work as monitors that use a lower bandwidth. You can swap between videos any time you want: you'll be able to see four events or four shots of the same event at the same time. This is something that will change the way we watch video.

You will see the performance of the application and you will notice the power of Silverlight handling a hard task like video streaming as though it were just one video.

At the end of this post by Adam Kinney you can check a preview of how this feature may look once published.

What is the impact of having Microsoft Expression in your workflow?
Learning is an endless process, but the most valuable thing I've learned so far with this new technology is the way it's done between creative and technical teams. Every person has different skills and Silverlight helps you focus on yours, regardless of the discipline.

There's always a fear of change -that's normal- but once you get into the process of the new wave it's very easy to understand it and becomes part of it. At the beginning there were no best practices or patterns to work on Silverlight projects, so we had to create our own and it has worked well. We're meeting our deadlines and our clients are happy with the advance.

What can you tell me about the design and development process you used for your projects?
I like to be truthful about what I think and see. There's a group of creatives very comfortable with the tools and technologies they have used for the past 5 or 10 years and it's hard for them to incorporate new tools into their work, and some of these guys have great talent that could be used for Silverlight projects.

So, instead of changing the tools they use on a daily basis, we should put more effort into translating what they do into XAML. A good Devigner should be able to convert any design into optimized markup, no matter what program the designer used. I like to take screenshots of my XAML and put them next to the comps to review every small detail until I see the exact same picture--Expression can give me all the tools to make that happen.

Creatives talk about feelings, developers talk about logic. There should be always be somebody in between translating those languages using the right tools.

Overall, what's the first Silverlight & Expression perception you see around you?
Between the time I started using Blend and now I've seen the process of the XAML WYSIWYG transform into a powerful layout and interaction tool.

RIA's shouldn't have fixed sizes because we all use different displays and devices; we have to build adaptable interfaces and Blend is perfect for that, some years ago this was developer's work but now they don't have to worry about that.

I like to see the reaction of the people when they see something I did just in minutes using Expression Tools, some are afraid to change and some get interested and that makes me think in a near future these tools will be part of every team involved in RIA's.

How does prototyping play into your design and development process?
Project Managers love the word "reusable" and they are very happy when we use it in meetings. Clients love prototypes because they look at and use their application a couple of weeks after they sign off. So imagine if you could reuse most of the layout of your prototype for the final project.

This is something that has saved a lot of time with the Silverlight projects I have worked on. Silverlight workflow and Expression tools make the process quick and painless.

How does Expression Studio and Visual Studio help you prototype?
Amazing design has been always there. Applying it to usable applications was the problem.

I know all the designers hate it when they have to limit their creativity because the developers can't implement what they did into the application, but with Silverlight that is not a problem.

When the deadline is close, the developers weigh functionality against design, and functionality always is first for them. They prefer to have all the features working even if they look bad; I would prefer to have a few working and looking good! But that's not a decision we have to make any more; they can make all the ugly features they want, and I'll have time to make them look good before sending the project to the client.

Any predictions for the future?
Amazing design has been always there. Applying it to usable applications was the problem.

Every day, users demand prettier and usable applications, they have the control and they have the options, we are here just to make them enjoy the experience of our applications.

If your application works perfect, there's nothing new about that as it was some years ago. Explore, interact, users remember more details than features.

50 screencasts on Silverlight
If you need some material to start learning Silverlight 2, check out this set of 50 short screencasts delivered by Mike Taulty and Mike Ormond, two evangelists from the UK.
Download a free trial of Expression Studio 2
Download a trial of the new Expression Studio. New features in Blend 2: Silverlight support, vertex animations and an improved user interface with a new split design/XAML view. Expression Web 2: now with PHP support, Photoshop import functionality, improved web standards compliancy, and ASP.NET Ajax server control support and more.
Laguna Coupé with Silverlight and Deep Zoom
Enjoy a Silverlight & DeepZoom experience with the Laguna Coupé microsite, from Renault.

Popfly Game Creator
Maybe you already know Popfly, the platform for building gadgets, mashups and web pages all in a visual way without any coding. Now there is a new feature launched: check out Popfly Game Creator, and build your own game without writing any line of code. Have fun!