http://techmaster.vn
UI Prototyping with MS Expresion Blend
Bài giảng do giảng viên TechMaster biên soạn
http://techmaster.vn
Agenda
• Problems when coding without prototype
• Introduction to Expression Blend
• UI Prototyping with Expression Blend
http://techmaster.vn
• Stakeholders asked for user requirements
• You started building a function immediately
• Stakeholders end up saying that is not what they want
• => You ruin and redesign everything with an angry attitude
Problems when coding without prototype
http://techmaster.vn
• But it’s not real problem
• Problem here is we need a way to validate what’s the stakeholder want before is too late
• It has to fast process for the stakeholder provide feedbacks
Problems when coding without prototype
http://techmaster.vn
Good Pattern
http://techmaster.vn
Good Pattern
http://techmaster.vn
SketchFlow Role
http://techmaster.vn
3 Ingredients of a Good UX
Platform
Tools
Skills
UX
http://techmaster.vn
• Interactive design tool for rich apps built in Windows Phone, Silverlight and WPF
• SketchFlow is a rapid prototyping tool that allows you to build and test out UI’s quickly
• Provide an interactive way to get stakeholder feedbacks
• Market-leading designer-developer integration and workflow
Why is Expression Blend Sketchflow
http://techmaster.vn
Designer & Developer Workflow
Designer Developer
http://techmaster.vn
Rapidly Model the Look and Feel
http://techmaster.vn10/04/2023
Multi-Version/User Feedback
http://techmaster.vn
http://techmaster.vn
http://techmaster.vn
http://techmaster.vn
• Drag & Drop interface
• Sketch controls style
• Navigation, animations, behaviors
• Realistic sample data
• Highly customizable: UI & code
• Package and send prototype to stakeholder for adding comment, draw some feedbacks figures
• Documentation generation
SketchFlow hightlights
http://techmaster.vn
UI Prototyping with Expression Blend
• Define the purpose of the app
–What are the goals of the app?
–What are the user’s requirements?
– How can you keep them aligned?
http://techmaster.vn
Analysis Matrix – User Story
People Places Activities MotivationsCollege Student In a classroom Bored in class Impressing a date
Young single professional In the elevator Using spare time Enjoys cooking
Newly married person At the bus stop Waiting for the bus Wants to improve cooking skills
New mother On the couch Relaxing for a few minutes Needs meals that can be cooked quickly
Nurse At the doctor’s office Taking a break Wants to try new spices and flavors
Busy Parent On the bus/train Cooking for a crowd Looking for recipes for food already in the house
Fireperson At work Refreshing memory on favorite recipe Needs to find fast recipes to feed co-workers
Cook In the kitchen Researching other people’s favorite recipes
Create more diversity in meals
Writer In the car Looking for good food in own home Likes to try new foods
Teacher In the break room Shopping Trying to save time/money
“Make it easy for busy folks to locate and share quick recipes”
http://techmaster.vn
MindMap – User Story
http://techmaster.vn
List User Story
http://techmaster.vn
Expression Blend Workspace• Document
windows
• Artboard
• SketchFlow Map
• Tools panel
• Properties
• Objects & Timeline
http://techmaster.vn
SketchFlow Map
http://techmaster.vn
Sketch styles for controls
http://techmaster.vn
Adding navigations
http://techmaster.vn
Data binding and sample data
http://techmaster.vn
SketchFlow animation
http://techmaster.vn
SketchFlow player
http://techmaster.vn
Design documentation
http://techmaster.vn
What’s next?
• From Sketchflow to production
• Animation, Transition
http://techmaster.vn
• Sketchflow provide us with a quick way to build a prototype using just hand drawn sketches.
• How to build a page by using sketched controls and reusable components.
• How to add real data to our prototype.
Summary
Top Related