Your SlideShare is downloading. ×

Workshop Mock-Ups


Published on

Workshop Mock-Ups …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 Prototype Some coding happens
  • 6. What´s the process?
  • 7. 1. 2.Sketch Wire frame 3. 4. PrototypMock-up e
  • 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 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. 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. 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. 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. 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. 3. Mock-upcolour + graphics
  • 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. 4. Prototypecode + functions
  • 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. 1. 2. Sketch Wiref rame(exploration + speed) nt) ure + conte (struct 3. 4. Prototyp Mock-up e (code + fu nctions) (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