Android UI Prototyping: What Why How?

A talk given by me on Android UI prototyping at Droidcon India 2012

Transcript

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

   View Slide

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

   View Slide

3. About Soham
   Co-founder of Triveous
   Co-organizer of Blrdroid
   Creator of Sky Recorder
   @s0h4m
   soham@triveous.com
   By Soham Mondal @ Droidcon India 2012
   

   View Slide

4. What is Prototyping?
   By Soham Mondal @ Droidcon India 2012
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Example
   By Soham Mondal @ Droidcon India 2012
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. By Soham Mondal @ Droidcon India 2012
    

    View Slide

14. By Soham Mondal @ Droidcon India 2012
    

    View Slide

15. By Soham Mondal @ Droidcon India 2012
    

    View Slide

16. Tools for prototyping
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

18. Old school tools
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

19. By Soham Mondal @ Droidcon India 2012
    

    View Slide

20. By Soham Mondal @ Droidcon India 2012
    

    View Slide

21. By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

23. Free tools: Pencil
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

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

    View Slide

26. By Soham Mondal @ Droidcon India 2012
    

    View Slide

27. By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

29. Omnigraffe
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

30. By Soham Mondal @ Droidcon India 2012
    

    View Slide

31. By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

33. Balsamiq mockups
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

34. By Soham Mondal @ Droidcon India 2012
    

    View Slide

35. By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

37. Adobe Photoshop
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

38. By Soham Mondal @ Droidcon India 2012
    

    View Slide

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

    View Slide

40. Device frame
    generator
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

41. By Soham Mondal @ Droidcon India 2012
    

    View Slide

42. Android device
    preview
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

43. By Soham Mondal @ Droidcon India 2012
    

    View Slide

44. By Soham Mondal @ Droidcon India 2012
    

    View Slide

45. By Soham Mondal @ Droidcon India 2012
    

    View Slide

46. Live Demo
    By Soham Mondal @ Droidcon India 2012
    

    View Slide

47. Start
    Prototyping
    Thank You
    @s0h4m
    soham@triveous.com
    By Soham Mondal @ Droidcon India 2012
    

    View Slide