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

Workshop Mock-Ups



Workshop Mock-Ups

Workshop Mock-Ups

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



Total Views
Slideshare-icon Views on SlideShare
Embed Views



1 Embed 68 68



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Workshop Mock-Ups Workshop Mock-Ups Presentation Transcript

    • 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 of the functionality andenables testing.
    • . .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 project.-Show the overall structureof particular pages-Show how a family ofpages work together• Watch out for-Some people cant thinkabstractly.
    • 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.
    • 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.
    • 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.
    • 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.
    • 3. Mock-upcolour + graphics
    • 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.
    • 4. Prototypecode + functions
    • 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
    • 1. 2. Sketch Wiref rame(exploration + speed) nt) ure + conte (struct 3. 4. Prototyp Mock-up e (code + fu nctions) (c olor + graphics)
    • Dude, I need an MVP...
    • Sketch W irefra(exploration + speed) (structure + content) 3. Mock-up (color + layout) ? 4. Prototyp e (code + fu nctions) MVP (testing)
    • It depends... Some coding happens
    • Tool(s) of the trade
    • Keynote Powerpoint