From Sketch to App: Design to Development Workflow

A good design and development workflow for any application involves users early and often to help inform and validate decisions when they can still be cheaply improved. In this session we will walk through using a variety of tools to concept, plan, prototype, user test, design, and develop superior mobile applications.

Transcript

2. From Sketch to App: A Design to Development Workflow David Ortinau
 Xamarin MVP @davidortinau
3. photo: @nvega
4. “Ultimately, we are deluding ourselves if we think that the products that we design are the ‘things’ that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name.”
5. Bill Buxton Principal Researcher Microsoft Research
6. Rendr Workflow What comes before Develop
7. What we want Rendr Workflow
8. Sketching
9. “The fundamental thing about sketching is that it is about asking not telling.” Bill Buxton
10. “If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.“ yep…Bill Buxton
14. How You Say
16. Tips For Useful Sketching • Don’t sweat the implementation. Dream a little. • Go through the exercise of multiple variations to see surprises appear. • At the end of the sketching process, expect to have a number of questions that need answering and assumptions that need validating.
17. Rendr Favorite Tools http://www.uistencils.com/collections/sketch-pads
18. Code Sketching with Sketches & Workbooks
19. Quick. To the point. 5 minutes or less. Xamarin, Xamarin Forms, Obj-C, Swift, and Java 3 Months FREE http://brax.tv/evolve16
20. Wireframes
21. Wireframing: Implementation
22. Wireframing: Information Architecture
23. Wireframing: Activity Flows
24. Rendr Favorite Tool: Balsamiq Mockups Lots to Like • Good selection of templates and standard controls • Low fidelity design • Presentation Mode • Clickable PDF • Mac & PC • It’s EASY! https://balsamiq.com/
25. Other Tools proto.io moqups.com uxpin.com
26. Prototype
27. Toolchain
28. Sketch App Tour
29. InVisionApp Tour
30. https://invis.io/ P65QDRJW2
31. SketchApp: Plugins
32. Rendr’s Favorite Sketch Plugins Asset Export for iOS and Android Magic Mirror FontAwesome Icon Font Content Generator Sketch Notebook Zeplin Export
33. Craft
34. Sketch Alternatives for Windows? a) Proto.io b) Adobe Experience Design CC c) Adobe Photoshop d) Adobe Illustrator e) None of the Above
35. Sketch Alternatives for Windows? a) Proto.io b) Adobe Experience Design CC c) Adobe Photoshop d) Adobe Illustrator e) None of the Above
36. Production
37. Production Goals Maintain design parity between platforms Easily generate styles, style guide Quickly access layout details, fonts, and visual assets Reduce the pain of multiple resolutions, pixel densities Communicate interactions
38. SketchApp: Exporting
39. SketchApp: Exporting
40. Placing Android Assets in Folders cd Desktop/res/ mkdir drawable-xxhdpi; mkdir drawable-xhdpi; mkdir drawable-hdpi; mkdir drawable-mdpi done for file in $(find . -type f -iname '*-xxhdpi*'); do mv "$file" "drawable-xxhdpi/${file/-xxhdpi/}" done for file in $(find . -type f -iname '*-xhdpi*'); do mv "$file" "drawable-xhdpi/${file/-xhdpi/}" done for file in $(find . -type f -iname '*-hdpi*'); do mv "$file" "drawable-hdpi/${file/-hdpi/}" done for file in $(find . -type f -iname '*-mdpi*'); do mv "$file" "drawable-mdpi/${file/-mdpi/}" done https://medium.com/@lmindler/using-sketch-3-and-a-bit-of-fairy-dust-for-a-better-android-workflow-f667d0048855#.fnp3aeibq
41. Zeplin Collaboration tool between designers and developers
42. Zeplin Tour
43. http://brax.tv/evolve16
44. What are some of your tools and pro-tips?
45. Thank You! Please take a minute to rate the session in the mobile app! David Ortinau
 Xamarin MVP @davidortinau