• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing Silverlight
 

Designing Silverlight

on

  • 4,723 views

web app design with silverlight

web app design with silverlight

Statistics

Views

Total Views
4,723
Views on SlideShare
4,277
Embed Views
446

Actions

Likes
3
Downloads
79
Comments
0

18 Embeds 446

http://uxfactory.com 287
http://www.uxfactory.com 75
http://www.hanrss.com 33
http://kin.dragonflygame.co.kr 17
http://intranet.nowcom.co.kr 9
http://www.slideshare.net 6
file:// 4
http://tychousa9.umuc.edu 3
http://mail37.paran.com 2
http://uxfactory.tistory.com 2
http://wildfire.gigya.com 1
http://mail58.paran.com 1
http://cafe987.daum.net 1
http://feeds.feedburner.com 1
http://tychousa11.umuc.edu 1
https://vpn.dragonflygame.com 1
http://mail.teaminterface.com 1
http://tychousa7.umuc.edu 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing Silverlight Designing Silverlight Presentation Transcript

    • 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  Less information One direction Two directions  Structured  Unstructured transactions transactions  Atomic  Work broken over transactions time
    • 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…
    • Techniques Web Site  User Research  Personas  Card Sorting  Content Structure  Wireframes  Usability Test  Refine  Site Map  Treat  ...
    • 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  ...
    • 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
    • Workflow diagramming in action The Hiser Group
    • 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
    • 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
    • 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
    • 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
    • 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 • ...
    • Concept Concept Wireframes 1. PowerPoint Sketch 2. Expression Design Wireframe Comp Graphic Design proceeds... 3. Expression Blend Interaction Design proceeds... Development proceeds...
    • Contract Contract Agreed objects and events Naming conventions that form the conduit Events between front end and States back end Data sources
    • 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) ...
    • Construction Construction Layout User controls
    • Content Content Video Audio Media Graphics Graphics Copy Copy
    • Composition Composition Assemble HTML Load Assets Slice HTML
    • 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
    • Lessons Learnt Wireframing Expression Design does have a role Comps without layout Bitmap effects More complex elements Slicing The Contract Agreed Names Naming Conventions
    • It Starts With The Team
    • But Wait A Second… ? layout, animation, events, markup, integration
    • The Team With An Integrator Integrator layout, animation, events, integration
    • 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/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/