Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

From Sketch to App: A Design to Development Workflow David Ortinau
 Xamarin MVP @davidortinau

Slide 3

Slide 3 text

photo: @nvega

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Bill Buxton Principal Researcher Microsoft Research

Slide 6

Slide 6 text

Rendr Workflow What comes before Develop

Slide 7

Slide 7 text

What we want Rendr Workflow

Slide 8

Slide 8 text

Sketching

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

“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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

How You Say

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Code Sketching with Sketches & Workbooks

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Wireframes

Slide 21

Slide 21 text

Wireframing: Implementation

Slide 22

Slide 22 text

Wireframing: Information Architecture

Slide 23

Slide 23 text

Wireframing: Activity Flows

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

Other Tools proto.io moqups.com uxpin.com

Slide 26

Slide 26 text

Prototype

Slide 27

Slide 27 text

Toolchain

Slide 28

Slide 28 text

Sketch App Tour

Slide 29

Slide 29 text

InVisionApp Tour

Slide 30

Slide 30 text

https://invis.io/ P65QDRJW2

Slide 31

Slide 31 text

SketchApp: Plugins

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Craft

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Production

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

SketchApp: Exporting

Slide 39

Slide 39 text

SketchApp: Exporting

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Zeplin Collaboration tool between designers and developers

Slide 42

Slide 42 text

Zeplin Tour

Slide 43

Slide 43 text

http://brax.tv/evolve16

Slide 44

Slide 44 text

What are some of your tools and pro-tips?

Slide 45

Slide 45 text

Thank You! Please take a minute to rate the session in the mobile app! David Ortinau
 Xamarin MVP @davidortinau