SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans
-
Upload
sencha -
Category
Technology
-
view
142 -
download
1
Transcript of SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans
![Page 1: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/1.jpg)
Design Methods for Better Product Development
Andrew Hemans
![Page 2: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/2.jpg)
Overview• Design Thinking
• Visual Design
• Color
• Layout
• Design Communication
• Critique
• The handoff
2
![Page 3: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/3.jpg)
Design. Develop. Test.
• Plan
• Research
• Talk to users
• Identify a problem
• Prototype
• Sketch multiple solutions
• Refine
• Critique
• Share with your team
• Show to potential users
A closer look at Design.
![Page 4: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/4.jpg)
Design Thinking
![Page 5: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/5.jpg)
Design Thinking Concepts
• Empathize – with your users
• Define – your users’ needs, their problem, and your insights
• Ideate – creating ideas for innovative solutions
• Prototype – to start creating solutions
• Test – validate solutions
![Page 6: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/6.jpg)
Research, or try before you buy.
![Page 7: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/7.jpg)
Research Methods
• Define a need or problem
• How have others attempted to solve this problem
• Define a target persona
• Conduct interviews
• Observe user behavior
![Page 8: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/8.jpg)
Sketch, Critique, Repeat.
![Page 9: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/9.jpg)
Quantity Over Quality.
• Talk is cheap, so is sketching
• Development can get expensive
• Pen and Paper
• Balsamiq
• Sketch/Photoshop
• Sencha Stencils
A Drawing is Worth 1000 words
![Page 10: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/10.jpg)
Visual Design
![Page 11: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/11.jpg)
Four Principals of Design
• Contrast
• Repetition
• Alignment
• Proximity
![Page 12: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/12.jpg)
Color Associations
• Red
• Green
• Blue
• Pink
![Page 13: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/13.jpg)
Layout
• Develop a grid system!
• Plan ahead
• Be thoughtful of where you place elements
• Be empathetic to your user
![Page 14: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/14.jpg)
The Hand-off
![Page 15: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/15.jpg)
Style Guides
• All good maps have a key!
• Include colors, fonts, sizing, etc.
• You can be more specific if needed.
![Page 16: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/16.jpg)
It’s Dangerous to go Alone!
• Include team members from the beginning of your project.
• Check in early and check in often for critique.
• Keep an open mind.
• Everyone cares.
![Page 17: SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans](https://reader031.fdocuments.net/reader031/viewer/2022030310/58f0dc221a28abb7108b4591/html5/thumbnails/17.jpg)