ui prototyping with ms expression blend sketch flow
DESCRIPTION
Thiết kế prototype ui của sản phẩm sử dụng expression blendTRANSCRIPT
UI Prototyping with MS Expresion Blend
Nguyễn Thanh Tùng – Chief Software Architect - MISA JSC
Agenda
Problems when coding without prototype
Introduction to Expression Blend UI Prototyping with Expression Blend
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
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
Good pattern
ProductionPrototype
Core architecture
User Experience
Visual Studio
Expression Blend
SketchFlow
PSD, AI, Paper Client
1: Ideas 2: Resources 3: Project
SketchFlow Role
ProductionPrototype
Visual Studio
Expression Blend
SketchFlow
PSD, AI, Paper
ALM/Visual Studio Team System
Specs,Requirements Deployment
3 Ingredients of a Good UX
Platform
Tools
Skills
UX
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
Designer & Developer Workflow
Designer Developer
Rapidly Model the Look and Feel
08/04/2023
Multi-Version/User Feedback
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
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?
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”
MindMap – User Story
List User Story
Expression Blend Workspace
Document windows
Artboard SketchFlow Map Tools panel Properties Objects &
Timeline
SketchFlow Map
Sketch styles for controls
Adding navigations
Data binding and sample data
SketchFlow animation
SketchFlow player
Design documentation
What’s next?
From Sketchflow to production Animation, Transition
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