Mock-ups
What is a Mock-up?
A mock-up is a model of a design,used to acquire feedback from users.
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 o...
.                                .Mock-up                         Prototype          Some coding happens
What´s the process?
1.          2.Sketch    Wire frame  3.          4.          PrototypMock-up            e
1. Sketchexploration + speed
• try out differentideas and concepts
•first approach atnavigation model
•establish acomposition
2. Wireframescontent + structure• Reference Zones• High Fidelity• Storyboards• Standalone• Specification
Reference Zones•What it is-Shows just majorpositioning of contentblocks• Use to-Discuss a big idea orconcept early in a pr...
High Fidelity Wireframes•What it is-Shows as much detail as in thebuilt product.• Use to-Work through the detail of howan ...
Storyboards•What it is-A sequence ofscreens that show theflow across time.• Use to-Show how thewireframes fit together.-Sh...
Standalone•What it is-A wireframe that can beunderstood without you there.• Use to-Communicate any of thewireframe types w...
Specification•What it is-A wireframe with enough detailto be built.• Use to-Development.• Watch out for-Everything has to ...
3. Mock-upcolour + graphics
Mock-up•It´s about-look and feel-built on the wireframewith color.-graphics and polish.-may adjust layoutslightly but stay...
4. Prototypecode + functions
PrototypeIt´s about...• Simulate the final design,aesthetics, materials andfunctionality of the intended design• May be re...
1.                       2.   Sketch                 Wiref rame(exploration + speed)              nt)                     ...
Dude, I need an MVP...
Sketch                           W irefra(exploration + speed)               (structure + content)      3.    Mock-up     ...
It depends...                Some coding happens
Tool(s) of the trade
Keynote       Powerpoint   Keynotopia.com
Workshop Mock-Ups
Workshop Mock-Ups
Upcoming SlideShare
Loading in...5
×

Workshop Mock-Ups

886

Published on

Workshop Mock-Ups

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

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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 Keynotopia.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×