Designing Silverlight Web Apps Microsoft Korea Reagan Hwang
Designing Silverlight
Nov 01, 2014
web app design with silverlight
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Designing Silverlight Web
Apps
Microsoft Korea
Reagan Hwang
Parallel Paths
Command Line CUI GUI WebGames
Parallel Paths
Command Line CUI GUI WebGames
Web Applications
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
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…
Techniques
Web Site
User Research
Personas
Card Sorting
Content Structure
Wireframes
Usability Test
Refine
Site Map
Treat
...
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
...
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
Workflow diagramming in action
The Hiser Group
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
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
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
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
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
Concept
Wireframes1. PowerPoint
2. Expression DesignGraphic Design proceeds...
3. Expression BlendInteraction Design proceeds...
Development proceeds...
Co
nce
pt
Sketch
Wireframe
Comp
Contract
Agreed objects and events that form the conduit between front end and back end
Co
ntr
act
Naming conventions
Events
States
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_VicUC_PeepControl.VS_NSW...
Visual State Visual State if from Victoria(etc. for NSW, Qld, SA, WA, Tas, ACT, NT)
Construction
Co
nst
ruct
ion
Layout
User controls
Content
Video
Audio
Graphics
Copy
Co
nte
nt
Media
Graphics
Copy
Composition
Assemble HTML
Load Assets
Co
mp
osi
tio
n
Slice
HTML
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
Lessons Learnt
Wireframing
Expression Design does have a roleComps without layout
Bitmap effects
More complex elements
Slicing
The ContractAgreed Names
Naming Conventions
It Starts With The Team
But Wait A Second…
?layout,
animation,events, markup,
integration
The Team With An Integrator
Integratorlayout,
animation,events,
integration
The Team & Tools
What Ties Us Together?
<XAML>
XAML XAML
XAML
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/
Related Documents
