The document discusses the collaboration between designers and developers when creating interactive applications. It describes how a designer and developer work together, with the designer focusing on layouts, styles and animations in tools like Expression Blend, and the developer setting up the data, triggers and integrating the design into code using Visual Studio. It provides tips for both designers and developers on working together effectively through continual collaboration and iteration.

1. Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke

2. Who are we? Felix Corke Interactive Designer (Design Geek) Richard Griffin Interactive Developer (Code Geek)

3. Who is t he “Dev-igner”?

5. Investment Bank

6. Investment Bank

7. Mix UK Reader

8. McLaren

9. IPTV

10. BBC Big Zoomy Thing www.bbc.co.uk/radio1/bigweekend/2008/zoom

11. So how do you make it work? Continual collaboration Continual iteration

12. Collaboration: Let’s take an example

13. Workflow Developer Setup & Data Data binding Triggers & hooks Designer Layouts & controls Styles & templates Polish animations

14. Design Tools Existing skills Adobe Illustrator, Photoshop etc. HTML, CSS Flash/Keyframe animation New tools Mostly Blend Expression Suite: Design, Encoder, Media

15. Expression Blend: Xaml Centrale

16. Visual Studio 2008

17. Don’t Panic! VS2008 is scary, but... Not as scary as you think. Developer will get you started Why do I need to use this...

18. Why Visual Studio and TFS? Provides a home for files Simultaneous collaboration Blend doesn’t do this (yet)

19. Some Tips: Designer Vectors over bitmaps Learn the layout controls Spoof graphic styles

20. Some Tips: Designer Skinning - Use someone else’s! blogs.msdn.com/corrinab <Style TargetType=&quot; TextBlock &quot; x:Key=&quot; TextBlockH1 &quot;> <Setter Property=&quot; FontSize &quot; Value=&quot; 22 &quot;/> <Setter Property=&quot; FontFamily &quot; Value=&quot; Segoe UI &quot;/> <Setter Property=&quot; Padding &quot; Value=&quot; 4 &quot;/> <Setter Property=&quot; Foreground &quot; Value=“ #C70700 ”/> </Style>

21. Some Tips: Developer Hold hands with your designer Don’t bury it in the code Learn Xaml Use Blend

22. 3 rd Party Components Export to Xaml Illustrator: Mike Swanson @ microsoft Fireworks: Infragistics Components Identity Mine Infragistics Telerik

23. Some tools to help you Kaxaml notstatic.com kaxaml.com XAMLPadX blogs.msdn.com/llobo

24. XAMLPadX

25. Kaxaml

26. Deep Zoom Tools Deep Zoom Composer Designer builds, developer makes it work

27. Key considerations again Design for buildability Code for designers Work together

28. Watch these spaces too... blogs.msdn.com/tims blogs.msdn.com/jaimer blogs.msdn.com/corrinab blogs.msdn.com/scottgu silverlight.net www.slxlab.com

29. Any questions? del.icio.us/grippa blogs.conchango.com/richardgriffin blogs.conchango.com/felixcorke