Workshop Mock-Ups
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Workshop Mock-Ups

  • 977 views
Uploaded on

Workshop Mock-Ups ...

Workshop Mock-Ups

Workshop dado no programa FastStart Fall'12
Mais Informações: http://fabricadestartups.com/

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
977
On Slideshare
909
From Embeds
68
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
2

Embeds 68

http://fabrica.squarespace.com 68

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Keynotopia.com