interaktionsdesign och sketchflow
DESCRIPTION
Presentation hos SweNug Gbg den 18 februari 2010TRANSCRIPT
![Page 1: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/1.jpg)
Interaction Design & SketchFlowDanwei Tran
Developer evangelist, Microsoft
![Page 2: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/2.jpg)
Checklista
Vad är interaktionsdesign?
Hur designar jag upplevelser?
Hur skapar jag interaktiva prototyper?
![Page 3: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/3.jpg)
Vad är interaktionsdesign?
![Page 4: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/4.jpg)
Vad är interaktionsdesign?
![Page 5: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/5.jpg)
Interaction
design
Industrial
design
User experience
design
Human-computer
interaction
Human factors
Usability engineering
Information
architecture
Communication
design
User interface
engineering
Vad är interaktionsdesign?
![Page 6: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/6.jpg)
1. Gilla 3. Använda2. Förstå
Vad är interaktionsdesign?
![Page 7: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/7.jpg)
Hur designar jag upplevelser?
Olika tillvägagångssätt
• User-centered design
• Activity-centered design
• Genius design
![Page 8: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/8.jpg)
Hur designar jag upplevelser?
Olika tillvägagångssätt
• User-centered design
• Activity-centered design
• Genius design
![Page 9: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/9.jpg)
Hur designar jag upplevelser?
User-centered design
Målgrupp &
kontext
Krav
Skapa
Evaluering
![Page 10: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/10.jpg)
Hur designar jag upplevelser?
![Page 11: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/11.jpg)
Hur skapar jag interaktiva prototyper?
SketchFlow
![Page 12: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/12.jpg)
Designer & Developer Workflow
Designer Developer
![Page 13: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/13.jpg)
ProductionPrototype
Core architecture
User Experience
Visual Studio
Expression Blend
SketchFlow
PSD, AI, Paper Client
1: Ideas 2: Resources 3: Project
![Page 14: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/14.jpg)
ProductionPrototype
Visual Studio
Expression Blend
SketchFlow
PSD, AI, Paper
ALM/Visual Studio Team System
Specs,
Requirements Deployment
![Page 15: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/15.jpg)
Olika prototyp-nivåer
![Page 16: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/16.jpg)
SketchFlow Map
![Page 17: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/17.jpg)
Lägg till innehåll på varje screen
![Page 18: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/18.jpg)
Sketch Styles
![Page 19: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/19.jpg)
Scanna in skisser
![Page 20: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/20.jpg)
Importera från Photoshop…
Change this slide to making the prototype real
![Page 21: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/21.jpg)
…ändra i Blend
![Page 22: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/22.jpg)
Få feedback
![Page 23: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/23.jpg)
Behaviors
![Page 24: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/24.jpg)
Skapa/importera data
![Page 25: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/25.jpg)
Generera dokumentation
![Page 26: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/26.jpg)
Tips:
www.dynamic-prototyping.com
![Page 27: Interaktionsdesign och SketchFlow](https://reader035.vdocuments.net/reader035/viewer/2022081401/559a60a61a28abbd1d8b47d6/html5/thumbnails/27.jpg)
Kontakta mig gärna
www.twitter.com/danweitran
www.blogs.technet.com/danwei
MIX10
15-16 mars i Las Vegas
www.microsoft.com/mix