Your SlideShare is downloading. ×
0
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Silverlight

3,375

Published on

web app design with silverlight

web app design with silverlight

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,375
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
80
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designing Silverlight Web Apps Microsoft Korea Reagan Hwang
  • 2. Parallel Paths Command Line CUI Games GUI Web
  • 3. Parallel Paths Web Applications Command Line CUI Games GUI Web
  • 4. Continuum Web Site Web App  Static information  Dynamic information  Lot’s of information  Less information One direction Two directions  Structured  Unstructured transactions transactions  Atomic  Work broken over transactions time
  • 5. A different navigation paradigm Web Site: User navigates to information Web App: Functionality comes to the user This is about wayfinding… This is about working in one place…
  • 6. Techniques Web Site  User Research  Personas  Card Sorting  Content Structure  Wireframes  Usability Test  Refine  Site Map  Treat  ...
  • 7. Techniques Web Site Web Application  User Research  User Research  Personas  Activity Scenarios  Card Sorting  Task Analysis  Content Structure  Workflow Diagram  Wireframes  Storyboards  Usability Test  Usability Test  Refine  Refine  Site Map  Screenflow  Treat diagrams  ...  Treat  ...
  • 8. Workflow Diagram Create ‘Policy Clai Create ‘Customer’ m’ New New What do New Inq Who is c Finish they wa Act on request uiry alling? Call nt? Existing Existing Identify ‘Customer Identify ‘Policy Clai ’ m’ The Hiser Group
  • 9. Workflow diagramming in action The Hiser Group
  • 10. Workflow diagram Interpolate Set Parameters Retouch Images Select Nodes Convert & Arrange Convert & Record Scan in Plan Special Build Manipulate Elements on Composite Manipulate Composite Film Rolls Effect Flowgraph Tape Lightbox Tape to Film Preview Preparation Planning Implementation Completion The Hiser Group
  • 11. Interpolate Interaction model Set Parameters Retouch Images Select Nodes Convert & Arrange Convert & Record S can in Plan Special Build Manipulate Elements on Composite Manipulate Composite Film Rolls Effect Flowgraph Tape Lightbox Tape to Film Preview Early draft Preparation Planning Implementation Completion Palette Node Palette Palette Palette Interpolation Palette Node Parameters File Conversion/ Flowgraph Manager Lightbox Paint Transfer Manager Console Navigation Job Minature Preview Composite Notes Scrapbook The Hiser Group
  • 12. Screen Flow Diagram Edit Default Edit  Property Location Save PRO020 2.1.2   Offender File Offender File window – Select Property Item window – View Offender Property Item Property  Edit from PRO010 PRO030 A11 PRO030 Open item for Editing Print Property Add New Item… Update  Add/Edit from PRO010 Transaction Property Item  PRO110 A10 PRO040 If launched from PRO100  Offender File window – In Store  Edit Property Property Update Location History PRO100  PRO060
  • 13. Expression Studio Ecosystem PhotoShop Illustrator Expression Expression Expression Visio... Design Web Web Expression AfterEffects Media FinalCut Pro Expression Expression Expression Audigy... Encoder Blend Blend Zam3D DeepZoom ... Composer
  • 14. Process – 5 C’s Don’t start at the end! Composition Construction Contract Content Concept Naming conventions Sketch Events Media Wireframe States Layout Graphics Slice Comp Data sources User controls Copy HTML • Pen • TFS • Expression Blend • Expression Media • Expression Design • Visio • Word • Expression • Expression Web • Expression Design Encoder • Omnigraffle • Expression design • Axure • Photoshop • ... • Illustrator • AfterEffects • MovieMaker • ...
  • 15. Concept Concept Wireframes 1. PowerPoint Sketch 2. Expression Design Wireframe Comp Graphic Design proceeds... 3. Expression Blend Interaction Design proceeds... Development proceeds...
  • 16. Contract Contract Agreed objects and events Naming conventions that form the conduit Events between front end and States back end Data sources
  • 17. Contract Name Type Notes UC_PeepControl User Control Avatar UC_PeepControl.SB_Enter Storyboard Attendee arrival UC_PeepControl.SB_Exit Storyboard Attendee departure CV_Theatre Canvas Boundary for Theatre Scene TBL_Pax TextBlock # Attendees ME_Video Media Element Logos video loop GD_ChartContainer Grid Container for graphs TBL_SponsorType Text Block Type of current sponsor UC_PeepControl.VS_Vic Visual State Visual State if from Victoria UC_PeepControl.VS_NSW (etc. for NSW, Qld, SA, WA, Tas, ACT, NT) ...
  • 18. Construction Construction Layout User controls
  • 19. Content Content Video Audio Media Graphics Graphics Copy Copy
  • 20. Composition Composition Assemble HTML Load Assets Slice HTML
  • 21. Expression Studio Ecosystem PhotoShop Illustrator Expression Expression Expression Visio... Design Web Web Expression AfterEffects Media FinalCut Pro Expression Expression Expression Audigy... Encoder Blend Blend Zam3D DeepZoom ... Composer
  • 22. Lessons Learnt Wireframing Expression Design does have a role Comps without layout Bitmap effects More complex elements Slicing The Contract Agreed Names Naming Conventions
  • 23. It Starts With The Team
  • 24. But Wait A Second… ? layout, animation, events, markup, integration
  • 25. The Team With An Integrator Integrator layout, animation, events, integration
  • 26. The Team & Tools
  • 27. What Ties Us Together? <XAML>
  • 28. XAM L XAM L XAM L
  • 29. Reference http://www.slideshare.net/garrettdimon/improving-interface- design http://www.slideshare.net/shanemo/web311-designing- compelling-silverlight-user-experiences-with-expression-studio- presentation http://www.slideshare.net/shanemo/from-website-to-webapp- shane-morris-presentation http://www.slideshare.net/guest83d3e0/how-to-express-your- creative-self-with-windows-presentation-foundation-and- silverlight http://www.slideshare.net/billwscott/designing-for-ajax/

×