Android WMP: Wireframes, Mockups & Prototype

Transcript

3. Best Way To Develop An App?
4. Recommended Approach
5. What We Do? DIRECT CODING
6. How We Ended Up?
7. “First solve the problem. Then, Write the code.” Write the code.” -John Johnson
8. “You can use an eraser on the drafting table or a sledge hammer or a sledge hammer on the construction site.” -Frank Lloyd Wright
9. WMP Wireframe, Mockup & Prototype WMP Wireframe, Mockup & Prototype
10. Wireframe=Mockup=Prototype? Wireframe=Mockup=Prototype?
11. NO…
12. Wireframe
13. Mockup
14. Prototype
16. Example
17. Wireframe • Wireframe = A Blueprint • A low fidelity representation of a design • Wireframe shows: – The main group of content – The main group of content – The structure – Basic visualization – User - interface interaction
18. Wireframe
19. Mockup • Mockup = A visual design draft • A middle to high fidelity, static, design representation • Mockup represents: • Mockup represents: – The structure of information – Visualizes the content – Demonstrate the basic functionality – Encourage people to review the visual side
20. Mockup
21. Prototype • Prototype = A dummy replica of final product • A middle or high fidelity representation of a final product • Prototype allows: • Prototype allows: – To simulate user interface interaction – To experience the content – To test main interaction in a way similar to the final product
22. Prototype
23. What Are The Differences? • Wireframe = Representation • Mockup = Shape/Size/Colors/Flow • Prototype = Function
25. Tools Low To Medium Fidelity • Balsamiq: https://balsamiq.com/ • Flinto: https://www.flinto.com/ • Proto IO: https://proto.io/ • Moqups: https://moqups.com/ • Moqups: https://moqups.com/ • Mockups.me: http://mockups.me/ • Fluid UI: https://www.fluidui.com/ • UX Pin: https://www.uxpin.com/ • Pop: Android/iOS App
26. Tools Medium To High Fidelity • Axure: http://www.axure.com/ • InVision: http://www.invisionapp.com/ • Proto IO: https://proto.io/ • Proto IO: https://proto.io/ • Justinmind: http://www.justinmind.com/ • Proto share: http://www.protoshare.com/
27. Tools High To Very High Fidelity • Sketch • Photoshop • Illustrator • Illustrator • HTML + CSS (+JS)
28. Questions???
29. Thank You 