Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Sketch to App: Design to Development Workflow

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.


David Ortinau

April 28, 2016


  1. None
  2. From Sketch to App: A Design to Development Workflow David

 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
  11. None
  12. None
  13. None
  14. How You Say

  15. None
  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