No content

No content

Best Way To Develop An App?

Recommended Approach

What We Do? DIRECT CODING

How We Ended Up?

“First solve the problem. Then, Write the code.” Write the code.” -John Johnson

“You can use an eraser on the drafting table or a sledge hammer or a sledge hammer on the construction site.” -Frank Lloyd Wright

WMP Wireframe, Mockup & Prototype WMP Wireframe, Mockup & Prototype

Wireframe=Mockup=Prototype? Wireframe=Mockup=Prototype?

NO…

Wireframe

Mockup

Prototype

No content

Example

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

Wireframe

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

Mockup

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

Prototype

What Are The Differences? • Wireframe = Representation • Mockup = Shape/Size/Colors/Flow • Prototype = Function

No content

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

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/

Tools High To Very High Fidelity • Sketch • Photoshop • Illustrator • Illustrator • HTML + CSS (+JS)

Questions???

Thank You 