1. Mock-ups

2. What is a Mock-up? 3. A mock-up is a model of a design,used to acquire feedback from users. 4. A mock-up is a model of a design,used to acquire feedback from users.A mockup is a prototype if it providesat least part of the functionality andenables testing. 5. ..Mock-up PrototypeSome coding happens 6. Whats the process? 7. 1.2.SketchWire frame3.4.PrototypMock-upe 8. 1. Sketchexploration + speed 9. try out differentideas and concepts 10. first approach atnavigation model 11. establish acomposition 12. 2. Wireframescontent + structure Reference Zones High Fidelity Storyboards Standalone Specification 13. Reference ZonesWhat it is-Shows just majorpositioning of contentblocks Use to-Discuss a big idea orconcept early in a project.-Show the overall structureof particular pages-Show how a family ofpages work together Watch out for-Some people cant thinkabstractly. 14. High Fidelity WireframesWhat it is-Shows as much detail as in thebuilt product. Use to-Work through the detail of howan interaction (or part of one) willwork.-Ensure the designer andstakeholders both have the sameidea about how somethingworks. Watch out for-Readers get bogged down indetail.-Leave time to absorb the detail. 15. StoryboardsWhat it is-A sequence ofscreens that show theflow across time. Use to-Show how thewireframes fit together.-Show how a user willexperience a workflow- Demonstrate a taskend-to-end. Watch out for-Show tasks before &after for a wholecontext. 16. StandaloneWhat it is-A wireframe that can beunderstood without you there. Use to-Communicate any of thewireframe types wevediscussed, but in a way thatmeans they can be understoodwithout you.-Document for future referenceand use . Watch out for-Everything has to be included-Lots of annotations are needed-It can be hard to followlinkages between screens. 17. SpecificationWhat it is-A wireframe with enough detailto be built. Use to-Development. Watch out for-Everything has to be included: -all states (logged in, logged out, error) -data sources and destinations -all actions -all validations-It must stand alone-Talk to your developers to makeit usable for them.-Never show this to businesspeople or users. 18. 3. Mock-upcolour + graphics 19. Mock-upIts about-look and feel-built on the wireframewith color.-graphics and polish.-may adjust layoutslightly but stays.-within the generalguide of the wireframe. 20. 4. Prototypecode + functions 21. PrototypeIts about... Simulate the final design,aesthetics, materials andfunctionality of the intended design May be reduced in size orfunctionality Functions working together Final check for design flaws 22. 1. 2. Sketch Wiref rame(exploration + speed)nt)ure + conte(struct3.4.PrototypMock-upe (code + functions)(c olor + graphics) 23. Dude, I need an MVP... 24. Sketch W irefra(exploration + speed) (structure + content)3.Mock-up (color + layout)? 4.Prototyp e (code + fu nctions)MVP(testing) 25. It depends...Some coding happens 26. Tool(s) of the trade 27. Keynote Powerpoint Keynotopia.com