35
Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Embed Size (px)

Citation preview

Page 1: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Beauty & the GeeksThe perfect blend of left brain & right brainRichard Griffin & Felix Corke

PHOTO BY BLIND_DONKEY / FLICKR

Page 2: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Who are we?

Felix CorkeInteractive Designer(Design Geek)

Richard GriffinInteractive Developer(Code Geek)

Page 3: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR
Page 4: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Who are we?

Paul DawsonExperience Director(Geek)

Richard GriffinInteractive Developer(Code Geek)

http://techtalks.codezone.dk/MixEssentials.wmv

Page 5: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Who is the “Dev-igner”?

Page 6: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR
Page 7: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Investment Bank

Ian Griffiths
Paul tells me that some of the design ideas in this app were partly inspired by developers suggesting features - so we could use this as an example of the 'cross-pollination' that comes from close collaboration of developers and designers.Also, this is a good example of a heavily data-driven application where designers have control over how that data looks. So we can use this as an example of how data binding is important as the 'point of contact' between developers and designers.
Page 8: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Investment Bank

Ian Griffiths
Paul tells me that some of the design ideas in this app were partly inspired by developers suggesting features - so we could use this as an example of the 'cross-pollination' that comes from close collaboration of developers and designers.Also, this is a good example of a heavily data-driven application where designers have control over how that data looks. So we can use this as an example of how data binding is important as the 'point of contact' between developers and designers.
Page 9: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Mix UK Reader

Ian Griffiths
Paul tells me that some of the design ideas in this app were partly inspired by developers suggesting features - so we could use this as an example of the 'cross-pollination' that comes from close collaboration of developers and designers.Also, this is a good example of a heavily data-driven application where designers have control over how that data looks. So we can use this as an example of how data binding is important as the 'point of contact' between developers and designers.
Page 10: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

McLaren

Ian Griffiths
Paul tells me that some of the design ideas in this app were partly inspired by developers suggesting features - so we could use this as an example of the 'cross-pollination' that comes from close collaboration of developers and designers.Also, this is a good example of a heavily data-driven application where designers have control over how that data looks. So we can use this as an example of how data binding is important as the 'point of contact' between developers and designers.
Page 11: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

IPTV

Ian Griffiths
Paul tells me that some of the design ideas in this app were partly inspired by developers suggesting features - so we could use this as an example of the 'cross-pollination' that comes from close collaboration of developers and designers.Also, this is a good example of a heavily data-driven application where designers have control over how that data looks. So we can use this as an example of how data binding is important as the 'point of contact' between developers and designers.
Page 12: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

BBC Big Zoomy Thingwww.bbc.co.uk/radio1/bigweekend/2008/zoom

Page 13: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Setanta Sports

Page 14: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

So how do you make it work?

Continual collaboration

Continual iteration

Page 15: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Collaboration: Let’s take an example

Page 16: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

Page 17: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Collaboration: Layout in Blend

Page 18: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

Page 19: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Collaboration: Styles in Blend

Page 20: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

Page 21: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Design Tools

Existing skillsAdobe Illustrator, Photoshop etc.HTML, CSSFlash/Keyframe animation

New toolsMostly BlendExpression Suite: Design, Encoder, Media

Ian Griffiths
It's time to look at the tools available for working with Xaml. Obviously there's the Expression suite, most noteably Blend.But we also need to talk about some tools that are aimed primarily at deveopers: VS and TFS. Part of the reason for this is that Xaml is a slightly developer-biased technology. WPF was designed by developers as a programming framework for building UIs, and this is reflected in Xaml. Consequently, you don't really have the full picture if you're not taking code into account - the Expression tools don't quite give you full control over the construction process.Should we talk about 3rd party stuff, like the Xaml exporters for Illustrator and Fireworks?
Page 22: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Expression Blend: Xaml Centrale

Ian Griffiths
There's a lot that could be said about Blend, but I think it'd be better to get a designer perspective than present my heavily developer-skewed point of view.So, Felix, Paul, what would you say on this slide to an audience which will (we think) have a fairly high (for a Microsoft event) proportion of designers?
Conchango
Comments about help from intellisense, etc. getting to grips with XAML but....
Page 23: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Visual Studio 2008

Conchango
we should do a left brain/right brain thing that over the previous slides shows the appropriateness of the tool for the indivudal i.e. this is geek territory,... but... you will still need aspects of it as a designer.
Page 24: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

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?

Page 25: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Why Visual Studio and TFS?

Provides a home for files

Simultaneous collaboration

Blend doesn’t do this (yet)

Page 26: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Some Tips: Designer

Vectors over bitmaps

Learn the layout controls

Spoof graphic styles

Page 27: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Some Tips: Designer

Skinning -Use someone else’s! blogs.msdn.com/corrinab

<Style TargetType="TextBlock" x:Key="TextBlockH1"> <Setter Property="FontSize" Value="22"/> <Setter Property="FontFamily" Value="Segoe UI"/> <Setter Property="Padding" Value="4"/> <Setter Property="Foreground" Value=“#C70700”/></Style>

Page 28: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Some Tips: Developer

Hold hands with your designer

Don’t bury it in the code

Learn Xaml

Use Blend

Page 29: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

3rd Party Components

Export to Xaml Illustrator: Mike Swanson @ microsoft Fireworks: Infragistics

ComponentsIdentity MineInfragisticsTelerik

Ian Griffiths
We should point to a few 3rd party components, and give a rough picture of the current state of play here - what's out there and how mature is it?
Page 30: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Some tools to help you

Kaxamlnotstatic.comkaxaml.com

XAMLPadXblogs.msdn.com/llobo

Ian Griffiths
To start with, we'll focus on the tools that understand Xaml. Not much to say on this slide - it's really just a lead into the example slides that follow.
Page 31: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

XAMLPadX

Ian Griffiths
XAML Pad is...like Kaxaml only less so.Its principal benefit is that it's supplied by Microsoft as part of their developer tool chain, so it's more likely to be available than Kaxaml. (And it starts up slightly faster because it's simpler.) So we sort of have to mention it because it's the one everyone knows.
Conchango
sometimes it's too much of a faff to open a project, etc.... but....
Page 32: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Kaxaml

Ian Griffiths
Kaxaml is a handy tool that lets you type in Xaml and see the results without the overhead of needing a runnable project in which to host the Xaml as you need in Blend or VS.Kaxaml is written by Robbie Ingebretson of Identitymine fame.
Conchango
You might still need intellisense, etc. so here's a good tool.
Page 33: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Key considerations again

Design for buildabilityCode for designersWork together

Ian Griffiths
Summing up the key points before opening for questions.
Page 34: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Watch these spaces too...

Timheuer.com/blog/blogs.msdn.com/jaimerblogs.msdn.com/corrinabblogs.msdn.com/scottgu

silverlight.netsilverlightcream.comsilverlightshow.com

Page 35: Beauty & the Geeks The perfect blend of left brain & right brain Richard Griffin & Felix Corke PHOTO BY BLIND_DONKEY / FLICKR

Thank you for listening

del.icio.us/grippablogs.conchango.com/richardgriffin

blogs.conchango.com/felixcorke

http://techtalks.codezone.dk/MixEssentials.wmv