Workshop Mock-Ups


Published on

Workshop Mock-Ups

Workshop dado no programa FastStart Fall'12
Mais Informações:

Published in: Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Workshop Mock-Ups

  1. 1. Mock-ups
  2. 2. What is a Mock-up?
  3. 3. A mock-up is a model of a design,used to acquire feedback from users.
  4. 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. 5. . .Mock-up Prototype Some coding happens
  6. 6. What´s the process?
  7. 7. 1. 2.Sketch Wire frame 3. 4. PrototypMock-up e
  8. 8. 1. Sketchexploration + speed
  9. 9. • try out differentideas and concepts
  10. 10. •first approach atnavigation model
  11. 11. •establish acomposition
  12. 12. 2. Wireframescontent + structure• Reference Zones• High Fidelity• Storyboards• Standalone• Specification
  13. 13. Reference Zones•What 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. 14. High Fidelity Wireframes•What 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. 15. Storyboards•What 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. 16. Standalone•What 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. 17. Specification•What 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. 18. 3. Mock-upcolour + graphics
  19. 19. Mock-up•It´s about-look and feel-built on the wireframewith color.-graphics and polish.-may adjust layoutslightly but stays.-within the generalguide of the wireframe.
  20. 20. 4. Prototypecode + functions
  21. 21. PrototypeIt´s 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. 22. 1. 2. Sketch Wiref rame(exploration + speed) nt) ure + conte (struct 3. 4. Prototyp Mock-up e (code + fu nctions) (c olor + graphics)
  23. 23. Dude, I need an MVP...
  24. 24. Sketch W irefra(exploration + speed) (structure + content) 3. Mock-up (color + layout) ? 4. Prototyp e (code + fu nctions) MVP (testing)
  25. 25. It depends... Some coding happens
  26. 26. Tool(s) of the trade
  27. 27. Keynote Powerpoint