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

1. View Slide

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

   Xamarin MVP
   @davidortinau
   

   View Slide

3. photo: @nvega
   

   View Slide

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.”
   

   View Slide

5. Bill Buxton
   Principal Researcher
   Microsoft Research
   

   View Slide

6. Rendr Workflow
   What comes before Develop
   

   View Slide

7. What we want
   Rendr Workflow
   

   View Slide

8. Sketching
   

   View Slide

9. “The fundamental thing
   about sketching is that it is
   about asking not telling.”
   Bill Buxton
   

   View Slide

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
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. How You Say
    

    View Slide

15. View Slide

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.
    

    View Slide

17. Rendr Favorite Tools
    http://www.uistencils.com/collections/sketch-pads
    

    View Slide

18. Code Sketching with Sketches & Workbooks
    

    View Slide

19. Quick. To the point. 5 minutes or less.
    Xamarin, Xamarin Forms,
    Obj-C, Swift, and Java
    3 Months FREE
    http://brax.tv/evolve16
    

    View Slide

20. Wireframes
    

    View Slide

21. Wireframing: Implementation
    

    View Slide

22. Wireframing: Information Architecture
    

    View Slide

23. Wireframing: Activity Flows
    

    View Slide

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/
    

    View Slide

25. Other Tools
    proto.io moqups.com uxpin.com
    

    View Slide

26. Prototype
    

    View Slide

27. Toolchain
    

    View Slide

28. Sketch App Tour
    

    View Slide

29. InVisionApp Tour
    

    View Slide

30. https://invis.io/
    P65QDRJW2
    

    View Slide

31. SketchApp: Plugins
    

    View Slide

32. Rendr’s Favorite Sketch Plugins
    Asset Export for iOS and Android
    Magic Mirror
    FontAwesome
    Icon Font
    Content Generator
    Sketch Notebook
    Zeplin Export
    

    View Slide

33. Craft
    

    View Slide

34. Sketch Alternatives for Windows?
    a) Proto.io
    b) Adobe Experience Design CC
    c) Adobe Photoshop
    d) Adobe Illustrator
    e) None of the Above
    

    View Slide

35. Sketch Alternatives for Windows?
    a) Proto.io
    b) Adobe Experience Design CC
    c) Adobe Photoshop
    d) Adobe Illustrator
    e) None of the Above
    

    View Slide

36. Production
    

    View Slide

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
    

    View Slide

38. SketchApp: Exporting
    

    View Slide

39. SketchApp: Exporting
    

    View Slide

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
    

    View Slide

41. Zeplin
    Collaboration tool between designers and developers
    

    View Slide

42. Zeplin Tour
    

    View Slide

43. http://brax.tv/evolve16
    

    View Slide

44. What are some of your
    tools and pro-tips?
    

    View Slide

45. Thank You!
    Please take a minute to rate the session in the mobile app!
    David Ortinau

    Xamarin MVP
    @davidortinau
    

    View Slide