beauty & the geeks the perfect blend of left brain & right brain richard griffin & felix...

Post on 23-Dec-2015

217 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

PHOTO BY BLIND_DONKEY / FLICKR

Who are we?

Felix CorkeInteractive Designer(Design Geek)

Richard GriffinInteractive Developer(Code Geek)

Who are we?

Paul DawsonExperience Director(Geek)

Richard GriffinInteractive Developer(Code Geek)

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

Who is the “Dev-igner”?

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.

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.

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.

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.

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.

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

Setanta Sports

So how do you make it work?

Continual collaboration

Continual iteration

Collaboration: Let’s take an example

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

Collaboration: Layout in Blend

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

Collaboration: Styles in Blend

Workflow

Developer

Setup & Data

Data binding

Triggers & hooks

Designer

Layouts & controls

Styles & templates

Polish animations

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?

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....

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.

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?

Why Visual Studio and TFS?

Provides a home for files

Simultaneous collaboration

Blend doesn’t do this (yet)

Some Tips: Designer

Vectors over bitmaps

Learn the layout controls

Spoof graphic styles

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>

Some Tips: Developer

Hold hands with your designer

Don’t bury it in the code

Learn Xaml

Use Blend

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?

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.

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....

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.

Key considerations again

Design for buildabilityCode for designersWork together

Ian Griffiths
Summing up the key points before opening for questions.

Watch these spaces too...

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

silverlight.netsilverlightcream.comsilverlightshow.com

Thank you for listening

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

blogs.conchango.com/felixcorke

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

top related