Designing
Silverlight Web

     Apps
           Microsoft Korea
           Reagan Hwang
Parallel Paths


Command Line   CUI   Games   GUI   Web
Parallel Paths
                              Web Applications



Command Line   CUI   Games   GUI      Web
Continuum


Web Site                 Web App
 Static information      Dynamic information
 Lot’s of information    Les...
A different navigation paradigm

Web Site: User navigates to information   Web App: Functionality comes to the user




  ...
Techniques
Web Site
 User Research
 Personas
 Card Sorting
 Content Structure
 Wireframes
 Usability Test
 Refine
...
Techniques
Web Site              Web Application
 User Research        User Research
 Personas             Activity Sc...
Workflow Diagram


                                                  Create ‘Policy Clai
                             Crea...
Workflow diagramming in action




The Hiser Group
Workflow diagram
                                                                                  Interpolate




       ...
Interpolate




   Interaction model
                                                                                     ...
Screen Flow Diagram
                                                            Edit Default
                             ...
Expression Studio Ecosystem
PhotoShop
 Illustrator
               Expression                Expression   Expression
  Visi...
Process – 5 C’s
          Don’t start at the end!




                                                                    ...
Concept




                                     Concept
 Wireframes
  1. PowerPoint                                   Ske...
Contract




                             Contract
 Agreed objects and events                  Naming
                    ...
Contract
Name                     Type            Notes
UC_PeepControl           User Control    Avatar
UC_PeepControl.SB_...
Construction




               Construction
                                    Layout
                              User...
Content




            Content
 Video
 Audio                  Media
                      Graphics
 Graphics             ...
Composition




                 Composition
 Assemble HTML
 Load Assets
                               Slice
            ...
Expression Studio Ecosystem
PhotoShop
 Illustrator
               Expression                Expression   Expression
  Visi...
Lessons Learnt
 Wireframing
 Expression Design does have a role
   Comps without layout
   Bitmap effects
   More complex ...
It Starts With The Team
But Wait A Second…



                  ?
                layout,
              animation,
            events, markup,
   ...
The Team With An Integrator




              Integrator
                layout,
              animation,
                ...
The Team & Tools
What Ties Us Together?



           <XAML>
XAM L   XAM L




                XAM L
Reference

  http://www.slideshare.net/garrettdimon/improving-interface-
  design
  http://www.slideshare.net/shanemo/web3...
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Designing Silverlight
Upcoming SlideShare
Loading in...5
×

Designing Silverlight

3,389

Published on

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,389
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
80
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing Silverlight

  1. 1. Designing Silverlight Web Apps Microsoft Korea Reagan Hwang
  2. 2. Parallel Paths Command Line CUI Games GUI Web
  3. 3. Parallel Paths Web Applications Command Line CUI Games GUI Web
  4. 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. 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. 6. Techniques Web Site  User Research  Personas  Card Sorting  Content Structure  Wireframes  Usability Test  Refine  Site Map  Treat  ...
  7. 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. 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. 9. Workflow diagramming in action The Hiser Group
  10. 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. 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. 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. 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. 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. 15. Concept Concept Wireframes 1. PowerPoint Sketch 2. Expression Design Wireframe Comp Graphic Design proceeds... 3. Expression Blend Interaction Design proceeds... Development proceeds...
  16. 16. Contract Contract Agreed objects and events Naming conventions that form the conduit Events between front end and States back end Data sources
  17. 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. 18. Construction Construction Layout User controls
  19. 19. Content Content Video Audio Media Graphics Graphics Copy Copy
  20. 20. Composition Composition Assemble HTML Load Assets Slice HTML
  21. 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. 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. 23. It Starts With The Team
  24. 24. But Wait A Second… ? layout, animation, events, markup, integration
  25. 25. The Team With An Integrator Integrator layout, animation, events, integration
  26. 26. The Team & Tools
  27. 27. What Ties Us Together? <XAML>
  28. 28. XAM L XAM L XAM L
  29. 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/
  1. A particular slide catching your eye?

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

×