designing silverlight
DESCRIPTION
web app design with silverlightTRANSCRIPT
![Page 1: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/1.jpg)
Designing Silverlight Web
Apps
Microsoft Korea
Reagan Hwang
![Page 2: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/2.jpg)
![Page 3: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/3.jpg)
Parallel Paths
Command Line CUI GUI WebGames
![Page 4: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/4.jpg)
Parallel Paths
Command Line CUI GUI WebGames
Web Applications
![Page 5: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/5.jpg)
Continuum
Web Site
Static information
Lot’s of informationOne direction
Structured
transactions
Atomic
transactions
Web App
Dynamic information
Less informationTwo directions
Unstructured
transactions
Work broken over
time
![Page 6: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/6.jpg)
A different navigation paradigm
Web Site: User navigates to information
This is about wayfinding…
Web App: Functionality comes to the user
This is about working in one
place…
![Page 7: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/7.jpg)
Techniques
Web Site
User Research
Personas
Card Sorting
Content Structure
Wireframes
Usability Test
Refine
Site Map
Treat
...
![Page 8: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/8.jpg)
Techniques
Web Site
User Research
Personas
Card Sorting
Content Structure
Wireframes
Usability Test
Refine
Site Map
Treat
...
Web Application
User Research
Activity Scenarios
Task Analysis
Workflow Diagram
Storyboards
Usability Test
Refine
Screenflow
diagrams
Treat
...
![Page 9: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/9.jpg)
Workflow Diagram
New Inquiry
Who is calling?
Create ‘Customer’
Identify ‘Customer’
Create ‘Policy Claim’
Identify ‘Policy Claim’
What do they wa
nt?Act on request
Finish Call
New
Existing
New
Existing
The Hiser Group
![Page 10: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/10.jpg)
Workflow diagramming in action
The Hiser Group
![Page 11: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/11.jpg)
Workflow diagram
Plan Special
Effect
Record
Composite
to Film
Preview
Retouch
Images
Interpolate
Set
Parameters
Select
Nodes
Scan in
Film Rolls
Convert &
Manipulate
Tape
Build
Flowgraph Composite
Convert &
Manipulate
Tape
Arrange
Elements on
Lightbox
Preparation Planning Implementation Completion
The Hiser Group
![Page 12: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/12.jpg)
Interaction model
Node P
ale
tte NodeParameters
Preview
Console
FileManager
Lightbox Flowgraph PaintConversion/
TransferManager
Composite ScrapbookNotesJobNavigationMinature
Interpolation
Pale
tte
Pale
tte
Pale
tteP
ale
tte
Early draft
Plan Special
Effect
Record
Composite
to Film
Preview
Retouch
Images
Interpolate
Set
Parameters
Select
Nodes
Scan in
Film Rolls
Convert &
Manipulate
Tape
Build
Flowgraph Composite
Convert &
Manipulate
Tape
Arrange
Elements on
Lightbox
Preparation Planning Implementation Completion
The Hiser Group
![Page 13: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/13.jpg)
Screen Flow Diagram
Select Property Item
In Store
Save
Open item for EditingAdd New Item…
A10
2.1.2
A11
Edit
Add/Edit from PRO010
Edit from PRO030
Print Property Transaction
PRO110
If launched from PRO100
Edit Property Location
PRO060
Update Property Item
PRO040
PRO030
Offender File window – View Property Item
Edit Default Property Location
PRO020
PRO010
Offender File window –Offender Property
PRO100
Offender File window –Property Update History
![Page 14: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/14.jpg)
![Page 15: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/15.jpg)
![Page 16: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/16.jpg)
![Page 17: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/17.jpg)
![Page 18: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/18.jpg)
![Page 19: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/19.jpg)
![Page 20: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/20.jpg)
Expression Studio Ecosystem
Expression
Blend
Expression
Web
PhotoShop
Illustrator
Visio...
AfterEffects
FinalCut Pro
Audigy...
DeepZoom
Composer
Expression
Media
Expression
Blend
Expression
Web
Zam3D
...
Expression
Design
Expression
Encoder
![Page 21: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/21.jpg)
Process – 5 C’s
Don’t start at the end!
Co
nce
pt
Sketch
Wireframe
Comp
Co
ntr
act
Naming conventions
Events
States
Data sourcesC
on
stru
ctio
nLayout
User controls
Co
nte
nt
Media
Graphics
Copy
Co
mp
osi
tio
n
Slice
HTML
• Pen
• Visio
• Expression Design
• Omnigraffle
• Axure
• ...
• TFS
• Word
• Expression Blend • Expression Media
• Expression Encoder
• Expression design
• Photoshop
• Illustrator
• AfterEffects
• MovieMaker
• ...
• Expression Design
• Expression Web
![Page 22: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/22.jpg)
Concept
Wireframes1. PowerPoint
2. Expression DesignGraphic Design proceeds...
3. Expression BlendInteraction Design proceeds...
Development proceeds...
Co
nce
pt
Sketch
Wireframe
Comp
![Page 23: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/23.jpg)
Contract
Agreed objects and events that form the conduit between front end and back end
Co
ntr
act
Naming conventions
Events
States
Data sources
![Page 24: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/24.jpg)
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_VicUC_PeepControl.VS_NSW...
Visual State Visual State if from Victoria(etc. for NSW, Qld, SA, WA, Tas, ACT, NT)
![Page 25: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/25.jpg)
Construction
Co
nst
ruct
ion
Layout
User controls
![Page 26: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/26.jpg)
Content
Video
Audio
Graphics
Copy
Co
nte
nt
Media
Graphics
Copy
![Page 27: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/27.jpg)
Composition
Assemble HTML
Load Assets
Co
mp
osi
tio
n
Slice
HTML
![Page 28: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/28.jpg)
Expression Studio Ecosystem
PhotoShop
Illustrator
Visio...
AfterEffects
FinalCut Pro
Audigy...
DeepZoom
Composer
Expression
Media
Expression
Blend
Expression
Web
Zam3D
...
Expression
Design
Expression
Encoder
Expression
Blend
Expression
Web
![Page 29: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/29.jpg)
Lessons Learnt
Wireframing
Expression Design does have a roleComps without layout
Bitmap effects
More complex elements
Slicing
The ContractAgreed Names
Naming Conventions
![Page 30: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/30.jpg)
It Starts With The Team
![Page 31: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/31.jpg)
But Wait A Second…
?layout,
animation,events, markup,
integration
![Page 32: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/32.jpg)
The Team With An Integrator
Integratorlayout,
animation,events,
integration
![Page 33: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/33.jpg)
The Team & Tools
![Page 34: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/34.jpg)
What Ties Us Together?
<XAML>
![Page 35: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/35.jpg)
XAML XAML
XAML
![Page 36: Designing Silverlight](https://reader031.vdocument.in/reader031/viewer/2022020206/545606edaf795998788b4b95/html5/thumbnails/36.jpg)
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/