Tweet
Tweet

Slide 1

Slide 1 text

Android UI Prototyping What Why How? Soham Mondal By Soham Mondal @ Droidcon India 2012

Slide 2

Slide 2 text

What is Prototyping? Why Prototype? Some example prototypes Case study Prototyping tools Other tools and demo Agenda By Soham Mondal @ Droidcon India 2012

Slide 3

Slide 3 text

About Soham Co-founder of Triveous Co-organizer of Blrdroid Creator of Sky Recorder @s0h4m [email protected] By Soham Mondal @ Droidcon India 2012

Slide 4

Slide 4 text

What is Prototyping? By Soham Mondal @ Droidcon India 2012

Slide 5

Slide 5 text

Prototyping is a means of exploring ideas before you invest in them. Architects create models out of paper or cardboard, or with virtual reality tools Aeronautic engineers use wind tunnels Bridge builders create stress models Filmmakers create storyboard . Source: Scott Berkun - http://scottberkun.com/essays/12-the-art-of-ui-prototyping/ By Soham Mondal @ Droidcon India 2012

Slide 6

Slide 6 text

What is the use of Prototyping? By Soham Mondal @ Droidcon India 2012

Slide 7

Slide 7 text

Proof of Concept Design Exploration Technical Exploration Source: Scott Berkun - http://scottberkun.com/essays/12-the-art-of-ui-prototyping/ By Soham Mondal @ Droidcon India 2012

Slide 8

Slide 8 text

Determine requirements Make prototype Evaluate Prototype Prototyping process By Soham Mondal @ Droidcon India 2012

Slide 9

Slide 9 text

Example By Soham Mondal @ Droidcon India 2012

Slide 10

Slide 10 text

Source: : http://actionbar.posterous.com/how-a-few-popular-android-apps-could-get-an-a By Soham Mondal @ Droidcon India 2012

Slide 11

Slide 11 text

Source: Guenther Beyer - https://plus.google.com/u/0/109726284197282147930/posts/5McKooqNnnd By Soham Mondal @ Droidcon India 2012

Slide 12

Slide 12 text

Case study: Ooplo timer By Soham Mondal @ Droidcon India 2012

Slide 13

Slide 13 text

By Soham Mondal @ Droidcon India 2012

Slide 14

Slide 14 text

By Soham Mondal @ Droidcon India 2012

Slide 15

Slide 15 text

By Soham Mondal @ Droidcon India 2012

Slide 16

Slide 16 text

Tools for prototyping By Soham Mondal @ Droidcon India 2012

Slide 17

Slide 17 text

Old School Totally Free Commercial By Soham Mondal @ Droidcon India 2012

Slide 18

Slide 18 text

Old school tools By Soham Mondal @ Droidcon India 2012

Slide 19

Slide 19 text

By Soham Mondal @ Droidcon India 2012

Slide 20

Slide 20 text

By Soham Mondal @ Droidcon India 2012

Slide 21

Slide 21 text

By Soham Mondal @ Droidcon India 2012

Slide 22

Slide 22 text

Low Difficulty Old Age Human beings Made by Free Price NA Compatibility Old School UI Stencil Kit Pen & Paper Whiteboard Paper cutouts By Soham Mondal @ Droidcon India 2012

Slide 23

Slide 23 text

Free tools: Pencil By Soham Mondal @ Droidcon India 2012

Slide 24

Slide 24 text

Low Difficulty Old Age Evolvus Made by Free Price All platforms Compatibility Pencil Free! Android 4.x stencils available Works well By Soham Mondal @ Droidcon India 2012

Slide 25

Slide 25 text

Commercial tools: Wireframe sketcher By Soham Mondal @ Droidcon India 2012

Slide 26

Slide 26 text

By Soham Mondal @ Droidcon India 2012

Slide 27

Slide 27 text

By Soham Mondal @ Droidcon India 2012

Slide 28

Slide 28 text

Low Difficulty Old Age Petru Severin Made by $99 Price All platforms Compatibility Wireframe Sketcher Standalone and Eclipse based Collaborative version control Wireframe anything By Soham Mondal @ Droidcon India 2012

Slide 29

Slide 29 text

Omnigraffe By Soham Mondal @ Droidcon India 2012

Slide 30

Slide 30 text

By Soham Mondal @ Droidcon India 2012

Slide 31

Slide 31 text

By Soham Mondal @ Droidcon India 2012

Slide 32

Slide 32 text

Omnigraffe Low Difficulty Old Age Omni Group Made by $99, $199 Price Mac and iPad only Compatibility Very versatile, industry standard Official Android Stencils available Used by UI designers everywhere By Soham Mondal @ Droidcon India 2012

Slide 33

Slide 33 text

Balsamiq mockups By Soham Mondal @ Droidcon India 2012

Slide 34

Slide 34 text

By Soham Mondal @ Droidcon India 2012

Slide 35

Slide 35 text

By Soham Mondal @ Droidcon India 2012

Slide 36

Slide 36 text

Balsamiq mockups Low Difficulty Old Age Balsamiq Made by $79 Price All platforms Compatibility Desktop, Web and Plugin based Supports Google drive, Confluence Collaborative approach By Soham Mondal @ Droidcon India 2012

Slide 37

Slide 37 text

Adobe Photoshop By Soham Mondal @ Droidcon India 2012

Slide 38

Slide 38 text

By Soham Mondal @ Droidcon India 2012

Slide 39

Slide 39 text

Very very versatile Lots of available wireframes Used by UI designers everywhere High Difficulty Old Age Adobe Made by $699 Price Windows, Mac Compatibility Photoshop By Soham Mondal @ Droidcon India 2012

Slide 40

Slide 40 text

Device frame generator By Soham Mondal @ Droidcon India 2012

Slide 41

Slide 41 text

By Soham Mondal @ Droidcon India 2012

Slide 42

Slide 42 text

Android device preview By Soham Mondal @ Droidcon India 2012

Slide 43

Slide 43 text

By Soham Mondal @ Droidcon India 2012

Slide 44

Slide 44 text

By Soham Mondal @ Droidcon India 2012

Slide 45

Slide 45 text

By Soham Mondal @ Droidcon India 2012

Slide 46

Slide 46 text

Live Demo By Soham Mondal @ Droidcon India 2012

Slide 47

Slide 47 text

Start Prototyping Thank You @s0h4m [email protected] By Soham Mondal @ Droidcon India 2012