$30 off During Our Annual Pro Sale. View Details »

Android UI Prototyping: What Why How?

Android UI Prototyping: What Why How?

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

Soham Mondal

November 02, 2012
Tweet

More Decks by Soham Mondal

Other Decks in Technology

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
    [email protected]
    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
    [email protected]
    By Soham Mondal @ Droidcon India 2012

    View Slide