Your SlideShare is downloading. ×
0
Design To Blend Dale G. Jones Director of Creative Design IdentityMine, Inc.
Session Prerequisites <ul><li>Microsoft Expression Design  http://www.microsoft.com/expression/products/overview.aspx?key=...
Session Objectives and Agenda <ul><li>Reduce fear about designing for WPF. </li></ul><ul><li>Show real world workflow from...
Who Am I? <ul><li>Dale Jones Director of Creative Design IdentityMine, Inc. </li></ul><ul><li>I lead a team of Creative De...
Where I Work
Why Do We Need Designers? <ul><li>Users are expecting better application experiences.  </li></ul><ul><li>Developers are ex...
What’s In It For You? <ul><li>With WPF, it is possible to maintain design integrity throughout the application development...
Lets Talk Process
New Process Ideas
It Starts With The Team Designer graphics, media,  color, UX, UI Developer data, logic, code
But Wait A Second… Designer graphics, media,  color, UX, UI Developer data, logic, code ? layout, animation, events, marku...
The Team With An Integrator  Designer graphics, media,  color, UX, UI Developer data, logic, code Integrator layout, anima...
The   Team & Tools
What Ties Us Together? <ul><li><XAML> </li></ul>
XAM   L XAM   L XAM   L
These Roles Are Rigid   <ul><li>I am a designer and love to play with markup, where do I fit in? </li></ul><ul><li>Our co...
Roles Reflect Project Responsibilities <ul><li>The tasks to build a successful application don’t change based on the peopl...
I Am A Designer For the purpose of this presentation I am going to be the designer, and show you how Designers work with I...
I Am Assuming… <ul><li>That you have a basic understanding of: </li></ul><ul><ul><li>- Windows Presentation Foundation </l...
What This Session Is Not <ul><li>A complete discussion about the WPF Platform </li></ul><ul><li>Extensive XAML Overview </...
Expression Design <ul><li>Prototyping and Composition Design. </li></ul><ul><li>A few nice features that other design prog...
 
Expression Design Examples <ul><li>Roxio Central Vista Technology Preview </li></ul><ul><li>Microsoft Dynamics Sure Step <...
 
 
 
 
Expression Design Walkthrough <ul><li>Creating a new file </li></ul><ul><li>Finding Palettes </li></ul><ul><li>Setting up ...
Adobe Design Tools <ul><li>Adobe Photoshop – Great design tool, however no way to export XAML. </li></ul><ul><li>Adobe Ill...
Adobe Fireworks CS3 <ul><li>Fireworks has its roots in web and RIA design. </li></ul><ul><li>It  is an outstanding tool to...
 
Building Design Comps in Fireworks <ul><li>Fireworks is an outstanding tool to design application UI for client approval. ...
Adobe Fireworks CS3 Examples <ul><li>Aspiring Architects </li></ul><ul><li>CSS </li></ul>
 
 
 
 
<ul><li>These examples are ok, but how do I get XAML out of this? </li></ul><ul><li>? </li></ul>
Fireworks to XAML Panel <ul><li>Extension for Fireworks built by Infragistics </li></ul><ul><li>Download it here: </li></u...
Export Something
Export Settings – Output Tab <ul><li>Output Tab Settings </li></ul><ul><ul><li>Export Images – I don’t export images from ...
Export Settings – XAML Options <ul><li>XAML Options Tab Settings </li></ul><ul><ul><li>Grid or Canvas – depends on how you...
Expression Blend <ul><li>Draw and assemble design assets. </li></ul><ul><li>Build up layout structure. </li></ul><ul><li>B...
 
Expression Blend <ul><li>Creating a new project </li></ul><ul><li>Finding Palettes </li></ul><ul><li>Introduction to layou...
Getting XAML into Blend <ul><li>The purpose of compositing design elements in Fireworks/Design is the ability to export XA...
XAML Composition in Blend <ul><li>Layout First – look at your design comps and decide which panels to use to hold your des...
Can I Just Use Blend? <ul><li>Blend is extremely powerful and capable of doing most design tasks. </li></ul><ul><li>My cre...
What Now? <ul><li>As a Designer, you should be pretty excited about the possibilities of WPF. </li></ul><ul><li>As a Devel...
Looking For More Info? <ul><li>Visit the TechEd Sessions of my co-workers. </li></ul><ul><ul><li>Josh Wagoner </li></ul></...
Got Questions? <ul><li>Hopefully I have answers… </li></ul>
Thanks For Coming <ul><li>Email:  [email_address] </li></ul><ul><li>My Site:  http://gobigdale.wordpress.com </li></ul><ul...
Resources <ul><li>Microsoft Expression Design http://www.microsoft.com/expression/products/overview.aspx?key=design </li><...
Resources - Continued <ul><li>Technical Communities, Webcasts, Blogs, Chats & User Groups http://www.microsoft.com/communi...
Complete your evaluation on the My Event pages of the website at the CommNet or the Feedback Terminals to win!
© 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES N...
Upcoming SlideShare
Loading in...5
×

How To Express Your Creative Self With Windows Presentation Foundation And Silverlight

1,803

Published on

Published in: Economy & Finance, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Transcript of "How To Express Your Creative Self With Windows Presentation Foundation And Silverlight"

    1. 1. Design To Blend Dale G. Jones Director of Creative Design IdentityMine, Inc.
    2. 2. Session Prerequisites <ul><li>Microsoft Expression Design http://www.microsoft.com/expression/products/overview.aspx?key=design </li></ul><ul><li>Microsoft Expression Blend http://www.microsoft.com/expression/products/overview.aspx?key=blend </li></ul><ul><li>Adobe Fireworks http://www.adobe.com/products/fireworks/ </li></ul><ul><li>FW to XAML Exporter http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html </li></ul>
    3. 3. Session Objectives and Agenda <ul><li>Reduce fear about designing for WPF. </li></ul><ul><li>Show real world workflow from concept to XAML. </li></ul><ul><li>Provide a brief overview of the tools I use. </li></ul><ul><li>Get Creative Designers excited about WPF & Silverlight. </li></ul>
    4. 4. Who Am I? <ul><li>Dale Jones Director of Creative Design IdentityMine, Inc. </li></ul><ul><li>I lead a team of Creative Designers that build exciting solutions on new Microsoft UX Platforms (WPF & Silverlight). </li></ul><ul><li>Designing for the web (8 years) </li></ul><ul><li>Designing for WPF (2.5 years) </li></ul>
    5. 5. Where I Work
    6. 6. Why Do We Need Designers? <ul><li>Users are expecting better application experiences. </li></ul><ul><li>Developers are excellent at making it work, but tend to overlook the visual details of an application. </li></ul><ul><li>The best applications are developed when there is collaboration between Designers & Developers. </li></ul>
    7. 7. What’s In It For You? <ul><li>With WPF, it is possible to maintain design integrity throughout the application development process. </li></ul><ul><li>Your applications can be taken further than in past technologies. </li></ul><ul><li>Developers are now a Designer’s best friend! </li></ul>
    8. 8. Lets Talk Process
    9. 9. New Process Ideas
    10. 10. It Starts With The Team Designer graphics, media, color, UX, UI Developer data, logic, code
    11. 11. But Wait A Second… Designer graphics, media, color, UX, UI Developer data, logic, code ? layout, animation, events, markup, integration
    12. 12. The Team With An Integrator Designer graphics, media, color, UX, UI Developer data, logic, code Integrator layout, animation, events, integration
    13. 13. The Team & Tools
    14. 14. What Ties Us Together? <ul><li><XAML> </li></ul>
    15. 15. XAM L XAM L XAM L
    16. 16. These Roles Are Rigid  <ul><li>I am a designer and love to play with markup, where do I fit in? </li></ul><ul><li>Our company is small, we can’t staff this way. What do we do? </li></ul>
    17. 17. Roles Reflect Project Responsibilities <ul><li>The tasks to build a successful application don’t change based on the people performing the tasks. </li></ul><ul><li>One person may have to share role responsibilities to accomplish all project tasks. </li></ul><ul><li>Defining tasks and roles before project starts gives a better chance of project success. </li></ul>
    18. 18. I Am A Designer For the purpose of this presentation I am going to be the designer, and show you how Designers work with Integrators and Developers at IdentityMine.
    19. 19. I Am Assuming… <ul><li>That you have a basic understanding of: </li></ul><ul><ul><li>- Windows Presentation Foundation </li></ul></ul><ul><ul><li>- Expression Design </li></ul></ul><ul><ul><li>- Expression Blend </li></ul></ul><ul><ul><li>- Adobe Fireworks CS3 </li></ul></ul><ul><ul><li>- Basic XAML </li></ul></ul><ul><ul><li>Understanding these tools/technologies are my keys for “Designing To Blend”. </li></ul></ul>
    20. 20. What This Session Is Not <ul><li>A complete discussion about the WPF Platform </li></ul><ul><li>Extensive XAML Overview </li></ul><ul><ul><li>Custom controls </li></ul></ul><ul><ul><li>Resource Dictionaries </li></ul></ul><ul><ul><li>Styles </li></ul></ul><ul><ul><li>Templates </li></ul></ul>
    21. 21. Expression Design <ul><li>Prototyping and Composition Design. </li></ul><ul><li>A few nice features that other design programs don’t have. </li></ul><ul><li>Very nice XAML exporter. </li></ul><ul><li>Lets go take a look. </li></ul>
    22. 23. Expression Design Examples <ul><li>Roxio Central Vista Technology Preview </li></ul><ul><li>Microsoft Dynamics Sure Step </li></ul><ul><li>LSTV </li></ul>
    23. 28. Expression Design Walkthrough <ul><li>Creating a new file </li></ul><ul><li>Finding Palettes </li></ul><ul><li>Setting up preferences </li></ul><ul><li>Working with the tools </li></ul><ul><li>Open file and export some XAML </li></ul>
    24. 29. Adobe Design Tools <ul><li>Adobe Photoshop – Great design tool, however no way to export XAML. </li></ul><ul><li>Adobe Illustrator – Has a XAML exporter, but I don’t use Illustrator for application design. </li></ul><ul><li>Adobe Fireworks CS3 – We have a winner! </li></ul>
    25. 30. Adobe Fireworks CS3 <ul><li>Fireworks has its roots in web and RIA design. </li></ul><ul><li>It is an outstanding tool to develop vector based graphics. </li></ul><ul><li>Fireworks integrates bitmap graphics very well into its design surface. </li></ul><ul><li>Easy transition for existing Photoshop users. </li></ul>
    26. 32. Building Design Comps in Fireworks <ul><li>Fireworks is an outstanding tool to design application UI for client approval. </li></ul><ul><li>It allows for designer to separate UI design into “Pages”. </li></ul><ul><li>Pages contain their own layers set. </li></ul><ul><li>This allows designers to design exact “states” of the applications and export for client approval. </li></ul><ul><li>Once that approval has been given, Fireworks exports XAML assets. </li></ul><ul><li>This is a great time saver over other tools/platforms. </li></ul>
    27. 33. Adobe Fireworks CS3 Examples <ul><li>Aspiring Architects </li></ul><ul><li>CSS </li></ul>
    28. 38. <ul><li>These examples are ok, but how do I get XAML out of this? </li></ul><ul><li>? </li></ul>
    29. 39. Fireworks to XAML Panel <ul><li>Extension for Fireworks built by Infragistics </li></ul><ul><li>Download it here: </li></ul><ul><li>http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html </li></ul><ul><li>Lets see it in action </li></ul>
    30. 40. Export Something
    31. 41. Export Settings – Output Tab <ul><li>Output Tab Settings </li></ul><ul><ul><li>Export Images – I don’t export images from Fireworks here. </li></ul></ul><ul><ul><li>Fill Textures (using images) – I tend to stay away from this. </li></ul></ul><ul><ul><li>Pattern Fills (using images) – I try to stay away from this. </li></ul></ul><ul><ul><li>Bitmap Effects – not a good idea, hurts app performance </li></ul></ul><ul><ul><li>Text Options – Exporting Text works pretty well. Exporting text on a path should be converted to Paths. </li></ul></ul>
    32. 42. Export Settings – XAML Options <ul><li>XAML Options Tab Settings </li></ul><ul><ul><li>Grid or Canvas – depends on how you need your XAML. Silverlight XAML needs Canvas export. </li></ul></ul><ul><ul><li>Convert Rectangles to Borders – most of the time this is checked. </li></ul></ul><ul><ul><li>Element Names – Good idea to name layered groups. </li></ul></ul><ul><ul><li>Export Fills As Resources – Unchecked - Usually I set up my resource dictionaries before I export from Fireworks. </li></ul></ul>
    33. 43. Expression Blend <ul><li>Draw and assemble design assets. </li></ul><ul><li>Build up layout structure. </li></ul><ul><li>Bind to data. </li></ul><ul><li>A whole lot more. </li></ul><ul><li>Lets go take a look. </li></ul>
    34. 45. Expression Blend <ul><li>Creating a new project </li></ul><ul><li>Finding Palettes </li></ul><ul><li>Introduction to layout tools </li></ul><ul><li>Working with the built in controls </li></ul><ul><li>Bring in Exported XAML </li></ul>
    35. 46. Getting XAML into Blend <ul><li>The purpose of compositing design elements in Fireworks/Design is the ability to export XAML pieces. </li></ul><ul><li>Know what to export and what to rebuild in Blend. </li></ul>
    36. 47. XAML Composition in Blend <ul><li>Layout First – look at your design comps and decide which panels to use to hold your design elements together. </li></ul><ul><li>Grid, Canvas, StackPanel, etc. </li></ul><ul><li>Once you understand basic layout, start inserting some exported XAML. </li></ul>
    37. 48. Can I Just Use Blend? <ul><li>Blend is extremely powerful and capable of doing most design tasks. </li></ul><ul><li>My creative process utilizes a Design program first, this allows me to collaborate with clients without thinking too much about the implementation of XAML </li></ul><ul><li>I have found it easier to work in the design tool I am familiar with and then composite XAML in Blend. </li></ul><ul><li>Work with what feels right to you, but still gets the job done. </li></ul>
    38. 49. What Now? <ul><li>As a Designer, you should be pretty excited about the possibilities of WPF. </li></ul><ul><li>As a Developer, you should be excited that you don’t have to mess with so many design tasks. </li></ul><ul><li>The next step is to find an equally excited people and start building some beautiful applications! </li></ul>
    39. 50. Looking For More Info? <ul><li>Visit the TechEd Sessions of my co-workers. </li></ul><ul><ul><li>Josh Wagoner </li></ul></ul><ul><ul><ul><li>WPF : Beyond Styles & Templates Next Session in Room 112 </li></ul></ul></ul><ul><ul><ul><li>Lessons Learned : Designer/Developer Workflow in WPF and Silverlight Thursday at 9am in this room (Tent 1) </li></ul></ul></ul><ul><ul><li>Robby Ingebretson </li></ul></ul><ul><ul><ul><li>ZAP! WHAM! KAPOW! : The Next Generation of Online Comic Book Reading in WPF Thursday at 1:30pm in this room (Tent 1) </li></ul></ul></ul>
    40. 51. Got Questions? <ul><li>Hopefully I have answers… </li></ul>
    41. 52. Thanks For Coming <ul><li>Email: [email_address] </li></ul><ul><li>My Site: http://gobigdale.wordpress.com </li></ul><ul><li>Work Site: www.identitymine.com </li></ul>
    42. 53. Resources <ul><li>Microsoft Expression Design http://www.microsoft.com/expression/products/overview.aspx?key=design </li></ul><ul><li>Microsoft Expression Blend http://www.microsoft.com/expression/products/overview.aspx?key=blend </li></ul><ul><li>Adobe Fireworks CS3 http://www.adobe.com/products/fireworks/ </li></ul><ul><li>Fireworks to XAML Exporter http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html </li></ul>Required slide: Please customize this slide with the resources relevant to your session
    43. 54. Resources - Continued <ul><li>Technical Communities, Webcasts, Blogs, Chats & User Groups http://www.microsoft.com/communities/default.mspx </li></ul><ul><li>Microsoft Learning and Certification http://www.microsoft.com/learning/default.mspx </li></ul><ul><li>Microsoft Developer Network (MSDN) & TechNet http://microsoft.com/msdn http://microsoft.com/technet </li></ul><ul><li>Trial Software and Virtual Labs http://www.microsoft.com/technet/downloads/trials/default.mspx </li></ul><ul><li>New, as a pilot for 2007, the Breakout sessions will be available post event, in the TechEd Video Library, via the My Event page of the website </li></ul>Required slide: Please customize this slide with the resources relevant to your session MSDN Library Knowledge Base Forums MSDN Magazine User Groups Newsgroups E-learning Product Evaluations Videos Webcasts V-labs Blogs MVPs Certification Chats learn support connect subscribe Visit MSDN in the ATE Pavilion and get a FREE 180-day trial of MS Visual Studio Team System!
    44. 55. Complete your evaluation on the My Event pages of the website at the CommNet or the Feedback Terminals to win!
    45. 56. © 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×