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

Workshop Mock-Ups

on

  • 885 views

Workshop Mock-Ups

Workshop Mock-Ups

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

Statistics

Views

Total Views
885
Views on SlideShare
817
Embed Views
68

Actions

Likes
2
Downloads
26
Comments
0

1 Embed 68

http://fabrica.squarespace.com 68

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 Keynotopia.com